1: 全局变量

如何定义和使用全局变
定义和使用方法与JS中是否相同。

// 不提倡的定义全局变量的方法
// a.js 
 Globals // 这是一个没有var的变量

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

创建这样一个Globals.js脚本，就可以在任何地方运用Globals .name 来访问定义的name的值。

2: 模块访问

如果不想设太多的全局变量（因为可能会造成全局污染），那么可以通过模块来进行访问

// es5的模块化(导出关键字 module.exports, 导入关键字 require )
//在test脚本中定义如下【module.exports为关键字】
module.exports= {
      name:“wgq”,
      age:18
 };
 
//可以在其他脚本中通过require进行访问
var test= require("test");
test.age = 20;
console.log(test.name)//wgq
console.log(test.age)//20

这样就可以方便的设置访问自己想要的属性

3: 插入插件

相信大家写js代码会有一个自己的插件库(常用函数库)，
那么如何在creator中引用自己的插件呢？
光创建一个插件脚本是不够的，
必须在脚本属性检查器中勾选导入为插件选项。
这样，不必有任何声明，就可以在任何地方引用插件中的函数了。

1.png

4: 获取Creator中的Dom

在web中，使用js可以获取dom，
在Creator中使用js可以获取组件和节点。

5:获取节点

通过拖曳
i. 可以在一个节点的脚本中通过代码声明一个test属性，类型为cc.Node。
```
//wgq.js
properties: {
        test:{
            default:null,
            type:cc.Node
        }
},
```
ii. 这样就会在脚本挂载的地方出来一个空的节点。

2.png

iii. 接着你就可以将层级管理器上的任意一个节点拖到这个 test控件，
然后通过代码this.test就可以获取到他，进行一系列的操作。

2.通过代码

可以通过全局查找 cc.find(“Canvas/Menu/Back”)当 cc.find 只传入第一个参数时，将从场景根节点开始逐级查找

可以通过子节点一层一层进行查找

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

这里，son1是该节点this.node下的子节点，而son2为son1下的子节点，可以通过getChildByName函数进行一层一层查找。
也可以不通过名字，利用序列号进行查找例如以下son1中有很多个son2

3.png

可以通过以下循环获取到每一个son2：

var son2 = [];
for(var i=0;i

 
 6:获取组件 
  
  在Creator中，一个节点可以挂载多个组件，如下： 
    
  
  
   
     
    
   
  
    4.png 
   
  
  
  Canvas节点中有Canvas组件，有gama和wgq两个脚本组件，有Label渲染组件等。
 以son节点为例： 
  
 var son = this.node.getChildByName("son");
var label = son.getComponent(cc.Label);
//这样便可获取到son节点下的label组件，然后可以对组件进行一些操作
 
 7: 节点属性 
  
  节点有一些属性，开发中我们总是会利用js来动态改变节点的属性 
  
 var son = this.node.getChildByName("son");
//以下代码 son为获取到的节点
son.active = true or false //控制节点son的显示隐藏
son.parent = father or ... //更改son节点的父节点
son.children //返回son节点下的子节点数组
son.childrenCount //返回送节点下的子节点数量
son.x  or son.y = 10//设定son节点的x，y轴坐标
son.rotation  = 90(度数)//设定son节点的旋转角度
son.scaleX = 2 (默认为1)//设定son节点的缩放
son.width or son.height //更改son节点的长宽
son.color //设置颜色（默认为白）
son.opacity = 200(0~255,默认为255)//设置透明度
 
 8:为节点动态添加组件 
  
  有时候我们需要为节点动态添加一下组件 
  
 var myLabel = new cc.Node().addComponent(cc.Label); 
myLabel.string = "test";
myLable.node.parent = son;//设置节点
myLable.node.setPosition(300,200);//设置位置
 
 9: 一些基础操作 
 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.Sprite ： 
 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如何获取？ 
 // 很丑的写法, 不如用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中将图片拉倒这个frame上。优点：初始化加载，方便使用。缺点：会有内存大，加载速度慢 
  
 3.cc.Animation相关 
  
  （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中默认有个playOnLoad属性需要注意：含义是在第一次active设为可见的时候会自动播放动画，如果不需要可以不勾选。 
  
 4.ToggleGroup相关 
 定义：组合框（多项中只能选择一项） 
  
  （1）怎么获取toggle（其中的一项）： 
  
 this.togglegroup.toggleItems[0]；
// 这代码访问第一项。
 
  
  （2）怎么获取toogle是否选中： 
  
 this.togglegroup.toggleItems[0].check()；
// 调用check()方法
 
 （3）备注：在onload获取调用(onLoad其实好些ui组件都没准备好呢) 
 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 = '' +  '我是富文本' + '';
 
  
  （2）换行增加字符串 
  
 ‘
’；
 
 8.定时器相关 
  
  a 创建： 
  
 this.schedule(this.updatePlayerTime,1); 
// 参数1：callback 
// 参数2：间隔；
// 备注：这个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. 只执行一次： 
  
 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.节点动态创建销毁： 
 var node = new cc.Node("name"); 
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的文件名

Cocos Creator 常用技巧总结

1: 全局变量

2: 模块访问

3: 插入插件

4: 获取Creator中的Dom

5:获取节点

6:获取组件

7: 节点属性

8:为节点动态添加组件

9: 一些基础操作

1 cc.Label相关：

2.cc.Sprite相关

3.cc.Animation相关

4.ToggleGroup相关

5.cc.Button相关

6. Layout相关

7.RichText相关

8.定时器相关

9.操作事件相关（点击弹起移动事件）

10.cc.EditBox相关

二、进阶内容：

1.全局系统事件:

2.节点动态创建销毁：

3.根据现有的节点创建节点：

4.实例化预制：

5.资源的加载：

6.资源的释放：

7.点A移动到点B，B有父节点，坐标如何转换？

8.场景切换：

你可能感兴趣的:(Cocos Creator 常用技巧总结)