cocos creator 数组_Cocos Creator 常用技巧总结

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

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 = '' + '我是富文本' + '';

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