Quick 触摸机制+config详解

显示层级

我们知道 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 都可以接受触摸事件就变得很简单了：

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

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

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

用法说明

API 列表：

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

让 CCNode 接受触摸

1 2 3 4 5 6 7 8 9

-- 创建一个图片显示对象 local sprite = display.newSprite( "Button.png" ) -- 启用触摸 sprite:setTouchEnabled( true ) -- 设置处理函数 sprite:addTouchEventListener(function(event, x, y, prevX, prevY)      print(event, x, y, prevX, prevY)      return true -- 返回 true 表示这个 CCNode 在触摸开始后接受后续的事件 end) ----------------------------------------------------------------------------------------- http://cn.cocos2d-x.org/article/index?type=cocostudio&url=/doc/cocos-docs-master//manual/studio/v3/chapter4/directory/../coding/zh.md 4.1 编辑游戏代码 接下来就可以编写游戏逻辑了。在此之前，先来了解一下新工程自带的示例代码的逻辑。 一.Lua工程 工程目录下有一个名字为config.json的配置文件，可以在Code IDE中双击打开。配置中"entry"字段设置了游戏的入口文件为"src/main.lua"。  1 2 3 4 5 6 7 8 {      "init_cfg" : {      ...      "entry" : "src/main.lua" ,      ...      },      ... } 双击打开"src"目录下的"main.lua"文件，里面主要定义了"main"函数，然后在文件最后开始执行"main"函数，开始游戏执行。 "main.lua" 里的主要内容是载入配置文件和框架初始化文件，然后定义了一个名为 main 的入口函数。 为了捕获游戏运行中的错误，并输出错误信息，我们用 xpcall() 来封装了对 main 函数的调用。main函数则负责载入 app.MyApp 类，并构造实例开始运行整个游戏。 游戏启动后，会载入 app/views/MainScene.lua 文件。这个文件创建了我们的游戏场景，并开始运行游戏逻辑。 可以在模拟器的菜单中选择不同的分辨率，查看游戏在不同分辨率的屏幕上的表现效果。模拟器的窗口初始大小是在config.json中配置的,其属性为width和height。  1 2 3 4 5 6 7 8 9 {      "init_cfg" : {      ...      "width" : 960,       "height" : 640,      ...      },      ... } Code IDE为代码编写提供了方便的cocos2d-x引擎API自动提示功能，只要在代码中输入相应的前缀或单词就可以看到相关的API和函数说明，不过如果代码中有语法错误的话，可能会因为语法树构建失败而无法正确提示。 此外，编写游戏需要添加一些图片等做为显示图像的资源，只要把需要的图片拖动到工程管理界面的某个目录下就会复制一份图片到此目录下。而且Code IDE提供了资源路径自动提示功能，方便在代码中输入资源路径。 二.JS工程 同lua工程一样，工程目录下有一个名字为config.json的配置文件，可以在Code IDE中双击打开。配置中"entry"字段设置了游戏的入口文件为"src/main.js"。  1 2 3 4 5 6 7 8 {      "init_cfg" : {      ...      "entry" : "src/main.js" ,      ...      },      ... } 双击打开"src"目录下的"main.js"文件，可以看到代码逻辑如下 1 2 3 4 5 6 7 8 9 10 cc.game.onStart = function(){      cc.view.adjustViewPort( true );      cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);      cc.view.resizeWithBrowserSize( true );      //load resources      cc.LoaderScene.preload(g_resources, function () {          cc.director.runScene( new HelloWorldScene());      }, this ); }; cc.game.run(); 通过调用cc.game.run()函数启动游戏,启动前调用cc.game.onStart函数进行初始化操作， cc.view.setDesignResolutionSize：为视图设置大小，并全局显示, cc.LoaderScene.preload：在场景前预加载存取在g_resources变量中的资源，并加载了一个简单的场景 打开"src"目录下的"app.js"文件,可以看见我们自己实现的场景类HelloWorldScene 1 2 3 4 5 6 7 var HelloWorldScene = cc.Scene.extend({      onEnter:function () {          this ._super();          var layer = new HelloWorldLayer();          this .addChild(layer);      } }); 我们向改场景中添加了一个自己的图层HelloWorldLayer 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var HelloWorldLayer = cc.Layer.extend({ sprite:null, ctor:function () {      // 1. super init first      this ._super();        /      // 2. add a menu item with "X" image, which is clicked to quit the program      //    you may modify it.      // ask the window size      var size = cc.winSize;        var mainscene = ccs.load(res.MainScene_json);      this .addChild(mainscene.node);        return true ;         } }); 然后在这个图层中通过ccs解析布局文件res.MainScene_json，将解析的对象添加在图层中，其实就是res目录下的一张简单的图片（HelloWorld.png) 需要注意的一点是，需要加载的JS代码文件，需要在工程根目录下的project.json的jsList节点下添加相对路径。 **"jsList" : [ 1 2 3 "src/resource.js" , "src/app.js" ]** 同样的可以和lua一样，在模拟器的菜单中选择不同的分辨率，查看游戏在不同分辨率的屏幕上的表现效果。模拟器的窗口初始大小是在config.json中配置的,其属性为width和height。 Code IDE为同样也为js代码编写提供了方便的jsb/cocos-html5引擎API自动提示功能及资源提示  关于如何使用引擎API的更多资料可以在引擎的相关文档中找到，在此不再多述。 在编写完一段逻辑后，需要《调试游戏代码》，验证一下代码的效果正确与否。