7.cc.Sprite元件的使用詳解

1. cc.Sprite

遊戲中顯示一個圖檔，通常我們把這個叫做”精靈” sprite

cocos creator如果需要顯示一個圖檔，那麼需要在節點上挂一個精靈元件,為這個元件指定要顯示的圖檔(SpriteFrame)

顯示一個圖檔的步驟:

     (1) 建立一個空節點;

     (2) 添加一個渲染元件-->sprite;

     (3) 要顯示的圖檔(SpriteFrame)拖動到SpriteFrame;

     (4) 配置圖檔的SIZE_MODE:  

             a: CUSTOM 大小和CCNode的大小一緻;

             b: RAW 原始的圖檔大小;

             c:  TRIMMED 大小為原始圖檔大小, 顯示的内容是裁剪掉透明像素後的圖檔;

     (5) trim: 是否裁剪掉 圖檔的透明區域, 如果勾選，就會把完全透明的行和列裁掉, 做幀動畫的時候，我們一般是用原始大小不去透明度,動畫，不至于抖動;

精靈更換spriteFame;

快捷建立帶精靈元件的節點;

2. 圖檔模式

simple: 精靈最普通的模式, 選擇該模式後,圖檔将縮放到指定的大小;

Tiled: 平鋪模式, 圖檔以平鋪的模式，鋪地闆磚的模式，鋪到目标大小上;

Slice: 九宮格模式，指定拉伸區域;

Filled: 設定填充的方式(圓，矩形)，可以使用比例來裁剪顯示圖檔(隻顯示的比例);

3. 九宮格的使用

指定拉伸區域, 讓圖檔在拉伸的時候某些區域不會改變; 比如圓角,聊天氣泡等

九宮格能省圖檔資源, (對話框);

編輯九宮格,來制定縮放區域;

體會對話框背景的九宮拉伸;

4. Filled模式

配置Filled模式

配置Filled模式, 設定為Radius參數;

配置Radius的參數模式,

           中心: 位置坐标(0, 1小數), (0, 0)左下腳, (1, 1) 右上角 (0.5, 0.5) 中心點            

           Fill Start 開始的位置: 0 ~1, 右邊中心點開始，逆時針走

           Fill Range: 填充總量(0, 1];

           FillRange為正，那麼就是逆時針，如果為負，那麼就是順時針;

個性化時間進度條案例;

遊戲中道具的時間進度顯示都可以;

例 : seat.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        //擷取元件執行個體 編輯器綁定
        sprite: {
            default: null,
            type: cc.Sprite,
        },

        action_time: 15,

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        //擷取元件執行個體 代碼擷取 
        var node = this.node.getChildByName("time_bar");
        this.spt = node.getComponent(cc.Sprite);

        this.now_time = 0;

    },

    start () {
    },

    update (dt) {

        this.now_time = this.now_time + dt;
        var percent = this.now_time / this.action_time; //百分比
        if(percent >= 1) {
            percent = 1;
            this.now_time = 0; //重新開始
        }

        this.spt.fillRange = percent;

    },

});
           

工程截圖:

例: 代碼換圖  change_sprite_frame.js

// Learn cc.Class:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     }, 
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        sprite_frame: {
            default: null,
            type: cc.SpriteFrame,
        },

    },
 
    // LIFE-CYCLE CALLBACKS:

    onLoad () {

        this.sp = this.getComponent(cc.Sprite);
        this.sp.spriteFrame = this.sprite_frame;
        console.log(this.sp.spriteFrame);

    },

    start () {

    },

    // update (dt) {},
});
           

工程截圖