back 平鋪 精靈 對話框 配置 comment ... filled 圓角

1: 了解cc.Sprite的使用;
2: 了解cc.Sprite的大小模式;
3: 學會使用九宮格,使用九宮格節省美術資源;
4: 學會個性化的時間精度條的使用;
5: 代碼裏面來更換圖片;

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: 設置填充的方式(圓，矩形)，可以使用比例來裁剪顯示圖片(只顯示的比例);

九宮格的使用

1: 指定拉伸區域, 讓圖片在拉伸的時候某些區域不會改變;
比如圓角,聊天氣泡等
2: 九宮格能省圖片資源, (對話框);
3: 編輯九宮格,來制定縮放區域;
4: 體會對話框背景的九宮拉伸;

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: 遊戲中道具的時間進度顯示都可以;

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 >= 1)  {
            percent = 1;
            this.now_time = 0; // 重新開始
        }

        this.sp.fillRange = percent;
        */

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

cocos creator基礎-(六)cc.Sprite使用