微信小遊戲-CocosCreator 基礎（七）

Sprite總結：

Sprite Frame :顯示圖檔

Size Mode ：Custom和Node定義的Size自适應， RAW原始大小

trim ：圖檔中有全透明的邊緣部分會被裁剪

TRIMMED ：被裁掉的圖檔重新自适應原始圖檔的大小

幀動畫 ：要求是RAW +不勾選trim   ，保持原始大小，不抖動

聊天氣泡：slice+Custom+不勾選trim  自定義圖檔大小拉伸不影響

Filled ：中心點 ：（0，0）左下角，（1，1）右上角

Fill Start （0，1）

Fill Range （0，1） 正負代表順時針和逆時針

擷取元件執行個體：1代碼。2編輯器

更換圖檔：1.資源動态加載  2.編輯器綁定

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: 快捷建立帶精靈元件的節點;

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

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

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

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

 Filled：

1:  配置Filled模式

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

3: 配置Radius的參數模式, 

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

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

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

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

4: 個性化時間進度條案例;

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

=============================

進度條js：

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        sprite: {

            default: null,

            type: cc.Sprite,

        },

        action_time: 15,

    },

    // use this for initialization

    onLoad: function () {

        // 擷取元件的執行個體，代碼擷取，編輯器綁定

        var node = this.node.getChildByName("time_bar");

        this.sp = node.getComponent(cc.Sprite);

        // end 

        // this.now_time = 0;

        this.now_time = this.action_time;

    },

    // called every frame, uncomment this function to activate update callback

    update: function (dt) {

        this.now_time -= dt;

        var percent = this.now_time / this.action_time; // -->百分比

        if (percent <= 0)  {

            this.now_time = this.action_time; // 重新開始

        }

        this.sp.fillRange = percent;

    },

});

================================================

更改精靈js：

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        // 編輯器, 代碼, 資源的動态加載spriteFrame對象, 

        sprite_frame: {

            default: null,

            type: cc.SpriteFrame,

        },

        // 編輯器綁定你要的元件;

        sprite: {

            default: null,

            type: cc.Sprite,

        },

    },

    // use this for initialization

    onLoad: function () {

        this.sp = this.getComponent(cc.Sprite); 

        this.sp.spriteFrame = this.sprite_frame;

    },