008--cc.Sprite

1: 游戏中显示一个图片，通常我们把这个叫做”精灵” sprite
2: cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame)
3: 显示一个图片的步骤:
(1) 创建一个节点;
(2) 添加一个组件;
(3) 要显示的图片(SpriteFrame)拖动到SpriteFrame;
(4) 配置图片的SIZE_MODE:
a: CUSTOM 大小和CCNode的大小一致;
b: RAW 原始的图片大小;
c: TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;
(5) trim: 是否裁剪掉 图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明度,动画，不至于抖动;
4: 精灵更换spriteFame;

5: 快捷创建带精灵组件的节点;

快捷创建带精灵组件的节点.png

后面标有精灵的是有显示的默认的颜色 后面标有纯色的表示的是默认的白色
两者没有差别 只是在创建表达的重点不一样

1: simple: 精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小;
2: Tiled: 平铺模式, 图片以平铺的模式，铺地板砖的模式，铺到目标大小上;

平铺模式

会按照图片自身的原始进行对现有的精灵大小进行平铺，如果精灵比图片小，则显示图片的局部。

3: Slice: 九宫格模式，指定拉伸区域;

Slice模式

4: Filled: 设置填充的方式(圆，矩形)，可以使用比例来裁剪显示图片(只显示的比例);

利用Filled实现的技能冷却按钮

技能冷却按钮节点层次

SkillButton和Prebg都设置相同的精灵包含大小也一样，Prebg的颜色设置为灰色的。
Prebg相关设置

Prebg相关设置

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);  
    }
}