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: 快捷創建帶精靈組件的節點;
?
cocos creator游戲。圖片模式
1: simple: 精靈最普通的模式, 選擇該模式后,圖片將縮放到指定的大小;
2: Tiled: 平鋪模式, 圖片以平鋪的模式，鋪地板磚的模式，鋪到目標大小上;
3: Slice: 九宮格模式，指定拉伸區域;
4: Filled: 設置填充的方式(圓，矩形)，可以使用比例來裁剪顯示圖片(只顯示的比例);
?
九宮格的使用
1: 指定拉伸區域, 讓圖片在拉伸的時候某些區域不會改變;
比如圓角,聊天氣泡等
2: 九宮格能省圖片資源, (對話框);
3: 編輯九宮格,來制定縮放區域;
4: 體會對話框背景的九宮拉伸;
?
cocos creator用什么語言，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 initializationonLoad: 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 callbackupdate: 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;}, });
?
