QUICK COCOS2D-X 触摸事件

前端之家收集整理的这篇文章主要介绍了QUICK COCOS2D-X 触摸事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Quick 中的触摸事件

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

显示层级

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

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

1
2
3
4
5
6
7
@H_404_32@ 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指示了事件的状态: