Cocos Creator多子节点触控选择实例与原理解析

本文档主要介绍了如何在Cocos Creator中处理触控事件，特别是当需要选择多个子节点时的应用实例。作者在开发小游戏的过程中遇到了触控事件的问题，经过深入研究和实践，总结出以下关键知识点： 1. **触控事件基础**：触控事件是针对游戏引擎中的节点发生的，这意味着每个节点都有自己的触控处理能力。在Cocos Creator中，触控事件的传播遵循冒泡机制，但并不是所有层级都参与，只有同一层级的子节点之间的冒泡是有效的，即父子节点可以相互响应，但隔代（祖孙）则不会。 2. **事件传播问题**：当父节点不响应触控事件时，通常是因为有子节点遮挡了父节点。解决方案是让遮挡的子节点也监听触控事件，这样父节点就能接收到事件。 3. **坐标系统**：触控位置是相对于整个游戏视口（Canvas）的绝对坐标，而节点的位置则是相对于其父节点的相对坐标。开发者需要灵活转换这两个坐标系以便于处理触控操作。 4. **事件顺序**：`touchstart`事件表示触控开始，但并不能立即确定哪个节点被点击，因为一个节点被触控后，需要等到其`touchend`事件结束，其他节点才能有机会响应。因此，判断是否框选中需要等待所有可能的响应结束后进行。 5. **框选判断**：作者提到采用简单的方法来判断是否框选中，即检查触控起点和终点构成的矩形与节点矩形是否有重叠。这通常涉及到计算和比较两个矩形的边界坐标。 6. **数值比较**：在实现框选或其他需要判断数值范围的功能时，关键在于找出给定数值与范围边界的最小值和最大值，然后进行比较。 **核心代码示例**： 文章的核心代码展示了如何在Cocos Creator中创建一个类继承自`cc.Component`，其中包含两个属性：`poker`用于存储子节点，`cardMask`用于定义一个遮罩层。在这个场景下，可能会有以下代码片段： ```javascript cc.Class({ extends: cc.Component, properties: { poker: { type: cc.Node }, cardMask: { type: cc.Sprite }, // 其他可能的触控处理方法和变量 touchStartPoint: { type: cc.Vec2, default: null }, touchEndPoint: { type: cc.Vec2, default: null }, }, onTouchStart: function (event) { this.touchStartPoint = event.globalPosition; // 开始框选过程 }, onTouchMove: function (event) { this.touchEndPoint = event.globalPosition; // 更新框选状态 }, onTouchEnd: function (event) { let rectStart = this.poker.convertToNodeSpace(this.touchStartPoint); let rectEnd = this.poker.convertToNodeSpace(this.touchEndPoint); // 检查框选 // ... // 更新UI或执行其他操作 }, // 更多触控处理函数... }) ``` 这篇文章为Cocos Creator新手提供了如何处理触控事件，尤其是在涉及选择多个子节点的场景中的具体指导，包括事件的传播规则、坐标转换以及如何通过比较坐标判断节点被框选的方法。