cocos 經常使用組件

前面的話

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

 

Sprite

【概述】

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

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

【屬性】

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

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

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

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

　　　　一、普通模式(Simple)：該模式爲默認值，修改尺寸會總體拉伸圖像，適用於序列幀動畫和普通圖像

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

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

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

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

　　　　一、Trimmed： 該模式爲默認值，表示會使用原始圖片資源裁剪透明像素後的尺寸

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

　　　　三、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種

　　　　一、none： 該模式爲默認值

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

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

　　　　四、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種過渡類型

　　　　一、None，無過渡，默認值

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

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

　　　　四、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)

　　一、簡單使用計時器

 component.schedule(function() {
     // 這裏的 this 指向 component
     this.doSomething();
 }, 5);

　　上面這個計時器將每隔 5s 執行一次

　　二、詳細使用計時器

 // 以秒爲單位的時間間隔
 var interval = 5;
 // 重複次數
 var repeat = 3;
 // 開始延時
 var delay = 10;
 component.schedule(function() {
     // 這裏的 this 指向 component
     this.doSomething();
 }, interval, repeat, delay);

　　上面的計時器將在10秒後開始計時，每5秒執行一次回調，重複3次

　　三、單次計時器

 component.scheduleOnce(function() {
     // 這裏的 this 指向 component
     this.doSomething();
 }, 2);

　　上面的計時器將在兩秒後執行一次回調函數，以後就中止計時

　　四、取消計時器

　　可使用回調函數自己來取消計時器

 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