1: 全局變量

如何定義和使用全局變
定義和使用方法與JS中是否相同败徊。

// 不提倡的定義全局變量的方法
// a.js 
 Globals // 這是一個(gè)沒有var的變量

// 官方提供的定義全局變量的方法, 掛到window上面即可
// Globals.js
window.Globals = {
    name : w,
    age : 18
}

創(chuàng)建這樣一個(gè)Globals.js腳本，就可以在任何地方運(yùn)用Globals .name 來訪問定義的name的值李皇。

2: 模塊訪問

如果不想設(shè)太多的全局變量（因?yàn)榭赡軙斐扇治廴荆┫胖敲纯梢酝ㄟ^模塊來進(jìn)行訪問

// es5的模塊化(導(dǎo)出關(guān)鍵字 module.exports, 導(dǎo)入關(guān)鍵字 require )
//在test腳本中定義如下【module.exports為關(guān)鍵字】
module.exports= {
      name:“wgq”,
      age:18
 };
 
//可以在其他腳本中通過require進(jìn)行訪問
var test= require("test");
test.age = 20;
console.log(test.name)//wgq
console.log(test.age)//20

這樣就可以方便的設(shè)置訪問自己想要的屬性

3: 插入插件

相信大家寫js代碼會有一個(gè)自己的插件庫(常用函數(shù)庫)习贫，
那么如何在creator中引用自己的插件呢乳愉？
光創(chuàng)建一個(gè)插件腳本是不夠的兄淫，
必須在腳本屬性檢查器中勾選導(dǎo)入為插件選項(xiàng)。
這樣蔓姚，不必有任何聲明捕虽，就可以在任何地方引用插件中的函數(shù)了。

1.png

4: 獲取Creator中的Dom

在web中赂乐，使用js可以獲取dom薯鳍，
在Creator中使用js可以獲取組件和節(jié)點(diǎn)咖气。

5:獲取節(jié)點(diǎn)

通過拖曳
i. 可以在一個(gè)節(jié)點(diǎn)的腳本中通過代碼聲明一個(gè)test屬性挨措，類型為cc.Node。
```
//wgq.js
properties: {
        test:{
            default:null,
            type:cc.Node
        }
},
```
ii. 這樣就會在腳本掛載的地方出來一個(gè)空的節(jié)點(diǎn)崩溪。

2.png

iii. 接著你就可以將層級管理器上的任意一個(gè)節(jié)點(diǎn)拖到這個(gè) test控件浅役，
然后通過代碼this.test就可以獲取到他，進(jìn)行一系列的操作伶唯。

2.通過代碼

可以通過全局查找 cc.find(“Canvas/Menu/Back”)當(dāng) cc.find 只傳入第一個(gè)參數(shù)時(shí)觉既，將從場景根節(jié)點(diǎn)開始逐級查找

可以通過子節(jié)點(diǎn)一層一層進(jìn)行查找

var son1 = this.node.getChildByName("son1");
var son2 = son1.getChildByName("son2");

這里，son1是該節(jié)點(diǎn)this.node下的子節(jié)點(diǎn)乳幸，而son2為son1下的子節(jié)點(diǎn)瞪讼，可以通過getChildByName函數(shù)進(jìn)行一層一層查找。
也可以不通過名字粹断，利用序列號進(jìn)行查找例如以下son1中有很多個(gè)son2

3.png

可以通過以下循環(huán)獲取到每一個(gè)son2：

var son2 = [];
for(var i=0;i<son1.childrenCount;i++){
    var son2[i] =  son1.chindren[i]
}

6:獲取組件

在Creator中符欠，一個(gè)節(jié)點(diǎn)可以掛載多個(gè)組件，如下：

4.png

Canvas節(jié)點(diǎn)中有Canvas組件瓶埋，有g(shù)ama和wgq兩個(gè)腳本組件希柿，有Label渲染組件等诊沪。
以son節(jié)點(diǎn)為例：

var son = this.node.getChildByName("son");
var label = son.getComponent(cc.Label);
//這樣便可獲取到son節(jié)點(diǎn)下的label組件，然后可以對組件進(jìn)行一些操作

7: 節(jié)點(diǎn)屬性

節(jié)點(diǎn)有一些屬性曾撤，開發(fā)中我們總是會利用js來動態(tài)改變節(jié)點(diǎn)的屬性

var son = this.node.getChildByName("son");
//以下代碼 son為獲取到的節(jié)點(diǎn)
son.active = true or false //控制節(jié)點(diǎn)son的顯示隱藏
son.parent = father or ... //更改son節(jié)點(diǎn)的父節(jié)點(diǎn)
son.children //返回son節(jié)點(diǎn)下的子節(jié)點(diǎn)數(shù)組
son.childrenCount //返回送節(jié)點(diǎn)下的子節(jié)點(diǎn)數(shù)量
son.x  or son.y = 10//設(shè)定son節(jié)點(diǎn)的x端姚，y軸坐標(biāo)
son.rotation  = 90(度數(shù))//設(shè)定son節(jié)點(diǎn)的旋轉(zhuǎn)角度
son.scaleX = 2 (默認(rèn)為1)//設(shè)定son節(jié)點(diǎn)的縮放
son.width or son.height //更改son節(jié)點(diǎn)的長寬
son.color //設(shè)置顏色（默認(rèn)為白）
son.opacity = 200(0~255,默認(rèn)為255)//設(shè)置透明度

8:為節(jié)點(diǎn)動態(tài)添加組件

有時(shí)候我們需要為節(jié)點(diǎn)動態(tài)添加一下組件

var myLabel = new cc.Node().addComponent(cc.Label); 
myLabel.string = "test";
myLable.node.parent = son;//設(shè)置節(jié)點(diǎn)
myLable.node.setPosition(300,200);//設(shè)置位置

9: 一些基礎(chǔ)操作

1 cc.Label相關(guān)：

(1)動態(tài)創(chuàng)建cc.Label ：

var node = new cc.Node('text'); 
node.addComonpnet(cc.Label);

*(2)設(shè)置文本內(nèi)容：

node.getComponent(cc.Label).string = 'test'; 
//設(shè)置大小：
node.getComponent(cc.Label).fontSize = 30 
//文本對齊：參考creator中

(3) 如何動態(tài)獲取文本的寬度：

  node.getComponent(cc.Label).string = 'test'; 
  var getWidth = node.width;

這樣即可獲得寬度挤悉；

注意事項(xiàng)：要讓node所在父節(jié)點(diǎn)active =true渐裸，即讓js腳本調(diào)用onload函數(shù)之后，才能正確獲取with;

(4) 文本長度超出creator中設(shè)定長度時(shí)不顯示：

node.getComponent(cc.Label).overFlow = cc.Label.Overflow.CLAMP

還有其它幾種模式暫時(shí)沒用到后續(xù)研究,這里說下含義,

NONE(無樣式)
CLAMP（截?cái)啵?/li>
SHRINK（自動縮小文字以適應(yīng)大屑夥取）
RESIZE_HEIGHT（自增長高度）

2.cc.Sprite相關(guān)

*（1）動態(tài)創(chuàng)建cc.Sprite ：

var node = new cc.Node('text'); 
node.addComonpnet(ccSprite);

*（2）設(shè)置圖片：

node.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(texture);

a) 精靈幀獲取的獲取方法1(動態(tài)讀取異步加載)：

new cc.SpriteFrame(texture);

優(yōu)點(diǎn)：動態(tài)加載橄仆，缺點(diǎn)：會有異步問題

那么texture如何獲取衅斩？

// 很丑的寫法, 不如用uikiller了
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(creator編輯器上面拖拽編輯好)：
界面綁定的腳本,即.js文件properties: 中定義 frame : cc.SpriteFrame盆顾，然后在creator中將圖片拉倒這個(gè)frame上。優(yōu)點(diǎn)：初始化加載畏梆，方便使用您宪。缺點(diǎn)：會有內(nèi)存大，加載速度慢

3.cc.Animation相關(guān)

（1）動畫播放和停止：

node.getComponent(cc.Animation).play;
// node.$Animation.play;
node.getComponent(cc.Animation).stop();

（2）注冊動畫播放完成事件：

node.getComponent(cc.Animation).on('finished', function(){
  cc.log('finish')
};

（3）備注：creator中默認(rèn)有個(gè)playOnLoad屬性需要注意：含義是在第一次active設(shè)為可見的時(shí)候會自動播放動畫奠涌，如果不需要可以不勾選宪巨。

4.ToggleGroup相關(guān)

定義：組合框（多項(xiàng)中只能選擇一項(xiàng)）

（1）怎么獲取toggle（其中的一項(xiàng)）：

this.togglegroup.toggleItems[0]；
// 這代碼訪問第一項(xiàng)溜畅。

（2）怎么獲取toogle是否選中：

this.togglegroup.toggleItems[0].check()捏卓；
// 調(diào)用check()方法

（3）備注：在onload獲取調(diào)用(onLoad其實(shí)好些ui組件都沒準(zhǔn)備好呢)

this.togglegroup.toggleItems.length
// 獲取的長度為0，

所以只能在start()函數(shù)中調(diào)用慈格，creator設(shè)定的

5.cc.Button相關(guān)

（1）設(shè)置按鈕灰態(tài)：

node.getComponent(cc.Button).interactable = true;

與creator中的EnableAuto中配合怠晴；
表現(xiàn)上是會灰色了，
但是按鈕還是可以點(diǎn)擊浴捆，
還得通過事件回調(diào)來處理蒜田，按下return；

（2）事件注冊：

btn.on('touchend' || 'mouseup', function(e) {
  var btn =  e.currentTarget; 
// 在回調(diào)內(nèi)部獲取按鈕自己
};

（3）修改按鈕的圖片：即修改cc.Sprite組件选泻，參考上面cc.Sprite相關(guān)

6. Layout相關(guān)

（1）這個(gè)布局控件在孩子設(shè)置為隱藏的時(shí)候冲粤，會自動調(diào)整孩子的位置，可以設(shè)置為左對齊页眯，居中對齊等等梯捕；但是現(xiàn)在有個(gè)bug：在孩子的類型不同時(shí)，自動調(diào)整孩子的位置時(shí)不對窝撵，需要用代碼控制孩子的位置傀顾，如果孩子多的話，最好還是不要用Layout布局忿族。

7.RichText相關(guān)

（1）用法

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

（2）換行增加字符串

‘<br/>’锣笨；

8.定時(shí)器相關(guān)

a 創(chuàng)建：

this.schedule(this.updatePlayerTime,1); 
// 參數(shù)1：callback 
// 參數(shù)2：間隔蝌矛；
// 備注：這個(gè)this一定要掛接在組件上的腳本
cc.director.getScheduler().scheduleCallbackForTarget(this,  function(){

},1,0);

b銷毀：

this.unschedule(this.updatePlayerTime); 
// 銷毀所有：
this.unscheduleAllCallbacks();

cc.director.getScheduler().unscheduleCallbackForTarget(this, this.timer);
// 銷毀所有：
cc.director.getScheduler().unscheduleAllForTarget(this);

c. 只執(zhí)行一次：

this.scheduleOnce()

9.操作事件相關(guān)（點(diǎn)擊彈起移動事件）

//（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){}) 
// 離開精靈的時(shí)候會觸發(fā)這個(gè)事件

10.cc.EditBox相關(guān)

暫時(shí)未用到

二错英、進(jìn)階內(nèi)容：

1.全局系統(tǒng)事件:

a)發(fā)送：

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)事件回調(diào)函數(shù)：

eventCallBack:function(e)    {       
  var data= e.detail;
};

2.節(jié)點(diǎn)動態(tài)創(chuàng)建銷毀：

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

3.根據(jù)現(xiàn)有的節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)：

var newNode = cc.instantiate(oldNode);

4.實(shí)例化預(yù)制：

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加載資源有沒有同名覆蓋的問題?? 開發(fā)中應(yīng)該避免出現(xiàn)同名文件
比如A目錄下a.png;
B目錄下也有a.png代碼中會顯示哪個(gè)png入撒，
如果用自動圖集肯定沒這問題, 圖集也不要重名

6.資源的釋放：

 cc.loader.releaseRes(resPath);

目前用在界面動態(tài)創(chuàng)建，
在關(guān)閉界面的時(shí)候用這個(gè)函數(shù)釋放當(dāng)前界面資源prefab;

看下cc.loader類中的釋放函數(shù)椭岩，目前項(xiàng)目中并沒有用到復(fù)雜的內(nèi)存釋放茅逮。

7.點(diǎn)A移動到點(diǎn)B，B有父節(jié)點(diǎn)判哥，坐標(biāo)如何轉(zhuǎn)換献雅？

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的文件名

Cocos Creator 常用技巧總結(jié)