Cocos开发中的埂(一)

接触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);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.除了方法, 其他东西都要扔到properties里面了, 并且要给出属性的默认值或者属性的存取的方法 1) 首...
    视掘阅读 1,352评论 0 0
  • v3.0 亮点 @来自官网 使用 C++(C++11) 的特性取代了 Objective-C 的特性优化了 Lab...
    光明程辉阅读 1,063评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • https://nodejs.org/api/documentation.html 工具模块 Assert 测试 ...
    KeKeMars阅读 6,376评论 0 6
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1