文档章节

QUICK COCOS2D-X 触摸事件

piggybear
 piggybear
发布于 2015/02/16 10:28
字数 2243
阅读 82
收藏 0

Quick 中的触摸事件

Cocos2d-x 原本的触摸机制存在一些限制,在使用中需要开发者做不少额外的处理。所以 Quick-Cocos2d-x 提出了自己的一套触摸机制。本文详细介绍了这套新机制的用法。

显示层级

在 Cocos2d-x 里,整个游戏的画面是由一系列的 Scene, Node, Sprite, Layer 等对象构成的。而所有这些对象都是从 Node 这个类继承而来。我们可以将 Node 称为显示节点

一个游戏画面就是许多显示节点构成的一棵树:

1
2
3
4
5
6
7
8
9
10
11
12
/|\
  | 显示层级
  |
  |         [Node]  [Node]  [Node]
  |           |       |       |
  |           +---+---+       |
  |               |           |
  |             [Node]      [Node]
  |               |           |
  |               +-----+-----+
  |                     |
  |                   [Node]

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

触摸区域

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

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

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

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

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

用法示例

下面列出触摸事件的用法示例,更详细的示例请参考 samples/touch 示例。

单点触摸事件

local layer = display.newLayer()
    self:addChild(layer)
    --1、开启触摸事件
    layer:setTouchEnabled(true)
    --2、设置触摸模式 (默认是单点触摸)
    --layer:setTouchMode(cc.TOUCH_MODE_ONE_BY_ONE)
    --3、注册触摸事件
    layer:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event)
    
    -- event.name 是触摸事件的状态:began, moved, ended, cancelled
    -- event.x, event.y 是触摸点当前位置
    -- event.prevX, event.prevY 是触摸点之前的位置

        local x,y,prevX,prevY = event.x, event.y, event.prevX, event.prevY
    	if event.name == "began" then
    		print("touch Began")
        return true
        elseif event.name == "moved" then
            print("touchMoved")
        elseif event.name == "ended" then
            print("touchEnded")
        elseif event.name == "cancelled" then
            print("touchCancelled")
    end
    	end)


 触摸事件的 event.name 指示了事件的状态:

  • began: 手指开始触摸屏幕。在 began 状态时,如果要继续接收该触摸事件的状态变化,事件处理函数必须返回 true
  • moved: 手指在屏幕上移动。
  • ended: 手指离开屏幕。
  • cancelled: 因为其他原因取消触摸操作。

多点触摸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
-- 允许 node 接受触摸事件
node:setTouchEnabled( true )
 
-- 设置触摸模式
node:setTouchMode(cc.TOUCH_MODE_ALL_AT_ONCE) -- 多点
-- node:setTouchMode(cc.TOUCH_MODE_ONE_BY_ONE) -- 单点(默认模式)
 
-- 注册触摸事件
node:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event)
     -- event.name 是触摸事件的状态:began, moved, ended, cancelled
     -- 多点触摸增加了 added 和 removed 状态
     -- event.points 包含所有触摸点
     -- 按照 events.point[id] = {x = ?, y = ?} 的结构组织
     for id, point in pairs(event.points) do
         printf ( "event [%s] %s = %0.2f, %0.2f" ,
                event.name, id, point.x, point.y)
     end
 
     if event.name == "began" then
         return true
     end
end)

在多点触摸时,事件状态的含义有所区别:

  • began: 手指开始触摸屏幕。用户可能同时用多个手指接触屏幕,但因为硬件响应速度极快的原因,began状态时,event.points 中可能仍然只有一个触摸点的数据,其他触摸点数据会通过 added 状态提供。
  • added: 开始触摸后,如果有更多触摸点出现,则出现 added 状态。此时 event.points 中包含新加入的触摸点数据。
  • removed: 如果触摸结束前有触摸点消失(接触屏幕的部分手指离开了屏幕),则出现 removed 状态。此时 event.points 中包含删除的触摸点数据。
  • ended: 如果所有触摸点都消失(所有手指都离开了屏幕),则出现 ended 状态。此时 event.points中包含删除的触摸点数据。
  • moved: 由于多点触摸时,可能只有部分触摸点移动。所以此时 event.points 中只包含有变化的触摸点数据。

触摸事件吞噬

在新版触摸机制中,还需要主要的一个就是触摸吞噬:

1
setTouchSwallowEnabled( true )

它的作用就是是否继续传递触摸消息,在绘制节点的时候,越是在屏幕上方,就是zOrder越大,越优先接收到触摸事件,如果设置吞噬,那么在它下方的节点都不会接收到触摸消息了。默认如果不设置则quick自动设置为true。

默认情况下,Node 在响应触摸后(在 began 状态返回 true 表示要响应触摸),就会阻止事件继续传递给 Node 的父对象(更下层的 Node),这称为触摸事件吞噬

如果要改变这个行为,可以用:

  • setTouchSwallowEnabled() 是否允许 Node 吞噬触摸,默认为 true。如果设置为 false,则 Node 响应触摸事件后,仍然会将事件继续传递给父对象。
  • isTouchSwallowEnabled() 检查 Node 是否允许吞噬触摸。

禁用触摸

对于一个 Node,随时可以启用或禁用其触摸事件:

  • setTouchEnabled() 是否允许 Node 响应触摸,默认为 false
  • isTouchEnabled() 检查 Node 是否允许触摸。

但即便禁用了 Node 的触摸事件,也只能阻止这个 Node 响应触摸,而不能阻止这个 Node 的子 Node 响应触摸。

假设有一个对话框(Node),我们需要禁止对话框中的所有 Node 响应触摸。那么需要禁止对话框 Node 捕获事件:

1
dialog:setTouchCaptureEnabled( false )
  • setTouchCaptureEnabled() 是否允许 Node 捕获触摸,默认为 true。当设置为 false 时,该 Node 及其所有子 Node 都无法得到触摸事件。
  • isTouchCaptureEnabled() 检查 Node 是否允许捕获触摸。

总结而言,setTouchEnabled() 只针对当前 Node,而 setTouchCaptureEnabled() 同时影响当前 Node 及其所有子 Node。

触摸事件的三个阶段

quick 中触摸事件分为三个阶段:capturing(捕获)、targeting(触发)、bubbling(冒泡)。

当用户的一根手指触摸到屏幕时,将产生一个触摸事件:

  1. 遍历所有响应触摸的 Node,找出显示层级最高,并且其触摸区域包含触摸位置的那个 Node。这个 Node 被称为 TargetNode(目标 Node)。
  2. 检查 TargetNode 的 isTouchCaptureEnabled() 结果,如果返回 false,则重复 1
    1. 从 TargetNode 的根 Node(通常是 Scene)开始,检查 cc.NODE_TOUCH_CAPTURE_EVENT 事件的返回结果。任何一个 Node 返回 false 都会阻止事件在 TargetNode 上触发。并从步骤 1 开始查找其他符合条件的 Node。
    2. 这个阶段被称为 capturing
  3. 在 TargetNode 上触发事件。这个阶段被称为 targeting
  4. 如果事件返回结果为 false,表示 TargetNode 不响应该事件,并从步骤 1 开始查找其他符合条件的 Node。
  5. 在 TargetNode 完成事件的响应后,检查 TargetNode:isTouchSwallowEnabled() 的返回值。如果是 true,则取消 bubbling 阶段。
  6. 从 TargetNode 开始往其所有父 Node 触发事件,直到某个 Node 返回 false 或者事件被吞噬。这个阶段称为 bubbling

利用事件的三个阶段,我们可以注册 capturing 阶段的触摸事件处理函数:

1
2
3
4
5
6
7
-- 在 capturing 阶段就捕获事件
node:addNodeEventListener(cc.NODE_TOUCH_CAPTURE_EVENT, function(event)
     if event.name == "began" then
         -- 在 began 状态返回 false ,将阻止事件
         return false
     end
end)

关于触摸机制的灵活运用,可以参考 cc.ui 中的各个 UI 控件,以及 samples/touch 示例。

API 参考

  • addNodeEventListener() 为 Node 的特定事件设置处理函数,返回一个 id 表示注册成功。
  • removeNodeEventListener() 从 Node 上移除指定类型的事件处理函数,需要提供addNodeEventListener() 返回的注册 id。
  • setTouchEnabled() 是否允许 Node 响应触摸,默认为 false
  • isTouchEnabled() 检查 Node 是否允许触摸。
  • setTouchMode() 设置触摸模式,默认为 cc.TOUCH_MODE_ONE_BY_ONE
  • getTouchMode() 返回 Node 当前的触摸模式。
  • setTouchCaptureEnabled() 是否允许 Node 捕获触摸,默认为 true
  • isTouchCaptureEnabled() 检查 Node 是否允许捕获触摸。
  • setTouchSwallowEnabled() 是否允许 Node 吞噬触摸,默认为 true
  • isTouchSwallowEnabled() 检查 Node 是否允许吞噬触摸。

本文转载自:http://blog.csdn.net/aa294194253/article/details/41078259

共有 人打赏支持
piggybear
粉丝 3
博文 237
码字总数 37552
作品 0
西安
技术主管
quick-2.x.x触摸管理机制

lua 代码写起来真的很快,项目开发速度要快不少;开始用quick也快半年了,一直在赶项目内容;也没怎么花时间去看quick-2.x.x和cocos2d-x-2.x.x有什么区别……; 今天碰到一个touch事件问题,...

熊友良
2015/03/23
0
0
Cocos2d-JS事件处理机制

在很多图形用户技术中,事件处理机制一般都有三个重要的角色:事件、事件源和事件处理者。事件源是事件发生的场所,通常就是各个视图或控件,事件处理者是接收事件并对其进行处理的一段程序。...

智捷课堂
2015/03/31
0
0
Cocos2d-x中触摸事件

理解一个触摸事件可以从时间和空间两方面考虑。 1、触摸事件的时间方面 触摸事件的在时间方面,如下图所示,可以有不同的“按下”、“移动”和“抬起”等阶段,表示触摸是否刚刚开始、是否正...

智捷课堂
2014/07/23
44
0
cocos2d-x学习笔记(三)解决cocos2d::Director没有成员getTouchDispatcher问题

初学者在学习代码阶段偶尔会把项目代码拿过来编译,然后看下运行结果再研究代码。如果别人的项目代码是用cocos2d-x 3.0之前的版本编写的,而自己用的cocos2d-x是3.0以后的,编译的时候经常会...

wty530
2015/08/19
0
0
cocos2d-x项目101次相遇-安装和环境搭建 -xcode

cocos2d-x 101次相遇 / 目录 1 安装和环境搭建 -xcode 2 Scenes , Director, Layers, Sprites 3 建立图片菜单 4 在HelloWorld上--建立新场景 5 增加一个精灵sprite 5.1 缩小sprite并使...

中游学院
2014/04/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache Bench学习笔记

使用apache bench测试并发请求 ab -H "X-IMATRIX-ACCESS-TOKEN:1234567" -c 1000 -n 1000 http://localhost:8080/portfolioes/1/performance...

OSC_fly
27分钟前
2
0
Oracle推出轻量级Java微服务框架Helidon

近日,Oracle 推出 了一个新的开源框架 Helidon ,该项目是一个用于创建基于微服务的应用程序的Java库集合。和 Payara Micro 、 Thorntail (之前的 WildFly Swarm )、 OpenLiberty 、TomEE...

小刀爱编程
28分钟前
5
0
mysql 按周统计

方法一 : 使用 DATE_FORMAT 格式化时间,格式化参数参考 -- 参考地址 SELECTDATE_FORMAT( create_time, '%Y%u' ) weeks,DATE_FORMAT( date_sub( create_time, INTERVAL WEEKDAY( cre...

小鸟00
32分钟前
3
0
深入理解JAVA锁的机制

1. synchronized实现原理 在java代码中使用synchronized可是使用在代码块和方法中,根据Synchronized用的位置可以有这些使用场景: 如图,synchronized可以用在方法上也可以使用在代码块中,...

laigous
33分钟前
2
0
Mysql几种索引类型的区别及适用情况

如大家所知道的,Mysql目前主要有以下几种索引类型:FULLTEXT,HASH,BTREE,RTREE。 那么,这几种索引有什么功能和性能上的不同呢? FULLTEXT 即为全文索引,目前只有MyISAM引擎支持。其可以...

ZhangLG
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部