cocos creator 學習總結

一、基本內容:

1.cc.Label相關:

(1)動態創建cc.Label : var node = new cc.Node('text'); node.addComonpnet(cc.Label);

(2)  設置文本內容:node.getComponent(cc.Label).string = 'test'; 設置大小:node.getComponent(cc.Label).fontSize = 30 文本對齊:參考creator中

(3)  如何動態獲取文本的寬度: node.getComponent(cc.Label).string = 'test'; var getWidth = node.width;這樣即可獲得寬度;注意事項:要讓node所在父節點active =true,即讓js腳本調用onload函數之後,才能正確獲取with;

(4) 文本長度超出creator中設定長度時不顯示:node.getComponent(cc.Label).overFlow = cc.Label.Overflow.CLAMP 還有其它幾種模式暫時沒用到後續研究,這裏說下含義,NONE(無樣式)、CLAMP(截斷)、SHRINK(自動縮小文字以適應大小)、RESIZE_HEIGHT(自增長高度)

2.cc.Sprite相關

(1)動態創建cc.Label : var node = new cc.Node('text'); node.addComonpnet(ccSprite);

(2)設置圖片:node.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(texture);

a) 精靈幀獲取的獲取方法1:new cc.SpriteFrame(texture); 優點:動態加載,缺點:會有異步問題

那麼texture如何獲取?cc.loader.load({url: cc.mg.util.get_wxhead(userData.url), type: 'jpg'}, function (err, texture) {
                var head = new cc.SpriteFrame(texture);
               dialog.getChildByName('face').getChildByName('mask').getChildByName('tx').getComponent(cc.Sprite).spriteFrame = head;
            });

b) 精靈幀獲取的獲取方法2:界面綁定的腳本,即.js文件properties: 中定義 frame : cc.SpriteFrame,然後在creator中將圖片拉倒這個frame上。優點:初始化加載,方便使用。缺點:會有內存大,加載速度慢

3.cc.Animation相關

(1)動畫播放和停止:node.getComponent(cc.Animation).play;node.getComponent(cc.Animation).stop();

(2)註冊動畫播放完成事件:node.getComponent(cc.Animation).on('finished', function(){cc.log('finish')};

(3)備註:creator中默認有個playOnLoad屬性需要注意:含義是在第一次active設爲可見的時候會自動播放動畫,如果不需要可以不勾選。

4.ToggleGroup相關

定義:組合框(多項中只能選擇一項)

(1)怎麼獲取toggle(其中的一項):this.togglegroup.toggleItems[0];這代碼訪問第一項。

(2)怎麼獲取toogle是否選中:this.togglegroup.toggleItems[0].check();調用check()方法

(3)備註:在onload獲取調用this.togglegroup.toggleItems.length獲取的長度爲0,所以只能在start()函數中調用,creator設定的
5.cc.Button相關

(1)設置按鈕灰態:node.getComponent(cc.Button).interactable = true;與creator中的EnableAuto中配合;表現上是會灰色了,但是按鈕還是可以點擊,還得通過事件回調來處理,按下return;

(2)事件註冊:btn.on('touchend' || 'mouseup', function(e) {var btn =  e.currentTarget; };在回調內部獲取按鈕自己

(3)修改按鈕的圖片:即修改cc.Sprite組件,參考上面cc.Sprite相關

6. Layout相關

(1)這個佈局控件在孩子設置爲隱藏的時候,會自動調整孩子的位置,可以設置爲左對齊,居中對齊等等;但是現在有個bug:在孩子的類型不同時,自動調整孩子的位置時不對,需要用代碼控制孩子的位置,如果孩子多的話,最好還是不要用Layout佈局。

7.RichText相關

(1)用法node.getComponent(cc.RichText).string = '<color=#FF0000>' +  '我是富文本' + '</c>';

(2)換行增加字符串‘<br/>’;

8.定時器相關

(1)創建:

a) this.schedule(this.updatePlayerTime,1); 參數1:callback 參數2:間隔;備註:這個this一定要掛接在組件上的腳本

b) cc.director.getScheduler().scheduleCallbackForTarget(this,function(){},1,0);

(2)銷燬:

a) this.unschedule(this.updatePlayerTime); 銷燬所有:this.unscheduleAllCallbacks();

b)  cc.director.getScheduler().unscheduleCallbackForTarget(this, this.timer);銷燬所有:cc.director.getScheduler().unscheduleAllForTarget(this);

(3)只執行一次:this.scheduleOnce()

9.操作事件相關(點擊彈起移動事件)

(1)彈起事件:node.on('touchend' || 'mouseup', function(e) {})

(2)按下事件、長按事件:node.on('touchstart',function(e){})

(3)移動事件:node.on('touchmove',function(e){})

(4)取消事件:node.on('touchcancel',function(e){}) 離開精靈的時候會觸發這個事件

10.cc.EditBox相關

暫時未用到

二、進階內容:

1.全局系統事件:

a)發送:var data= {};cc.systemEvent.emit('eventName', data);沒有data:cc.systemEvent.emit('eventName');

b)註冊事件:cc.systemEvent.on('eventName', this.eventCallBack, this);

c)取消事件註冊:cc.systemEvent.off('eventName', this.eventCallBack, this);

d)事件回調函數:eventCallBack:function(e)    {       var data= e.detail;};

2.節點動態創建銷燬:

a)var node = new cc.Node("name"); 

b) node.destroy();

3.根據現有的節點創建節點:

var newNode = cc.instantiate(oldNode);

4.實例化預製:

        cc.loader.loadRes('prefab/resName', cc.Prefab, function(err, prefab){
                var newNode = cc.instantiate(prefab);
            });

5.資源的加載:

cc.loader.load();

cc.loader.loadRes();

cc.loader.loadResArray();

cc.loader.loadResDir();

cc.loader.loadResDir加載資源有沒有同名覆蓋的問題;比如A目錄下a.png;B目錄下也有a.png代碼中會顯示哪個png,如果用自動圖集肯定沒這問題

6.資源的釋放:

 cc.loader.releaseRes(resPath);目前用在界面動態創建,在關閉界面的時候用這個函數釋放當前界面資源prefab;

看下cc.loader類中的釋放函數,目前項目中並沒有用到複雜的內存釋放。

7.點A移動到點B,B有父節點,座標如何轉換?

var pos4 = this.pointB.convertToWorldSpaceAR(cc.p(0,0));
var pos5 = this.pointA.parent.convertToNodeSpaceAR(pos4);
var moveTo = cc.moveTo(0.5, pos5);

8.場景切換:

cc.director.loadScene(scene_name, callback); //scene_name爲creator中.fire的文件名


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章