Quick-Cocos2d-x 触摸机制详解

Cocos2d-x 原本的触摸机制存在一些限制，在使用中需要开发者做不少额外的处理。而且 Cocos2d-x 的触摸事件是按照目标的优先级来分派的，而不是按照目标的显示层级来分派。

针对这个问题，Quick-Cocos2d-x 提出了自己的一套触摸机制。本文详细介绍了这套新机制的实现原理和用法。

以下内容适用于 Quick-Cocos2d-x 2.2.1-rc 版本，新版触摸机制请参考新文档

显示层级

我们知道 Cocos2d-x 里，整个游戏的画面是由一系列的 CCScene,CCNode,CCSprite,CCLayer,CCMenu,CCMenuItem 等对象构成的。而所有这些对象都是从 CCNode 这个类继承而来。我们可以将 CCNode 称为显示节点。

一个游戏画面就是许多显示节点构成的一棵树，如下图：

在这棵树里，CCNode 所处的垂直位置就是它们的显示层级。越往上的 CCNode，其显示层级就越高。从画面表现上来说，下面的层是背景，上面的层是建筑，那么建筑就会挡住一部分背景。

触摸区域

在 Cocos2d-x 里，只有 CCLayer 对象才能接受触摸事件。而 CCLayer 总是响应整个屏幕范围内的触摸，这就要求开发者在拿到触摸事件后，再做进一步的处理。

例如有一个需求是在玩家触摸屏幕上的方块时，人物角色做一个动作。那么使用 CCLayer 接受到触摸事件后，开发者需要自行判断触摸位置是否在方块之内。当屏幕上有很多东西需要响应玩家交互时，程序结构就开始变得复杂了。

所以 Quick-Cocos2d-x 允许开发者将任何一个 CCNode 设置为接受触摸事件。并且触摸事件一开始只会出现在这个 CCNode 的触摸区域内。

这里的触摸区域，就是一个 CCNode 及其所有子 CCNode 显示内容占据的屏幕空间。要注意的是这个屏幕空间包含了图片的透明部分。下图中，节点 A 是一个 CCSprite 对象，它的触摸区域就是图片大小；而节点 B 是一个 CCNode 对象，其中包含了三个 CCSprite 对象，那么节点 B 的触摸区域就是三个 CCSprite 对象触摸区域的合集。

为了简化实现，触摸区域都是一个矩形，所以节点 B 的触摸区域实际上是一个“包含三个 CCSprite 对象触摸区域合集的矩形”，可以参考上图中的红色边框线。

实现原理

现在，我们知道了显示层级、触摸区域，那么要让任何 CCNode 都可以接受触摸事件就变得很简单了：

由一个管理者负责登记所有需要接受触摸事件的 CCNode
管理者响应全屏幕的触摸
触摸开始的时候，管理者对已经登记的 CCNode 按照显示层级进行排序，然后依次检查触摸位置是否在它们的触摸区域内。如果是，则将触摸事件传递给相应的 CCNode 对象。并且将这个 CCNode 对象记录到一个列表里。这个列表称为可触摸节点列表。
触摸事件持续发生时，管理者将触摸事件发送给列表中每一个 CCNode 对象。
触摸事件结束时，管理者发送事件给列表中的对象，然后清理列表，准备开始下一次触摸响应。

在目前的实现里，这个管理者的角色，我们交给了 CCScene。

上面的流程为了描述方便，做了不少简化，下面我们会用代码来完整展示 Quick-Cocos2d-x 的触摸事件处理。

用法说明

API 列表：

setTouchEnabled() 是否允许一个 CCNode 响应触摸事件
addTouchEventListener() 设置触摸事件的处理函数
removeTouchEventListener() 删除触摸事件的处理函数

让 CCNode 接受触摸

 
      -- 创建一个图片显示对象 
     
      local sprite = display.newSprite( 
      "Button.png" 
      ) 
     
      -- 启用触摸 
     
      sprite:setTouchEnabled( 
      true 
      ) 
     
      -- 设置处理函数 
     
      sprite:addTouchEventListener(function(event,x,y,prevX,prevY) 
     
      print(event,prevY) 
     
      return 
      true 
      -- 返回  
      true 
      表示这个 CCNode 在触摸开始后接受后续的事件 
     
      end)