接触Cocos-JS开发10多天以来,渐渐熟悉了Cocos的一些东西,当然也遇到了一些埂,官方的文档还是挺详细的,但是作为完全的门外汉通过阅读文档来解决问题,可以解决50%,另外的需要通过Cocos官方社区以及StackOverFlow之内的技术论坛解决。
1、先得理解Cocos中的各种节点(Node),组件(Component)的意义。我的理解,Cocos中的任一UI块都是一个Node,比如展示图片的精灵(Sprite),展示文字的标签(Label),但是Sprite和Label他们都是附着在Node上的Component,所以当你想操作图片和文本的时候,拿到Sprite和Label对象需要调用node.getComponent(cc.Sprite)或者node.getComponent(cc.Label)来进行。
当然,JS在Cocos中也是作为Component附着在Node中的,在代码中取出某个Node上的JS使用node.getComponent('JS名称')。
2、Sprite精灵设置图片。使用node.getComponent(cc.Sprite).spriteFrame = newSpriteFrame;实现,之前查文档使用node.getComponent(cc.Sprite).setTexture(cc.url.raw('resources/xxx.png')))不顶用。
newSpriteFrame在代码中构造麻烦,可以在ccClass中设置属性Properties,然后在属性检查器中直接将图片拖拽到属性中生成SpriteFrame,然后在代码中直接使用属性即可。
3、Node节点设置事件监听和取消事件监听。一般使用node.on(cc.Node.EventType.TOUCH_START,function(event){}.bind(this));或者node.on(cc.Node.EventType.TOUCH_END,function(event){}.bind(this));之类的形式注册点击事件。问题来了,我们在事件中使用了event参数,那么在取消事件中我们必须和注册事件一样的参数,不能将上述代码再这样写一遍吧:node.off(cc.Node.EventType.TOUCH_START,function(event){}.bind(this));而且这种情况下,function函数指针也不一样,也不会生效。文档中告诉我们,可以在类中定义属性function,比如this.callback。但这样的话,event就不work了。后来查到文档node.on()方法返回的就是这个function的指针,这样就方便多了。于是注册和取消事件变得异常简单。
var callback = node.on(cc.Node.EventType.TOUCH_START,function(event){}.bind(this));
node.off(cc.Node.EventType.TOUCH_START,callback);至于callback如何存取使用视具体情况。
4、Node的属性参数attr。在Android开发中,每个View都有一个属性叫Tag,类型是Object,基本上可以存储任意类型的数据。那么需求就来了,在Cocos开发中,有些数据需要和对应的Node进行绑定,可以使用node的attr()方法将数据绑定进去。比如,在上一个事件绑定的埂中,可以将callback绑定到node上,这样可以在任意位置取出并取消绑定。
var callback = node.on(cc.Node.EventType.TOUCH_START,function(event){}.bind(this));
node.attr('callback',callback);
node.off(cc.Node.EventType.TOUCH_START,node['callback']);
attr是以key-value进行存取的,有很大的扩展性,使用时特别方便。
5、使用纯色Sprite。在实际开发中,Sprite精灵基本上是使用图片渲染,但对于一些纯色的Sprite,我们可以使用Color来代替图片,好处就不言而喻了。具体使用如下:
Sprite.setColor(cc.color(255,255,255));
设置透明度:Sprite.setOpacity(128);