本文实践自 Allen Tan 的文章《How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Part 1》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.0.4进行学习和移植。在这篇文章，将会学习到如何制作一个简单的横版格斗过关游戏。在这当中，学习如何跟踪动画状态、碰撞盒、添加方向键、添加简单敌人AI和更多其它的。
步骤如下：
1.新建Cocos2d-win32工程，工程名为"PompaDroid"，去除"Box2D"选项，勾选"Simple Audio Engine in Cocos Denshion"选项；
2.添加游戏场景类GameScene，派生自CCScene类。添加GameLayer类和HudLayer类，派生自CCLayer类。删除HelloWorldScene.h和HelloWorldScene.cpp文件。
3.HudLayer类增加一个方法：
和GameLayer类增加一个方法：
4.文件GameScene.h代码如下：
文件GameScene.cpp代码如下：
5.修改AppDelegate.cpp文件，代码如下：
6.编译运行，此时只是空空的界面。
7.下载本游戏所需资源，将资源放置"Resources"目录下；
8.用Tiled工具打开pd_tilemap.tmx，就可以看到游戏的整个地图：
地图上有两个图层：Wall和Floor，即墙和地板。去掉每个图层前的打钩，可以查看层的组成。你会发现下数第四行是由两个图层一起组成的。每个tile都是32x32大小。可行走的地板tile位于下数三行。
9.打开GameLayer.h文件，添加如下代码：
打开GameLayer.cpp，在构造函数，添加如下代码：
添加如下代码：
对所有图层进行setAliasTexParameters设置，该方法是关闭抗锯齿功能，这样就能保持像素风格。
10.编译运行，可以看到地图显示在屏幕上，如下图所示：
11.创建英雄。在大多数2D横版游戏中，角色有不同的动画代表不同类型的动作。我们需要知道什么时候播放哪个动画。这里采用状态机来解决这个问题。状态机就是某种通过切换状态来改变行为的东西。单一状态机在同一时间只能有一个状态，但可以从一种状态过渡到另一种状态。在这个游戏中，角色共有五种状态，空闲、行走、出拳、受伤、死亡，如下图所示：
为了有一个完整的状态流，每个状态应该有一个必要条件和结果。例如：行走状态不能突然转变到死亡状态，因为你的英雄在死亡前必须先受伤。
12.添加ActionSprite类，派生自CCSprite类，ActionSprite.h文件代码如下：
打开ActionSprite.cpp文件，构造函数如下：
各个方法实现暂时为空。以上代码声明了基本变量和方法，可以分为以下几类：
Actions：这些是每种状态要执行的动作。这些动作是当角色切换状态时，执行精灵动画和其他触发的事件。
States：保存精灵的当前动作/状态，使用ActionState类型，这个类型待会我们将会进行定义。
Attributes：包含精灵行走速度值，受伤时减少生命点值，攻击伤害值。
Movement：用于计算精灵如何沿着地图移动。
Measurements：保存对精灵的实际图像有用的测量值。需要这些值，是因为你将要使用的这些精灵画布大小是远远大于内部包含的图像。
Action methods：不直接调用动作，而是使用这些方法触发每种状态。
Scheduled methods：任何事需要在一定的时间间隔进行运行，比如精灵位置和速度的更新，等等。
新建一个头文件Defines.h，代码如下：
简要说明下：
①.定义了一些便利的宏，如直接使用SCREEN获取屏幕大小；
②.定义了一些便利的函数，随机返回整型或者浮点型；
③.定义ActionState类型，这个是ActionSprite可能处在不同状态的类型枚举；
④.定义BoundingBox结构体，将用于碰撞检测。
打开GameLayer.h文件，添加如下代码：
打开GameLayer.cpp文件，在init函数里面添加如下代码：
加载精灵表单，创建一个CCSpriteBatchNode。这个精灵表单包含我们的所有精灵。它的z值高于CCTMXTiledMap对象，这样才能出现在地图前。
添加Hero类，派生自ActionSprite类，添加如下代码：
Hero类的init函数的实现如下所示：
我们用初始空闲精灵帧创建了英雄角色，配备了一个CCArray数组包含所有的属于空闲动画的精灵帧，然后创建一个CCAction动作播放来这个动画。以每秒12帧的速率进行播放。接下去，为英雄设置初始属性，包括精灵中心到边到底部的值。如下图所示：
英雄的每个精灵帧都在280x150像素大小的画布上创建，但实际上英雄精灵只占据这个空间的一部分。所以需要两个测量值，以便更好的设置精灵的位置。需要额外的空间，是因为每个动画精灵绘制的方式是不同的，而有些就需要更多的空间。
打开GameLayer.h文件，添加头文件声明：
GameLayer类添加如下代码：
打开GameLayer.cpp文件，在构造函数添加如下代码：
在init函数this->addChild(_actors, -5);后面添加如下代码：
添加initHero方法，代码如下：
创建了一个英雄实例，添加到了精灵表单，并设置了设置。调用idle方法，让其处于空闲状态，运行空闲动画。返回到ActionSprite.cpp文件，实现idle方法，代码如下：
这个idle方法只有当ActionSprite不处于空闲状态才能调用。当它触发时，它会执行空闲动作，改变当前状态到kActionStateIdle，并且把速度置零。
13.编译运行，可以看到英雄处于空闲状态。如下图所示：
14.出拳动作。打开Hero.cpp文件，在init函数idle animation后面，添加如下代码：
打开ActionSprite.cpp文件，实现attack方法，代码如下：
英雄只有在空闲、攻击、行走状态才能进行出拳。确保英雄正在受伤时、或者死亡时不能进行攻击。为了触发attack方法，打开GameLayer.cpp文件，在init函数添加如下代码：
重载ccTouchesBegan方法，代码如下：
15.编译运行，点击屏幕进行出拳，如下图所示：
16.创建8个方向的方向键。我们需要创建虚拟的8个方向的方向键来让英雄在地图上进行移动。添加SimpleDPad类，派生自CCSprite类，SimpleDPad.h文件代码如下：
对以上的一些声明，解释如下：
radius：圆形方向键的半径。
direction：当前所按下的方向。这是一个矢量，(-1.0, -1.0)是左下方向，(1.0, 1.0)是右上方向。
delegate：方向键的委托，后续进行介绍。
isHeld：布尔值表示玩家触摸着方向键。
对于SimpleDPad类，使用了委托模式。意味着一个委托类(并非SimpleDPad)，将会处理由被委托类(SimpleDPad)启动的任务。在某些你指定的点上，主要是当涉及到处理任何游戏相关的东西，SimpleDPad将会将职责传递给委托类。这使得SimpleDPad无需知道任何游戏逻辑，从而允许你在开发任何其他游戏时，可以进行重用。如下图所示：
当SimpleDPad检测到在方向键内的触摸，它会计算触摸的方向，然后发送消息到委托类指明方向。在这之后的任何事情都不是SimpleDPad所关心的了。为了实施这个模式，SimpleDPad需要至少了解其委托的有关信息，特别是将触摸方向传递给委托的方法。这是另一种设计模式：协议。可以看到SimpleDPad的委托定义了所需的方法，在这种方式中，SimpleDPad强制其委托有三个指定的方法，以便确保每当它想传递东西放到委托中时，它能调用这些方法中的任何一种。事实上，SimpleDPad也遵循一种协议，即CCTargetedTouchDelegate。当SimpleDPad被触摸时，进行处理触摸事件，而GameLayer将不会得到触摸。否则的话，在触摸方向键的时候，英雄就会出拳攻击，显然，这不是希望看到的。打开SimpleDPad.cpp文件，添加如下代码：
以上方法中，onEnterTransitionDidFinish注册SimpleDPad委托类，onExit移除SimpleDPad委托类，update方法是当方向键被触摸时，传递方向值到委托类。ccTouchBegan方法检测触摸位置是否在方向键圆内，如果是，则将isHeld置为true，并更新方向值，返回true以拥有触摸事件优先权。ccTouchMoved当触摸点移动时，更新方向值。ccTouchEnded将isHeld置为false，重置方向，并通知委托触摸结束。updateDirectionForTouchLocation方法计算触摸点到方向键中心距离值，转换成角度，得到正确的方向值，然后传递值到委托。
打开HudLayer.h文件，添加头文件声明：
添加如下代码：
打开HudLayer.cpp文件，添加如下代码：
以上代码实例化SimpleDPad，并且添加到HudLayer上。现在GameScene同时控制GameLayer和HudLayer，但有时候想直接通过HudLayer访问GameLayer。打开GameLayer.h文件，添加头文件声明：
将GameLayer类声明修改成如下：
并添加以下声明：
以上方法的实现暂时为空。这样我们就在GameLayer中添加了HudLayer的引用，同时还让GameLayer遵循SimpleDPad所创建的协议。打开GameScene.cpp文件，在init函数this->addChild(_hudLayer, 1);后面，添加如下代码：
17.编译运行，可以看到左下角的虚拟方向键，如下图所示：
别试着压下方向键，英雄不会有任何反应，因为还未实现协议方法，这在第二部分将完成。
参考资料：
1.How To Make A Side-Scrolling Beat ‘Em Up Game Like Scott Pilgrim with Cocos2D – Part 1/24155/how-to-make-a-side-scrolling
2.如何使用cocos2d制作类似Scott Pilgrim的2D横版格斗过关游戏part1（翻译） /s/blog_4b55f6860101a9b7.html
3.如何使用Cocos2d-x做一DNF类的游戏-part1 /jyzgo/article/details/8471306
非常感谢以上资料，本例子源代码附加资源下载地址：/detail/akof1314/5038013
iOS版下载地址： /share/link?shareid=4274785548&uk=3189484501
TexturePacker-2.4.3图片处理工具下载地址： /share/link?shareid=77358&uk=3189484501
如文章存在错误之处，欢迎指出，以便改正。
本文出自 “7087095” 博客，请务必保留此出处http://7097095./7087095/1219403
