cocos 常用組件_ZenDei技術網路在線

[1]Sprite [2]Label [3]Spine [4]Button [5]Audio ...

前面的話

　　本文將詳細介紹 cocos 中的常用組件

Sprite

【概述】

　　Sprite（精靈）是 2D 游戲中最常見的顯示圖像的方式，在節點上添加 Sprite 組件，就可以在場景中顯示項目資源中的圖片

　　點擊屬性檢查器下麵的 添加組件 按鈕，然後從 添加渲染組件 中選擇 Sprite，即可添加 Sprite 組件到節點上

【屬性】

　　由上圖所示，Sprite組件包含如下屬性

　　Atlas表示Sprite顯示圖片所屬的Atlas圖集資源

　　Sprite Frame 表示Sprite使用的SpriteFrame圖片資源

　　Type 表示渲染模式，Sprite組件支持四種渲染模式

　　　　1、普通模式(Simple)：該模式為預設值，修改尺寸會整體拉伸圖像，適用於序列幀動畫和普通圖像

　　　　2、九宮格(Sliced)：修改尺寸時四個角的區域不會拉伸，適用於UI按鈕和麵板背景

　　　　3、平鋪(Tiled)： Sprite尺寸增大時，圖像不會被拉伸，而是會按照原始圖片的大小不斷重覆，就像平鋪瓦片一樣將原始圖片鋪滿整個 Sprite 規定的大小

　　　　4、填充(Filed)：根據原點和填充模式的設置，按照一定的方向和比例繪製原始圖片的一部分。經常用於進度條的動態展示

　　Size Mode 用來指定Sprite的尺寸模式

　　　　1、Trimmed：該模式為預設值，表示會使用原始圖片資源裁剪透明像素後的尺寸

　　　　2、Raw：表示會使用原始圖片未經裁剪的尺寸

　　　　3、Custom：表示使用自定義尺寸，當用戶手動修改過Size屬性後，Size Mode 會被自動設置為 Custom

　　Trim表示節點約束框內是否包含透明像素區域，勾選此項會去除節點約束框內的透明區域，預設勾選

　　Src Blend Factor 表示圖像混合模式

　　Dst Blend Factor 表示背景圖像混合模式，與上面的屬性共同作用，可以將前景和背景Sprite用不同的方式混合渲染

【聲明】

cc.Sprite
cc.SpriteFrame

【使用】

this.node.getComponent(cc.Sprite).spriteFrame = '';

Label

【概述】

　　Label 組件用來顯示一段文字，文字可以是系統字體，TrueType 字體或者 BMFont 字體和藝術數字，另外，Label 還具有排版功能

　　點擊屬性檢查器下麵的添加組件按鈕，然後從添加渲染組件中選擇Label，即可添加 Label 組件到節點上

【屬性】

　　由上圖所示，Label 組件包含如下屬性

　　String 表示文本內容字元串

　　Horizontal Align 表示水平對齊模式，包括Left、Center、Right，預設為left

　　Vertical Align 表示垂直對齊模式，包括Top、Center、Bottom，預設為top

　　Font Size 表示字體大小

　　Line Height 表示行高

　　Overflow 表示文字排版模式，共4種

　　　　1、none：該模式為預設值

　　　　2、clamp：節點約束框之外的文字會被截斷

　　　　3、shrink：自動根據節點約束框縮小文字

　　　　4、resize：根據文本內容自動更新節點的height屬性

　　Font 指定文本渲染需要的字體文件，如果使用系統字體，則此屬性可以為空

　　Font Family 表示字體名稱

【聲明】

cc.Label

【使用】

this.node.getComponent(cc.Label).string = '';

Spine

【概述】

　　Spine 組件對骨骼動畫（Spine）資源，進行渲染和播放

　　點擊屬性檢查器下方的 添加組件 -> 添加渲染組件 -> Spine Skeleton 按鈕，即可添加 Spine 組件到節點上

【屬性】

　　由上圖所示，Spine 組件包含如下屬性

　　Skeleton Data 表示骨骼信息數據，是Spine導出後的 .json 文件

　　Default Skin 表示預設的皮膚，預設值為 default

　　Animation 表示當前播放的動畫名稱，預設值為none

　　Loop 表示是否迴圈播放當前動畫，預設為true

　　Premultiplied Alpha 表示圖片是否使用預乘，預設為true。當圖片的透明區域出現色塊時需要關閉該選項，當圖片的半透明區域顏色變黑時需要啟用該選項

　　Time Scale 表示當前骨骼中所有動畫的時間縮放率，預設為1。值越大，動畫速度越快

　　Debug Slots 表示是否顯示圖片邊框，預設未選中

　　Debug Bones 表示是否顯示骨骼，預設未選中

　　註意：當使用 Spine 組件時，Node 節點上 Anchor 和 Size 是無效的

【聲明】

sp.Skeleton
sp.SkeletonData

【使用】

this.node.getComponent(sp.Skeleton).animation = '';

【事件】

this.node.getComponent(sp.Skeleton).setCompleteListener(track => {
    if(!this.node) return;
    if(track.animation.name !== 'play') return;                        
});

【註意事項】

　　設置動畫的屬性，一定要在設置動畫名稱前設置。比如，迴圈一定要在動畫名稱設置前設置

this.birdSkeleton.loop = false;                
this.birdSkeleton.animation = '4_3_d_zhengzha';

Button

【概述】

　　Button 組件可以響應用戶的點擊操作，當用戶點擊 Button 時，Button 自身會有狀態變化。另外，Button 還可以讓用戶在完成點擊操作後響應一個自定義的行為

　　點擊屬性檢查器下麵的添加組件按鈕，然後從添加 UI 組件中選擇Button，即可添加 Button 組件到節點上

【屬性】

　　由上圖所示，Button 組件包含如下屬性

　　Target 表示目標節點，當該節點的狀態發生變化時，會相應地修改該節點的 SpriteFrame 或 Color

　　Interactable 表示是否禁用該按鈕，預設選中

　　enableAutoGrayEffect 當設置為 true 時，如果 button 的 interactable 屬性為 false，則 button 的 sprite Target 會使用內置 shader 變灰，預設未選中

　　Transition 表示按鈕狀態變化時的過渡類型，共有4種過渡類型

　　　　1、None，無過渡，預設值

　　　　2、Color，顏色過渡，可設置 Normal、Pressed、Hover、Disabled 這四個狀態下的顏色及狀態切換的時間間隔 Duration

　　　　3、Sprite，圖片過渡，可設置 Normal、Pressed、Hover、Disabled 這四個狀態下的背景圖片

　　　　4、Scale，縮放過渡，可設置狀態切換的時間間隔 Duration 及用戶點擊按鈕後，按鈕的縮放值 ZoomScale

　　Click Event 表示按鈕點擊事件的列表，預設為0，表示無點擊事件

【聲明】

cc.Button

【使用】

this.enterBtn.getComponent(cc.Button).normalSprite = '';
this.enterBtn.getComponent(cc.Button).pressedSprite = '';

　　註意：當button組件設置為圖片時，需要保留sprite組件，否則圖片不顯示

Audio

【聲明】

　　在腳本內定義一個 audioClip 資源對象

properties: {
    audio: {
        default: null,
        type: cc.AudioClip
    }
}

【播放】

　　使用 cc.audioEngine.play(audio, loop, volume); 播放

cc.audioEngine.stop(this.node.audioId);
this.node.audioId = cc.audioEngine.play(this.endAudio, false);

　　組件destroy時停止播放聲音

onDestroy: function () {
    cc.audioEngine.stop(this.node.audioId);
}

【聲音回調】

cc.audioEngine.setFinishCallback(this.node.audioId, () => {
    //                      
});