cocos 常用元件
前面的話
本文將詳細介紹 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, () => {
//
});