管理 效果 开发 属性列表 function 点击事件 名称 src 编程
Cocos Creator 开发中的按钮节点的事件处理方法
Cocos Creator 基于 Cocos2d-x(C++ 方案),提出全新的编程理念.Cocos Creator 是以内容创作为核心的游戏开发工具,在 Cocos2d-x 基础上实现了彻底脚本化(可以使用 Javascript,Typescript 或者 Coffeescript),组件化和数据驱动等特点.
但是,在事件处理机制上并不显得简单,至少是新手初学阶段如此.下面我们通过场景制作中按钮组件的事件处理机制来说明这个问题.
试验目的
通过为按钮组件设置一个点击事件来实现在控制台输出一段文本.
试验步骤
在场景中 Canvas 节点上添加一个 UI 节点 Button 并选择此节点,注意到其事件有关属性如图所示:
也就是说,Click Events 属性是列表类型,默认为空,用户添加的每一个事件由节点引用,组件名称,一个响应函数及定制事件参数组件组成.
只有当我们把 Click Events 事件属性列表结点个数修改成大于或者等于 1 时,对应的事件参数才显示出来,各个参数含义如下:
图形效果展示如下:
上图是把 Click Events 事件属性列表结点个数改成 1 的样子.
接下来,上面几个参数的填写需要按照上面的解释进行.
为此,我们需要专门写一个相应的脚本,不妨命名为 MyComponent.js(注意这里的文件名是区别大小写的,因为它还代表组件的类名),内容如下.
保存上面的脚本后,通过点击场景中按钮节点对应 "属性检查器" 窗口中下部的 "添加组件" 按钮为此按钮节点添加一个 "用户脚本组件" 并选择上面刚刚创建的脚本.
cc.Class({
extends: cc.Component,
properties: {},
onLoad: function() {
var clickEventHandler = new cc.Component.EventHandler();
clickEventHandler.target = this.node; //这个node节点是你的事件处理代码组件所属的节点
clickEventHandler.component = "MyComponent"; //这个是代码文件名
clickEventHandler.handler = "callback";
clickEventHandler.customEventData = "foobar";
var button = this.node.getComponent(cc.Button);
button.clickEvents.push(clickEventHandler);
},
callback: function(event, customEventData) {
//这里 event 是一个 Touch Event 对象,你可以通过 event.target 取到事件的发送节点
var node = event.target;
var button = node.getComponent(cc.Button);
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log("para is: ", customEventData);
}
});
然后,拖动层级管理器中的按钮节点到按钮事件属性对应的第一个参数处,并以此为基础,依次选择第二个已经绑定到该按钮节点上的脚本组件以及第三个回调参数(上面脚本中已经定义了,是 callback).结果如下所示:
至此, 我们达到了本文开始时提出的目的,即点击按钮使在控制台上输出一段文本的效果.
小结
尽管 Cocos Creator 对底层的 Cocos2d-x 事件机制根据其自身的组件编程及事件驱动思想作了进一步封装,但是仅就其实现过程来看,仍然是比较麻烦的——其脚本代码并不短小.
Cocos Creator 开发中的按钮节点的事件处理方法
来源: http://www.bubuko.com/infodetail-2456837.html