免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用，切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！

原文链接地址：http://www.raywenderlich.com/3913/how-to-create-a-game-like-tiny-wings-part-2

教程截图：

这是本系列教程的最后一部分，主要是教大家如何制作一个类似Tiny Wings的游戏。

在预备教程中，我们学会了如何创建动态山丘纹理和背景纹理。

在第一部分教程中，我们学会了如何动态创建游戏里所需要的山丘。

在这篇教程中，也是本系列教程的最后一篇，我们将会学习到更加有意思的部分—如何往游戏里面添加主角，同时使用Box2D来仿真主角的移动！

再说明一下，这个教程系列是基于Sergey Tikhonov所写的一个非常好的demo project制作的—所以我要特别感谢Sergey！

这个教程假设你对cocos2d和Box2d已经很熟悉了。如果你对这两者还很陌生的话，建议你先阅读本博客上翻译的cocos2d教程和box2d教程。

Getting Started

如果你还没有准备好，可以先下载上一篇教程中完成的样例工程。

接下来，我们将添加一些基本的Box2d代码。我们将创建一个Box2d world和一些代码来激活debug drawing，同时还会添加一些测试用shape，以此确保Box2D环境被正确搭建起来！

首先，打开HelloWorldLayer.h，然后作如下修改：

这里包含了Box2d的头文件和debug draw的头文件，同时定义一个_world变量来追踪Box2d的world与debug draw类。

同时，我们也声明了一个像素/米的转换率（PTM_RATIO）为32.回顾一下，这个变量主要作用是在Box2d的单位（米）和cocos2d的单位（点）之间做转换。

然后，我们在HelloWorldLayer.mm中添加一下新的方法，添加位置在init方法上面：

如果你对Box2d很熟悉的话，上面这个方法只是一个回顾。

setupWorld方法创建一个有重力的world–但是比标准的重力-9.8m/s^2要小一点点。

createTestBodyAtPostition创建一个测试对象—一个25个点大小的圆。我们将使用这个方法来创建一个测试对象，每一次你点击屏幕就会在那个地方产生一个圆，不过这只是测试用，之后会被删除掉。

你现在还没有完成HelloWorldLayer.mm–现在再作一些修改，如下所示：

第一段代码，我们调用setupWorld方法来创建一个Box2d世界。然后使用Box2d的world来初始化Terrain类。这样，我们就可以使用这个world来创建山丘的body了。为此，我们将会写一些桩代码（placeholder)。

第二段代码，我们调用_world->Step方法来运行物理仿真。注意，这里使用的是固定时间步长的实现方式，它比变长时间步长的方式物理仿真效果要更好。对于具体这个是怎么工作的，可以去看看我们的cocos2d书籍中关于Box2d的那一章节内容。

最后一段代码是添加到cctouchesBegan里面，不管什么时候你点击屏幕，就会创建一个Box2d的body。再说一下，这样做只是为了测试Box2d环境可以run起来了。

注意，我们这里得到的touch坐标是在地形的坐标之内。这是因为，地形将会滚动，而我们想知道地形的位置，而不是屏幕的位置。

接下来，让我们修改一下Terrain.h/m。首先，修改Terrain.h，如下所示：

这里只是包含Box2d头文件，然后创建一些实例变量来追踪Box2d的world,以及山丘的body,还有支持debug drawing的对象。同时，我们还定义了初始化方法，它接收Box2d的world作为参数。

然后在Terrain.m中添加一个新的方法，位置在generateHills上面：

这里仅仅是一个辅助方法，用来创建山丘的的底部body，代表“地面”。这里只是暂时用这个方法，用来防止随机生成的圆会掉到屏幕之外去。之后，在我们建模好山丘后，我们会再次修改。

目前，我们只是把第一个关键点和最后一个关键点用一条边连接起来。

接下来，在Terrain.m中添加一些代码来调用上面的代码，同时建立起debug drawing：

每一次山丘顶点被重置的时候，我们调用resetBox2DBody来创建可见部分山丘的body。目前，这个body是不变的（它只是添加了一条线，当作地面）。但是，接下来，我们将修改这个来建模可见部分的山丘。

setupDebugDraw方法设置了激活Box2d 对象debug drawing所需要的一些配置。如果你熟悉Box2d的话，那么这个就是回顾啦。

然后，你可能会奇怪，为什么debug draw的代码要放在Terrain.m文件中呢？而不是放在HelloWorldLayer.mm中呢？这是因为，这个游戏中的滚动效果是在Terrain.m中实现的。因此，为了使Box2d的坐标系统和屏幕范围内可见部分的坐标系统匹配起来，我们就把debug drawing代码放在Terrain.m中了。

最后一步，如果你现在想要编译的话，可能会出现几百个错误。这是因为Terrain.m导入了Terrain.h文件，而Terrain.h文件又包含了HelloWorldLayer.h文件，而它又导入了Box2D.h头文件。而不管什么时候，只要你在.m文件中使用c++的话，那么就会产生一大堆的错误。

不过还好，解决办法非常简单—只要把Terrain.m改成Terrain.mm就可以了。

编译并运行，现在，你点击一下屏幕，你会看到许多圆形对象掉在屏幕里面拉！

在Box2d里面为山丘定义body边界

现在，我们只拥有一个Box2d的shape代表屏幕的底部边界，但是，我们真正想要的是代表山丘边界的shape。

幸运的是，因为我们拥有所有的线段了，所以添加边界会非常简单！

• 我们有一个山丘顶部所有顶点的数组(borderVertices). 在上一个教程的resetHillVertices方法中，我们生成了这样一个数组。
• 我们有一个方法，不管什么时候顶点为被改变了，它都会被调用，那就是resetBox2DBody.

因此，我们需要修改resetBox2DBody方法，我们要为borderVertices组织中的每一个实体创建一条边，具体方法如下：

这个新的实现首先看看是不是存在一个已有的Box2d body，如果是的话，就销毁原来的body。

然后，它创建一个新的body，循环遍历border vertices数组里面的所有顶点，这些顶点代表山丘顶部。对于每2个顶点，都将创建一条边来连接它们。

很简单，对不对？编译并运行，现在，你可以看到一个带有斜坡的Box2d body了，而且它沿着山丘的纹理边界。

添加海豹

我们之前把工程命名为Tiny Seal，可是并没有seal 啊！

接下来，让我们把海豹添加进去！

首先，下载并解压这个工程的资源文件，然后把”Sprite sheets“和”Sounds“直接拖到工程里去，对于每一个文件夹，都要确保“copy items into destination group’s folder”被复选中，然后点击”Finish”。

然后，点击File\New\New File，选择iOS\Cocoa Touch\Objective-C class，再点Next。选择CCSprite作为基类，再点Next，然后把文件命名为Hero.mm（注意，.mm是因为我们将使用到Box2d的东西），最后点击Finish.

接着，把Hero.h替换成下面的内容：

这个也非常简单—只是导入Box2d.h头文件，然后定义一些变量来追踪world和海豹的body.

然后，打开Hero.mm，然后作如下修改：

createBody方法为海豹创建了一个圆形的shape。这个方法和之前写过的createTestBodyAtPosition方法几乎没有什么区别，除了圆的大小和海豹图片的大小要匹配（不过实际上要比图片大小小一些，这样子碰撞检测效果会更好）

同时，这里的摩擦系数（friction）设置为0.2（因为海豹是很滑的），同时反弹系数(restitution）设置为0（这样子，当海豹碰撞到山丘的时候就不会反弹起来了）。

同时，我们也设置body的线性阻尼（ linear damping），这样子海豹就会随着时间慢慢减速。同时，设置body的固定旋转为真，这样子，海豹在游戏里面就不会旋转body了。

在initWithWorld方法里面，我们把精灵初始化为一个特定的精灵帧（seal1.png），同时保存一份world的指针，然后调用上面的createBody方法。

这里的update方法基于Box2d body的位置来更新海豹精灵的位置，同时基于海豹的body的速度来更新海豹精灵的旋转。

接下来，你需要修改一下Terrain.h和Terrain.mm，因为，我们将要在Terrain.mm中添加一个sprite batch node。

首先，打开Terrain.h，并作以下修改：

然后，打开Terrain.mm，并作如下修改：

这里只是为TinySeal.png精灵表单创建了一个batch node，然后从TinySeal.plist文件中加载了精灵帧的定义信息到sprite frame cache中。

差不多完成了！接下来，让我们修改HelloWorldLayer.h：

同时修改HelloWorldLayer.mm：

编译并运行，你现在可以看到一只happy的海豹在屏幕左边了！

但是，看起来有起奇怪，它在屏幕之外！如果我们把它往右边挪一下，那样子看起来会更好。

当然，这个改起来很简单！打开Terrain.mm，然后把setoffsetX改成下面的样子：

这里把海豹的位置旋转在屏幕的1/8处，这样子海豹看起来就会往右边一点点了。编译并运行，现在可以看到海豹的全貌啦！

使海豹移动

我们离一个完整的游戏越来越近了—我们有一只海豹，我们只需要让它飞起来就可以啦！

我们采取的策略如下：

• 第一次点击屏幕的时候，我们让海豹稍微往右边跳起来一点点，代表开始了！
• 不管什么时候点击屏幕，我们应用一个冲力使海豹往下落。当海豹下山时，会使它的速度变得更快，这样到下一个山头的时候就可以飞起来了。
• 添加一些代码让海豹移动的距离稍微远一点，我们可不想让我们的海豹卡住！

让我们来实现这些策略吧！打开Hero.h，作如下修改：

然后对Hero.mm作如下修改：

这个wake方法应用一个冲力（impulse)使得海豹刚开始往右上方飞。

dive方法应用一个比较大的向下的冲力，和一个比较小的向右的力。这个向下的冲力会使得海豹往山丘上撞，这时，山丘的斜坡越大，那么小鸟就飞得越高。（应该是上山的时候，下山相反)

limitVeLocity方法确保海豹速度至少在 x轴方向5m/s²，Y轴方向-40m/s²。

基本上要完成了—只需要再修改一下HelloWorldLayer类。首先打开HelloWorldLayer.h，然后添加一个新的实例变量：

原创文章，转载请注明： 转载自DEVDIV博客-History

本文链接地址: （译）如何制作一个类似tiny wings的游戏：第二部分（完）

免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用，切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！

原文链接地址：http://www.raywenderlich.com/505/how-to-create-a-simple-breakout-game-with-box2d-and-cocos2d-tutorial-part-22

程序截图：

这是《如何使用cocos2d和Box2d制作一个简单的breakout游戏》的第二部分，也是最后一部分教程。如果你还没有读过第一部分，请先阅读第一个教程！

在上一个教程中，我们创建了一个屏幕盒子，球可以在里面弹跳，同时，我们可以用手指拖着paddle移动。这部分教程中，我们将添加一些游戏逻辑，当篮球碰到屏幕底部的时候，就Gameover。

Box2D 和碰撞检测

在Box2D里面，当一个fixture和另一个fixture相互碰撞的时候，我们怎么知道呢？这就需要用到碰撞侦听器了（contact listener)。一个碰撞侦听器是一个C++对象，它继承至Box2d的b2ContactListner类，并且要设置给world对象。这样，当有两个对象发生相互碰撞的时候，world对象就会回调contact listener对象的方法，这样我们就可以在那些方法里面做相应的碰撞处理了。

如何使用contact listener呢？根据BOX2D用户手册，在一个仿真周期内，你不能执行任何修改游戏物理的操作。因为，在那期间，我们可能需要做一些额外的处理（比如，当两个对象碰撞的时候销毁另一个对象）。因此， 我们需要保存碰撞的引用，这样后面就可以使用它。

另外一点值得注意的是，我们不能存储传递给contact listener的碰撞点的引用，因为，这些点被Box2D所重用。因此，我们不得不存储这些点的拷贝。

好了，说得够多了，让我们亲手实践一下吧！

当我们碰到屏幕底部的时候

注意，在这部分里面，我们将使用一些C++代码和STL（标准模板库）。如果你还不熟悉C++或者是STL，不用太担心–你只需要复制粘贴代码就OK了，不过建议还是学习一下C++和STL，因为大部分游戏都是用C++做成的。

好。点开你的Classes文件夹，点击File\New File），选择左边的“Cocoa Touch Class”，再选择“Objective-C class”，确保“Subclass of NSObject”被选中，再点Next。把它命名为MyContactListener，然后点Finish。

右键点MyContactListener.m，并把它改成MyContactListener.mm。这是因为，我们现在要创建一个C++类，而我们使用C++的时候就需要把文件后缀改成.mm。

接下用下面的代码替换掉 MyContactListener.h里面的内容：

这里，我们定义了一个数据结构，当碰撞通知到达的时候，用来保存碰撞点信息。再说一遍，我们需要存储其拷贝，因为它们会被重用，所以不能保存指针。注意，我们这里一定要重载=号，因为，我们将使用find算法来查找vector中的一个特定的元素，而这个标准算法find必须要求其查找的元素是可比较相等的。

在我们申明完contact listener类之后，我们只需要声明一些我们感兴趣的方法来实现就可以了。这里的vector用来缓存碰撞点信息。

现在，用下面的内容替换掉MyContactListener.mm：

我们在构造函数中初使化vector。然后，我们只需要实现BeginContact和EndContact方法就可以了。这两个方法，一个是碰撞开始的时候world对象会回调，另一个就是碰撞结束的时候被回调。在BeginContact方法中，我们复制了刚刚发生碰撞的fixture的一份拷贝，并把它存储在vector中。在EndContact方法中，我们检查一下碰撞点是否在我们的vector中，如果在的话，就移除它！

好了，现在可以使用它吧。打开HelloWorldScene.h，然后做下面的修改：

然后在init方法中增加下列代码：

这里，我们创建了contact listener对象，然后调用world对象把它设置为world的contact listener。

接下来，再我们忘记之前先做一些清理内存的操作：

最后，在tick方法底部添加下列代码：

这里遍历所有缓存的碰撞点，然后看看是否有一个碰撞点，它的两个碰撞体分别是篮球和屏幕底部。目前为止，我们只是使用NSLog来打印一个消息，因为我们只想测试这样是否可行。

因此，在debug模式下编译并运行，你会发现，不管什么时候，当球和底部有碰撞的时候，你会看到控制台输出一句话“Ball hit bottom”!

添加Game Over场景

增加GameOverScene.h and GameOverScene.mm files两个文件，它们可以在《如何使用cocos2d制作一个简单的iphone游戏教程》中找到。注意，你必须把GameOverScene.m改成GameOverScene.mm，因为我们要在里面使用一些C++，如果你不改的话，那么编译就会报错。

然后，在HelloWorldScene.mm文件中加入下列代码：

然后，把NSLog语句替换成下列代码：

好了，我们已经实现得差不多了。但是，如果你游戏你永远不能赢，那有什么意思呢？

增加一些方块

下载我制作的方块图片，然后把它拖到Resources文件夹下面，同时确保“copy items into destination group’s folder (if needed)”被复选中。

然后往init方法中添加下列代码：

现在，你应该可以很好地理解上面的代码了。就像之前我们为paddle创建一个body类似，这里，我们每一次也会一个方块创建一个body。注意，我们把方块精灵对象的tag设置为2，这样将来可以用到。

编译并运行，你应该可以看到篮球和方块之间有碰撞了。

销毁方块

为了使breakout游戏是一个真实的游戏，当篮球和方块有交集的时候，我们需要销毁这些方块。我们已经添加了一些代码来追踪碰撞，因此，我们对tick方法做一改动。

具体改动方式如下：

好，让我们解释一下。我们又一次遍历所有的碰撞点，但是，这一次在我们测试完篮球和屏幕底部相撞的时候，我们将检查碰撞点。我们可以通过fixture对象的GetBody方法来找对象。

接着，我们基于精灵的tag，看看到底是哪个在发生碰撞。如果一个精灵与一个body相交的话，我们就需要添加一系列的对象来删除。

注意，我们把该销毁的全部加入到一个指定的销毁点去。但是，也需要注意的是，即使还没好，我也要等几分钟把它加进去。

最后，遍历我们想要删除的body列表。

编译并运行，现在你可以销毁bricks了！

加入游戏胜利条件

接下来，我们需要添加一些逻辑，让用户能够取得游戏胜利。修改你的tick方法的开头部分，像下面一样：

我们需要做的，仅仅是遍历一下场景中的所有对象，看看是否还有一个方块—-如果我们确实找到了一个，那么就把blockFound变量设置为true，否则就设置为false.

然后，在这个函数的末尾添加下面的代码：

这里，如果方块都消失了，我们就会显示一个游戏结束的场景。编译并运行，看看，你的游戏现在有胜利终止条件了！

完成touch事件

这个游戏非常酷，但是，毫无疑问，我们需要音乐！你可以下载我制作的一些背景音乐，还有好听的blip声音。和之前一样，把它拖到你的resources文件夹下。

顺便提一下，我制作这些声音效果使用一个非常不错的程序，叫做cfxr.不管怎么说，你旦你加入进去之后，把HeloWorldScene.mm中加入下面的代码：

接着，在init方法中加入下列代码：

最后，在tick方法的末尾添加下面的代码：

恩，终于完成了！你现在拥有一个使用Box2d物理引擎制作的breakout游戏了1

And there you have it – your own simple breakout game with Box2D physics!

给我代码！

这里是本系列教程的完整源代码。

何去何从？

很明显，这是一个非常简单的beakout游戏，但是，你还可以在此教程的基础上实现更多。我可以添加一些逻辑，比如打击一个白色块就计一分，或者有些块需要打中很多下才消失。或者你也可以添加新的不同类型的block，并且让paddle可以发射出激光等等。你可以充分发挥想象。

如果大家有什么问题可以提出来，大家一起讨论解决！如果有什么新的发现的，也欢迎贴出代码来，大家一起学习下！

PS:译者水平有限，如果有翻译的不好，或者翻译错误的，希望大家在看的时候给我指出来。谢谢！