一、为cc.Node类型节点注册触摸事件
演示常规方式为cc.Node类型注册触摸事件
ctor: function() {
...
this._label = new ...
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: this.onTouchBegan,
onTouchMoved: this.onTouchMoved,
onTouchEnded: this.onTouchEnded
}, this);
...
},
onTouchBegan: function(touch, event) {
//更新label文字
this._label.setString('onTouchBegan');
},
onTouchMoved: function(touch, event) {
//更新label文字
this._label.setString('onTouchMoved');
}
onTouchEnded: function(touch, event) {
//更新label文字
this._label.setString('onTouchEnded');
}
以上代码中使用cc.eventManager为当前cc.Node对象注册触摸事件，共需要7行代码。而事件处理函数中，想访问成员变量”_label”, 但使用this._label是却是常见的错误写法。要想正常访问当前成员变量，需要如下修改
onTouchBegan: function(touch, event) {
//需要从event参数中获取当前target对象，target才正是当前layer
var target = event.getCurrentTarget();
target._label.setString('onTouchBegan');
}
分析理解 ：
1.当前this对象为cc.eventManager.addListener的第一个参数。
2.event.getCurrentTarget()对像为cc.eventManager.addListener的第二个参数。
所以要访问当前layer上下文时不能简单的在事件处理函数中使用this.xxx。
一般做过c++的人都知道，类成员函数中使用this表示当前类实例对象，但在js中的this对象是会随函数调用的不同而不同。如何能像c++或cocos2d-x一样的思维方式来编写代码，在事件响应函数中使用this就能访问到当前类实例对象呢？
ctor: function() {
...
this._label = new ...
var self = this;
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
//注意这里
onTouchBegan: function(touch, event) {
return self.onTouchBegan(touch, event);
}
}, this);
...
},
onTouchBegan: function(touch, event) {
//更新label文字
this._label.setString('onTouchBegan');
},
以上代码请大家自己分析，touchMoved ouchEnded事件我没有给出代码请自己补全。
总结：
1.代码较多，当需要为较多cc.Node类型控件注册事件时，代码很难看。
2. 初学者经常会遇到控件事件的this上下文混乱问题，容易出错。
3. 与ccui.Widget类型组件的触摸事件接口不太一至，初学者上手困难。
我的解决思路与方案：
减少代码量，一行代码注册事件。 尽量统一ccui.Widget与cc.Node两种类型组件的触摸事件函数。 尽量保持原始API的功能接口，减少学习使用成本。
sz.uiloader.registerTouchEvent：
代码演示：为当前this对象注册触摸事件
ctor: function() {
...
//为当前this对象注册触摸事件
sz.uiloader.registerTouchEvent(this);
},
//当前对象事件响应函数
_onTouchBegan = function(sender, touch, event) {
...
return true;
}
代码演示：为某个cc.Node对象注册触摸事件
ctor: function() {
...
var this._button = ...
//需要为节点设置name
this._button.setName('_button');
//第一个参数为触摸节点，第二个参数为事件响应对象
sz.uiloader.registerTouchEvent(this._button, this);
},
//button节点响应函数，注意函数命名写法：前缀+name+事件名，驼峰命名
_onButtonTouchBegan = function(sender, touch, event) {
...
this._button.setPosition(...)
return true;
}
二、sz.UILoader增加对 cocostudio2.1的支持
cocos2d-js 3.3已经发布，同时支持了cocostudio2.1 UI编辑器。我简单试玩了下cocostudio2.1很像之前的cocosbuilder编辑器，从资源窗口、动画窗口 、属性窗口等。其中感觉最有用的就是UI界面可以相互嵌套。
UILoader对cocostudio2的支持其实是很容易的，但cocostudio2中UI编辑时可以相互嵌套，嵌套节点为cc.Node类型。这是与1.x版本不一样的。
1.x版本生成的UIl界面全部为ccui.Widget类型节点构成
2.x版本生成的UI界面大部分为ccui.Widget类型，在嵌套时会包裹一个cc.Node节点。
这就是为什么要在sz.UILoader中先实现cc.Node节点的事件响应的原因。
github代码已经更新，增加了cocostudio2的加载演示与事件处理。
目前没有经常严格测试，有兴趣的朋友可以看看，欢迎指正。
