一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

Button 

先看下文档和api

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

 后面看下使用案例

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

第1种 cc.Component.EventHandler

第2种 button.node.on('click', ...) 的方式

看下实例

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件这里拖拽一个button到game Scene中 可以查看Button的属性。

其实查看Button节点 可以发现button控件其实就是一个Node节点添加上了一个bg和label  其实都可以自己来更改

后面看代码

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件也就是给button添加了回调 看下效果

 

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

再来看下button的属性

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

也就是常用的 坐标 锚点 大小等 后面 Normal 等 与Cocos2d相同 代表正常 触摸等状态下的图片 可以自己修改

-------------------------------------------------------------------分割线----------------------------------------------------------------

button作为常用控件 这里其实可以自定义按钮的不同状态 

看下官方21点游戏里 有一个对button的封装 看下代码

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

其实代码部分内容很简单 就是对button做的一个动作的封装 来看下

properties 定义了两个属性 缩放比和时间

  onLoad里做了几步操作 

1:接受this,这里this做完绑定后 也就指向了button节点

2:缩放动画 分别是放大和缩小

3:触摸事件绑定

 代码部分完成后 在IDE中拖拽js到Button按钮 做绑定

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

看下效果

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

一周搞定Cocos creator(cocos creator 入门篇) 3 - Cocos Creator 控件

这里也就是自定义了button点击的效果 也可以加上音效  上面屏蔽代码部分也就是音效 后面再研究下 

button的其他属性在API中都有介绍 接口等也俱有说明