1: 游戲中顯示一個圖片，通常我們把這個叫做”精靈” sprite
2: cocos creator如果需要顯示一個圖片，那么需要在節(jié)點上掛一個精靈組件,為這個組件指定要顯示的圖片(SpriteFrame)
3: 顯示一個圖片的步驟:
(1) 創(chuàng)建一個節(jié)點;
(2) 添加一個組件;
(3) 要顯示的圖片(SpriteFrame)拖動到SpriteFrame;
(4) 配置圖片的SIZE_MODE:
a: CUSTOM 大小和CCNode的大小一致;
b: RAW 原始的圖片大小;
c: TRIMMED 大小為原始圖片大小, 顯示的內(nèi)容是裁剪掉透明像素后的圖片;
(5) trim: 是否裁剪掉 圖片的透明區(qū)域, 如果勾選，就會把完全透明的行和列裁掉, 做幀動畫的時候，我們一般是用原始大小不去透明度,動畫，不至于抖動;
4: 精靈更換spriteFame;

5: 快捷創(chuàng)建帶精靈組件的節(jié)點;

快捷創(chuàng)建帶精靈組件的節(jié)點.png

后面標(biāo)有精靈的是有顯示的默認(rèn)的顏色 后面標(biāo)有純色的表示的是默認(rèn)的白色
兩者沒有差別 只是在創(chuàng)建表達(dá)的重點不一樣

1: simple: 精靈最普通的模式, 選擇該模式后,圖片將縮放到指定的大小;
2: Tiled: 平鋪模式, 圖片以平鋪的模式，鋪地板磚的模式，鋪到目標(biāo)大小上;

平鋪模式

會按照圖片自身的原始進(jìn)行對現(xiàn)有的精靈大小進(jìn)行平鋪，如果精靈比圖片小，則顯示圖片的局部。

3: Slice: 九宮格模式，指定拉伸區(qū)域;

Slice模式

4: Filled: 設(shè)置填充的方式(圓，矩形)，可以使用比例來裁剪顯示圖片(只顯示的比例);

利用Filled實現(xiàn)的技能冷卻按鈕

技能冷卻按鈕節(jié)點層次

SkillButton和Prebg都設(shè)置相同的精靈包含大小也一樣，Prebg的顏色設(shè)置為灰色的。
Prebg相關(guān)設(shè)置

Prebg相關(guān)設(shè)置

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {


   @property()
   private timer:number = 0;
   @property(cc.Sprite)
   cdSprite = null;
    @property()
    private CDTime:number = 5;

    start () {
        this.cdSprite = this.node.getComponent(cc.Sprite);
    }

    update (dt) 
    {
        this.timer +=dt;
        this.cdSprite.fillRange = (this.CDTime-this.timer)/this.CDTime;
        if (this.timer>this.CDTime) {
            this.timer = this.CDTime;
            this.cdSprite.fillRange = 0;
        }
    }
    clearTimer(){
        this.timer  =0;
    }   
}

SkillButton上的腳本如下：

const {ccclass, property} = cc._decorator;
import SpriteDemo from "./SpriteDemo"
@ccclass
export default class NewClass extends cc.Component {


    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        this.node.on(cc.Node.EventType.TOUCH_START,()=>{
            var prebgNode = this.node.getChildByName("Prebg");
            if (prebgNode.getComponent(cc.Sprite).fillRange == 0) {
                console.log("技能釋放");
                prebgNode.getComponent(SpriteDemo).clearTimer();                
            }else{
                console.log("尚未完成冷卻");
                
            }
        },this);  
    }
}