在cocos2d-js实现自动绑定cocostudioUI控件与事件(三)

一、为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\touchEnded事件我没有给出代码请自己补全。

总结：

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的加载演示与事件处理。

目前没有经常严格测试，有兴趣的朋友可以看看，欢迎指正。