用Quick-Cocos2d-x搭建一个横版过关游戏的教程2
在上一个横版过关游戏教程中，我们学习了如何建立游戏、添加精灵以及创建新的类。在本章中，我们将详细讲解如何使用Quick来添加动画和UI。
动画
添加动画
在游戏中，常见的动画类型有两种：骨骼动画和帧动画。目前，2D游戏中使用更为广泛的是帧动画，因此，我们在本章主要讨论帧动画，骨骼动画的使用方法将在后续章节中介绍。
帧动画，简单来说，就是按照一定的时间间隔依次播放一系列图片，从而产生动画效果。例如，当我们按照特定的时间间隔显示以下几帧图片时，就形成了帧动画。
要为游戏添加帧动画，我们需要打开Player.lua文件，并添加Player:addAnimation()方法，具体代码如下：
function Player:addAnimation()
local animationNames = {"walk","attack","dead"}
local animationFrameNum = {4, 4, 4}
for i = 1, #animationNames do
local frames = display.newFrames("player1-".. i .."-%d.png", 1, animationFrameNum[i])
local animation = display.newAnimation(frames, 0.2)
display.setAnimationCache("player1-".. animationNames[i], animation)
end
end
上述代码为Player添加了3个帧动画，分别是walk、attack和dead。对应的图片文件名称遵循“角色 - 动作 - 动作帧.png”的命名规则，例如Player1 - 1 - 1.png、Player1 - 1 - 2.png等。
在Quick中，创建帧动画的步骤如下：
- 创建SpriteFrames：
local frames = display.newFrames("player1-".. i .."-%d.png", 1, animationFrameNum[i]) - 通过SpriteFrames创建Animation：
local animation = display.newAnimation(frames, 0.2)这里的时间间隔设置为0.2秒，表示每帧图片的显示时间。
- 将动画插入到AnimationCache中：
display.setAnimationCache("player1-".. animationNames[i], animation)如果动画需要频繁使用，将其放入
AnimationCache中可以显著提高效率；如果只是临时使用，则可以不进行此操作。
播放动画
为了方便调用动画，我们为每个动画添加了相应的方法，代码如下：
function Player:walkTo(pos, callback)
local function moveStop()
transition.stopTarget(self)
if callback then
callback()
end
end
local currentPos = CCPoint(CCNode.getPositionX(self), CCNode.getPositionY(self))
local destPos = CCPoint(pos.x, pos.y)
local posDiff = cc.PointDistance(currentPos, destPos)
local seq = transition.sequence({CCMoveTo:create(5 * posDiff / display.width, CCPoint(pos.x,pos.y)), CCCallFunc:create(moveStop)})
transition.playAnimationForever(self, display.getAnimationCache("player1-walk"))
self:runAction(seq)
return true
end
function Player:attack()
transition.playAnimationOnce(self, display.getAnimationCache("player1-attack"))
end
function Player:dead()
transition.playAnimationOnce(self, display.getAnimationCache("player1-dead"))
end
walkTo方法有两个参数：目标位置pos和完成后的回调函数callback。
触摸事件处理
Quick中的触摸机制
由于Cocos2d - x原本的触摸机制在实际使用中存在诸多不合理之处，廖大在Quick中对其进行了较大的改进。现在，触摸事件根据目标的显示层级进行分发，并且在Quick中，任何CCNode对象都可以接收触摸事件，这大大简化了触摸处理的流程。具体说明可参考Quick网站上的文章。
给场景添加触摸
要为场景添加触摸功能，我们需要打开MainScene.lua文件，并添加MainScene:addTouchLayer()方法，代码如下：
function MainScene:addTouchLayer()
local function onTouch(eventName, x, y)
if eventName == "began" then
self.player:walkTo({x=x,y=y})
end
end
self.layerTouch = display.newLayer()
self.layerTouch:addNodeEventListener(cc.NODE_TOUCH_EVENT, function(event)
return onTouch(event.name, event.x, event.y)
end)
self.layerTouch:setTouchEnabled(true)
self.layerTouch:setPosition(ccp(0,0))
self.layerTouch:setContentSize(CCSizeMake(display.width, display.height))
self:addChild(self.layerTouch)
end
通过调用addNodeEventListener()方法为Layer添加触摸事件。第一个参数是要侦听的消息类型，具体的事件类型定义可以在Event.lua文件中查看；第二个参数是事件响应函数。在这个回调函数中，我们让玩家角色移动到点击的位置。
最后，在MainScene:ctor()中添加self:addTouchLayer()，刷新Player，点击鼠标，你会发现角色会跟随鼠标移动。