[1]Sprite
[2]Label
[3]Spine
[4]Button
[5]Audio
[6]Schedule
前面的話
本文将詳細介紹 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 是無效的，該節點的寬高被置成0，且無法修改。是以，如果該節點需要觸發點選或其他事件，則需要将該元素包一層父級
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, () => {
//
}); Schedule
計時器共有如下4個函數
schedule：開始一個計時器
scheduleOnce：開始一個隻執行一次的計時器
unschedule：取消一個計時器
unscheduleAllCallbacks：取消這個元件的所有計時器 schedule對應于setInterval，scheduleOnce對應于setTimeout
要特别注意的是，schedule的機關是秒(s)，而不是毫秒(ms)
1、簡單使用計時器
component.schedule(function() {
// 這裡的 this 指向 component
this.doSomething();
}, 5); 上面這個計時器将每隔 5s 執行一次
2、詳細使用計時器
// 以秒為機關的時間間隔
var interval = 5;
// 重複次數
var repeat = 3;
// 開始延時
var delay = 10;
component.schedule(function() {
// 這裡的 this 指向 component
this.doSomething();
}, interval, repeat, delay); 上面的計時器将在10秒後開始計時，每5秒執行一次回調，重複3次
3、單次計時器
component.scheduleOnce(function() {
// 這裡的 this 指向 component
this.doSomething();
}, 2); 上面的計時器将在兩秒後執行一次回調函數，之後就停止計時
4、取消計時器
可以使用回調函數本身來取消計時器
this.count = 0;
this.callback = function () {
if (this.count === 5) {
// 在第六次執行回調時取消這個計時器
this.unschedule(this.callback);
}
this.doSomething();
this.count++;
}
component.schedule(this.callback, 1); 注意，元件的計時器調用回調時，會将回調的
this
指定為元件本身，是以回調中可以直接使用
this
好的代碼像粥一樣，都是用時間熬出來的