quickcocos2dx 学习系列之十三 触摸.docx

1、quickcocos2dx 学习系列之十三 触摸quick-cocos2d-x 学习系列之十三 触摸现在智能机基本都是触摸屏，除了键盘爱好者们耍键盘。我们要通过这小小的触摸屏上完成整个游戏逻辑的控制，需要对这巴掌大地方进行详细控制了。1. 单点触摸测试创建精灵函数function createTouchableSprite(p) local sprite = display.newScale9Sprite(p.image) sprite:setContentSize(p.size) local cs = sprite:getContentSize() local label = cc.ui.U

2、ILabel.new( UILabelType = 2, text = p.label, color = p.labelColor) label:align(display.CENTER) label:setPosition(cs.width / 2, label:getContentSize().height) sprite:addChild(label) sprite.label = label return spriteend划BOX框function drawBoundingBox(parent, target, color) local cbb = target:getCascade

3、BoundingBox() local left, bottom, width, height = cbb.origin.x, cbb.origin.y, cbb.size.width, cbb.size.height local points = left, bottom, left + width, bottom, left + width, bottom + height, left, bottom + height, left, bottom, local box = display.newPolygon(points, borderColor = color) parent:addC

4、hild(box, 1000)end1.1 响应触摸事件调用该函数：self.sprite = createTouchableSprite( image = WhiteButton.png, size = cc.size(500, 300), label = TOUCH ME !, labelColor = cc.c3b(255, 0, 0) :pos(display.cx, display.cy) :addTo(self) drawBoundingBox(self, self.sprite, cc.c4f(0, 1.0, 0, 1.0)- 启用触摸self.sprite:setTouchEn

5、abled(true)self.sprite:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) - event.name 是触摸事件的状态：began, moved, ended, cancelled - event.x, event.y 是触摸点当前位置 - event.prevX, event.prevY 是触摸点之前的位置 local label = string.format(sprite: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.sprite.l

6、abel:setString(label) - 返回 true 表示要响应该触摸事件，并继续接收该触摸事件的状态变化 return true end)单点触摸是最直接的使用方式了。1.2 事件穿透和事件捕获-创建底层触摸层self.parentButton = createTouchableSprite( image = WhiteButton.png, size = cc.size(600, 500), label = TOUCH ME !, labelColor = cc.c3b(255, 0, 0) :pos(display.cx, display.cy) :addTo(self) se

7、lf.parentButton.name = parentButton drawBoundingBox(self, self.parentButton, cc.c4f(0, 1.0, 0, 1.0)self.parentButton:setTouchEnabled(true)-给该触摸层增加监听self.parentButton:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) local label = string.format(parentButton: %s x,y: %0.2f, %0.2f, event.name,

8、event.x, event.y) self.parentButton.label:setString(label) return true end)-在底层创建button1, button1 响应触摸后，会吞噬掉触摸事件 self.button1 = createTouchableSprite( image = GreenButton.png, size = cc.size(400, 160), label = TOUCH ME !) :pos(300, 400) :addTo(self.parentButton) cc.ui.UILabel.new(text = SWALLOW = YE

9、Sn事件在当前对象处理后被吞噬, size = 24) :align(display.CENTER, 200, 90) :addTo(self.button1) drawBoundingBox(self, self.button1, cc.c4f(1.0, 0, 0, 1.0)self.button1:setTouchEnabled(true)self.button1:setTouchSwallowEnabled(true) - 是否吞噬事件，默认值为 true self.button1:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(ev

10、ent) local label = string.format(button1: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.button1.label:setString(label) return true end)- 在底层创建button2, 响应触摸后，不会吞噬掉触摸事件 self.button2 = createTouchableSprite( image = PinkButton.png, size = cc.size(400, 160), label = TOUCH ME !) :pos(300, 200)

11、 :addTo(self.parentButton) cc.ui.UILabel.new(text = SWALLOW = NOn事件会传递到下层对象, size = 24) :align(display.CENTER, 200, 90) :addTo(self.button2) drawBoundingBox(self, self.button2, cc.c4f(0, 0, 1.0, 1.0) self.button2:setTouchEnabled(true) self.button2:setTouchSwallowEnabled(false) - 当不吞噬事件时，触摸事件会从上层对象往下

12、层对象传递，称为“穿透” self.button2:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) local label = string.format(button1: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.button2.label:setString(label) return true end)事件穿透通过函数setTouchSwallowEnabled来实现。如下函数设置是否捕捉触摸self.parentButton:setTouchCap

13、tureEnabled(button:isButtonSelected()1.3 在事件捕获阶段决定是否接受事件- 这个标志变量用于在触摸事件捕获阶段决定是否接受事件 self.isTouchCaptureEnabled_ = true - parentButton 是 button1 的父节点 self.parentButton = createTouchableSprite( image = WhiteButton.png, size = cc.size(600, 500), label = TOUCH ME !, labelColor = cc.c3b(255, 0, 0) :pos(d

14、isplay.cx, display.cy) :addTo(self) drawBoundingBox(self, self.parentButton, cc.c4f(0, 1.0, 0, 1.0) self.parentButton.label2 = cc.ui.UILabel.new(text = , size = 24, color = cc.c3b(0, 0, 255) :align(display.CENTER, 300, 60) :addTo(self.parentButton) self.parentButton:setTouchEnabled(true) self.parent

15、Button:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) local label = string.format(parentButton: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.parentButton.label:setString(label) printf(%s %s TARGETING, parentButton, event.name) if event.name = ended or event.name = cancelled th

16、en print(-) else print() end return true end) - 可以动态捕获触摸事件，并在捕获触摸事件开始时决定是否接受此次事件 self.parentButton:addNodeEventListener(cc.NODE_TOUCH_CAPTURE_EVENT, function(event) if event.name = began then print(-) end local label = string.format(parentButton CAPTURE: %s x,y: %0.2f, %0.2f, event.name, event.x, ev

17、ent.y) self.parentButton.label2:setString(label) printf(%s %s CAPTURING, parentButton, event.name) if event.name = began or event.name = moved then return self.isTouchCaptureEnabled_ end end) - button1 响应触摸后，会吞噬掉触摸事件 self.button1 = createTouchableSprite( image = GreenButton.png, size = cc.size(400,

18、160), label = TOUCH ME !) :pos(300, 400) :addTo(self.parentButton) cc.ui.UILabel.new(text = SWALLOW = YESn事件在当前对象处理后被吞噬, size = 24) :align(display.CENTER, 200, 90) :addTo(self.button1) drawBoundingBox(self, self.button1, cc.c4f(1.0, 0, 0, 1.0) self.button1:setTouchEnabled(true) self.button1:setTouch

19、SwallowEnabled(true) - 是否吞噬事件，默认值为 true self.button1:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) local label = string.format(button1: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.button1.label:setString(label) printf(%s %s TARGETING, button1, event.name) if event.name = end

20、ed or event.name = cancelled then print(-) else print() end return true end) - button2 响应触摸后，不会吞噬掉触摸事件 self.button2 = createTouchableSprite( image = PinkButton.png, size = cc.size(400, 160), label = TOUCH ME !) :pos(300, 200) :addTo(self.parentButton) cc.ui.UILabel.new(text = SWALLOW = NOn事件会传递到下层对象

21、, size = 24) :align(display.CENTER, 200, 90) :addTo(self.button2) drawBoundingBox(self, self.button2, cc.c4f(0, 0, 1.0, 1.0) self.button2:setTouchEnabled(true) self.button2:setTouchSwallowEnabled(false) - 当不吞噬事件时，触摸事件会从上层对象往下层对象传递，称为“穿透” self.button2:addNodeEventListener(cc.NODE_TOUCH_EVENT, functio

22、n(event) local label = string.format(button1: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.button2.label:setString(label) printf(%s %s TARGETING, button2, event.name) return true end) - 即便父对象在捕获阶段阻止响应事件，但子对象仍然可以捕获到事件，只是不会触发事件 self.button2:addNodeEventListener(cc.NODE_TOUCH_CAPTURE_EVENT,

23、 function(event) printf(%s %s CAPTURING, button2, event.name) return true end) - 放置一个开关按钮在屏幕上 local labels = labelstrue = 父对象【可以】捕获触摸事件 labelsfalse = 父对象【不能】捕获触摸事件 local images = on = CheckBoxButton2On.png, off = CheckBoxButton2Off.png self.captureEnabledButton = cc.ui.UICheckBoxButton.new(images) :

24、setButtonLabel(cc.ui.UILabel.new(text = labelstrue, size = 24) :setButtonLabelOffset(40, 0) :setButtonSelected(true) :onButtonStateChanged(function(event) local button = event.target button:setButtonLabelString(labelsbutton:isButtonSelected() end) :onButtonClicked(function(event) local button = even

25、t.target self.isTouchCaptureEnabled_ = button:isButtonSelected() end) :pos(display.cx - 160, display.top - 80) :addTo(self) cc.ui.UILabel.new( text = 事件处理流程：n1. 【捕获】阶段：从父到子n2. 【目标】阶段n3. 【传递】阶段：尝试传递给下层对象, size= 24) :align(display.CENTER_TOP, display.cx, display.top - 120) :addTo(self)其中NODE_TOUCH_EVE

26、NT 和 NODE_TOUCH_CAPTURE_EVENT 表示两种事件。在NODE_TOUCH_CAPTURE_EVENT 的处理函数中返回真假，然后决定是否调用NODE_TOUCH_EVENT的处理函数。1.4 容器的触摸区域由子对象决定创建一个node，在node上增加几个精灵，精灵的局域决定的触摸的范围。- touchableNode 是启用触摸的 Node self.touchableNode = display.newNode() self.touchableNode:setPosition(display.cx, display.cy) self:addChild(self.to

27、uchableNode) - 在 touchableNode 中加入一些 sprite local count = math.random(3, 8) local images = WhiteButton.png, BlueButton.png, GreenButton.png, PinkButton.png for i = 1, count do local sprite = display.newScale9Sprite(imagesmath.random(1, 4) sprite:setContentSize(cc.size(math.random(100, 200), math.ran

28、dom(100, 200) sprite:setPosition(math.random(-200, 200), math.random(-200, 200) self.touchableNode:addChild(sprite) end self.stateLabel = cc.ui.UILabel.new(text = ) self.stateLabel:align(display.CENTER, display.cx, display.top - 100) self:addChild(self.stateLabel) - 启用触摸 self.touchableNode:setTouchE

29、nabled(true) - 添加触摸事件处理函数 self.touchableNode:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event) local label = string.format(touchableNode: %s x,y: %0.2f, %0.2f, event.name, event.x, event.y) self.stateLabel:setString(label) return true end) drawBoundingBox(self, self.touchableNode, cc.c4f(0,

30、1.0, 0, 1.0)2. 多点触摸2.1 响应触摸事件- createTouchableSprite() 定义在 includes/functions.lua 中 self.sprite = createTouchableSprite( image = WhiteButton.png, size = cc.size(500, 600), label = TOUCH ME !, labelColor = cc.c3b(255, 0, 0) :pos(display.cx, display.cy) :addTo(self) drawBoundingBox(self, self.sprite, cc.c4f(0, 1.0, 0, 1.0) local labelPoints = cc.ui.UILabel.new(text = , size = 24) :align(display.CENTER_TOP