Cocos Creator 常用技巧总结

作者: 西瓜家的冬瓜 | 来源:发表于2019-12-12 11:35 被阅读0次

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<son1.childrenCount;i++){
    var son2[i] =  son1.chindren[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 = '<color=#FF0000>' +  '我是富文本' + '</c>';

（2）换行增加字符串

‘<br/>’；

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 常用技巧总结

本文链接：https://www.haomeiwen.com/subject/ergzgctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！