使用Cocos2D和Box2D制作《Jetpack Joyride》（1） LevelHelper

使用Cocos2D和Box2D制作《Jetpack Joyride》（1）

发布时间：2012-03-13 09:47:12 Tags：LevelHelper,SpriteHelper,Xcode项目,《Jetpack Joyride》

作者：Bogdan Vladu

在本系列教程中，我们将使用Cocos2D和Box2D来制作一款类似于《Jetpack Joyride》的游戏。

如果你还没有玩过《Jetpack Joyride》，你应该先试玩下，这是款相当精致有趣的游戏，而且是免费的！

Jetpack Joyride from raywenderlich.com

你可以单单使用Cocos2D来制作这款游戏，但这需要花费大量的时间。为简化开发过程，我们将在下文中介绍使用两个工具：LevelHelper和SpriteHelper。

如果你对这两个工具不甚熟悉，以下是简单的介绍：

1、LevelHelper是个让关卡制作更加简单的工具。你只需要将精灵拖放到场景上即可！

2、SpriteHelper是个可用来简单快捷地为游戏制作精灵层和物理形状的工具。

我们将要制作的是个复杂的游戏，要做的事情很多，所以本系列教程将分为4个部分。本文是第1部分，我们要先花点时间来设置LevelHelper。然后，我们将制作一个带有持续视差滚动的基本关卡，学习如何使用SpriteHelper来添加和修改艺术。

到本系列教程结束时，你不仅将获得使用这些工具的宝贵经验，而且还会得到令人兴奋的高端游戏！

本教程假设你已经对Cocos2D和Box2D较为熟悉。如果你不熟悉这两个游戏框架，你应当先查看Cocos2D和Box2D的相关教程。

开始

首先，你需要下载下列内容：

1、LevelHelper和SpriteHelper

2、游戏所需的艺术，由Vicki Wenderlich制作

3、LevelHelper的Xcode 4模板

注：LevelHelper支持最新版Box2D，但Cocos2D中整合的是旧版Box2D。使用LevelHelper模板会使你的开发更加容易，因为它预整合了最新版Box2D。如果你想要使用普通Cocos2D模板，自行整合最新版Box2D，可以查看官方LevelHelper Cocos2D/Box2D Documentation中的指导。

安装LevelHelper模板

首先，确保你已经安装了Cocos2D 1.X模板（游戏邦注：不是Cocos2D 2.X）。如果你已安装的是Cocos2D 2.X模板，需要从Cocos2D下载页面下载1.X模板，然后重新安装模板。如果你以后需要使用Cocos2D 2.X模板，你可以再次重新安装。

接下来，解压Cocos2dBox2dXCode4Template.zip。你将看到如下文件夹结构：

templateFolderStructure

点击桌面空白处，显示菜单栏。在菜单栏中选择“前往”：

go Menu 1

在“前往”菜单显示时，按住Option（游戏邦注：或Alt）键，这样就能看到“库”文件夹。很好用的技巧，不是吗？点击继续。

现在，你应当可以看到电脑上的“库”文件夹。“库”的路径为/（你的电脑名）/用户/（你的用户名）/库。

go Menu Option Key

现在，导航至Developer/XCode/Templates/Cocos2D。将解压Cocos2dBox2dXcode4Template.zip文件所得的两个文件夹复制到这个文件夹中。

所得文件夹结构应当如下图所示：

copy Folders In Cocos2d

这样就表示你已经成功安装模板！让我们来尝试下这个模板。

copied Folders

创建Xcode项目

打开Xcode，从主菜单中选择“文件\新建\新项目”。

xcode New

选择“iOS\cocos2d\LevelHelper_With_Cocos2d_And_Box2d”模板，点击“下一步”。

choose XCode Template

在接下来的对话框中，将你的项目命名为“RocketMouse”（游戏邦注：不含空格），再次点击“下一步”。

Name Rocket Mouse

编译运行项目，你就会看到用LevelHelper制成的范例关卡：

Level Helper Sample

不久之后，你就会知道自行创建这些关卡是件很容易的事情！

清除不需要的内容

我们从这里就可以开始扩展模板代码，但是为了让你更好地理解具体的运转方式，我们将从头开始。

首先，我们要先从模板代码中清除所有不需要的东西，分为两个步骤：清除资源和清除代码。

阅读下面的内容，自行清除代码。如果你不想这么做，也可以跳过这些步骤，直接下载已经清除完成的项目。

1、清除资源

在Xcode中导航至“资源”文件夹，选择位于“图片”和“关卡”文件夹中的所有文件。

all Files

现在，点击右键选择“删除”。

delete Files

在弹出窗口中，选择“删除”。

delete Popup

2、清除代码

导航并点击HelloWorldScene.h，删除“b2MouseJoint* mouseJoint”这一行；

delete Header Code

现在，导航并点击HelloWorldScene.mm。在初始化方法中，删除评论代码和通知代码，这两个代码我们都不需要。

commented Code And Notif

删除用来移除通知的方法。

notif Methods Removed

删除所有触碰方法的内容。

touch 1

touch 2

touch 3

删除加速计代码。

accelerometer

最后，从dealloc方法中删除关节鼠释放代码：

delete DeallocJoint

注：此时项目可以编译，但是运行时会看到错误提示，因为没有可加载的关卡。别担心，我们马上就会创建一个关卡！

检查已清除代码

如果你查看HelloWorldScene.m，你会发现那里还残存些许代码。这段代码的作用是创建Box2D世界，设置Box2D调试图纸，在更新循环中运行Box2D模拟，更新精灵使之与相关Box2D实体相符。

在初始化中，还包含些许LevelHelper设置代码：

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”bezierTile”];

//creating the objects
[lh addObjectsToWorld:world cocos2dLayer:self];

if([lh hasPhysicBoundaries])
[lh createPhysicBoundaries:world];

if(![lh isGravityZero])
[lh createGravity:world];

首行代码用初始关卡来初始化LevelHelper。接下来数行使得LevelHelper可以向Box2D世界中添加对象以及根据关卡设置创建物理界限和万有引力。

花点时间浏览HelloWorldScene.mm，确保你理解其中的基本想法。我们将从这里开始游戏的构建！

准备LevelHelper

让我们在Xcode项目“资源”文件夹中创建两个新文件夹。事实上我们并不需要这么做，但保持项目组织结构完善会让我们接下来的工作更加容易！

在取景器中导航至Xcode项目，打开“资源”文件夹，创建两个名为“图片”和“关卡”的子文件夹。重点：在取景器中创建这些文件夹，而不是Xcode！

结果应当如下图所示：

resource Folders

创建LevelHelper项目

现在，项目设置完成，我们可以用LevelHelper来开始关卡的制作！

从版本1.4开始，LevelHelper将保持项目中内容的条理性。这意味着，关卡文件属于项目的一部分，而不是像以往那样是单独的文件。

那么，让我们用LevelHelper来创建新项目。将它打开，选择“文件\新项目”：

LH New Project

屏幕上会出现新的层窗口。在“项目名称”区域，输入“RocketMouse”，这便是我们项目的名称。“屏幕大小”保持默认值“iPhone Landscape (480×320)”。

注：如果你希望游戏能够支持所有iPhone和iPad型号，可以选择兼有横向或纵向的iPhone选项。LevelHelper会自动在iPhone2G/3G/3GS上使用SD，在iPhone4/4S和iPad1/iPad2上使用HD。

如果你希望游戏只适用于iPad，可以使用iPad模板，在SpriteHelper中创建精灵层时去除“保存SD”选项。

在iPad中，还有个不延伸图像的选项。这个选项不适用于本教程，因为我们将使用持续视差滚动。

在“SpriteHelper场景和图片文件目录”下，选择你刚刚在“资源”文件夹中创建的“图片”文件夹，点击“打开”。

LHSelect Images Folder

在“源代码路径”下，从RocketMouse项目文件夹中选择“RocketMouse”文件夹。这个文件夹中包含“LevelHelper”文件夹。点击“打开”。

LH CodeFolder

这个设置告诉LevelHelper要在何处自动生成代码。

在“引擎”下选择“Cocos2d With Box2d”。你选择的是希望LevelHelper自动为你生成的代码。在这个教程中，我们将使用带有Cocos2d With Box2d，但是你可以看到LevelHelper也支持其他多种引擎和配置。

确保“需要时自动生成代码”选项已选定。这就等同于告诉LevelHelper在代码更新时或向项目添加新便签后自动生成代码。

LHCodeSetting

在“LevelHelper场景目录”下，选择你刚刚在“资源”文件夹中创建的“关卡”文件夹，点击“打开”。

LHSelectLevelsFolder

最终，“项目”设置窗口应当如下图所示：

LHProjectSettings

注：LevelHelper中的每项主功能旁都有个“？”按钮。点击可以观看解释该功能的视频。

接下来，点击“创建新项目”按钮。屏幕上会出现新窗口，让你将项目保存成文件。

将新文件保存在与Xcode项目相同的文件夹中。

LHSaveProject

现在，LevelHelper窗口应该如下图所示：

emptyProject

但是，我们还没有图片，窗口中什么都没有！该是开始添加艺术内容的时候了。

向LevelHelper项目添加艺术元素

如果要添加艺术，我们需要使用SpriteHelper，所以先将它打开。

接下来，导航到本教程所使用的艺术包的存放处。选择以下截图中所显示那些文件（游戏邦注：不是选择所有文件，只选择那些被选中的文件），将它们拖动到SpriteHelper中。

dragImagesInSh1

在右侧的层编辑器窗口中，取消“剪裁”选项的选定。“剪裁”会移除精灵上的透明空间，但是在某些动画中，精灵需要使用到透明度，所以我们不希望编辑器对透明度做出修改。

对于动画制作来说，取消“剪裁”选项总是项较好的选择。

接下来，点击层编辑器窗口底部的“打包精灵”按钮。

unselectCropAndPack 1

结果场景应该会与下图类似（游戏邦注：精灵的打包可能会有所不同）：

将场景保存到“资源”文件夹中的“图片”文件夹中。选择“文件\保存为”。

SHResult 1

在“保存”对话窗口中，将场景命名为“对象”，点击“保存”。

SHSaveAs

如果你现在查看LevelHelper窗口，你会看到艺术已经自动添加完成。

SaveAsImagesName

LevelHelper会跟踪“关卡”和“图片”文件夹中发生的所有变化，就像我们在创建项目时告知它一样。你每次添加、移除或修改这些文件夹中的文件，LevelHelper都会自动更新其内容。

LHUpdatesContent

注：如果你没有在LevelHelper中看到艺术内容，点击位于项目设置上方的栏目，查看“图片”文件夹的路径是否正确或者是否含有空格。

创建基础关卡

我们先来创建带有滚动地板和墙纸背景的关卡。

首先，我们要创建一个从右向左移动的持续视差滚动。要实现这个目前，就需要确定视差的大小。你可以根据自己的需要来设置。

让我们来将游戏世界的大小设为8个屏幕。点击“游戏世界大小”按钮。

PressGameWorldSize

在“宽度”空格中，输入3840，数值来源于8X480（游戏邦注：iPhone屏幕的宽度）。

gwWidth

现在，让我们来创建背景。将“bg”精灵拖动到关卡中，放置在首个屏幕的起始点。首个屏幕应当是位于左侧，红色边界所示区域。

dragFirstSprite

现在，我们要复制精灵，这样它才能够覆盖所有的屏幕。选中背景精灵，在图片下方将克隆方向设置为右侧。

然后点击绿色的“+”标志。这便是克隆按钮。继续点击该按钮，直到背景精灵覆盖全部8个屏幕即可。

注：在LevelHelper中，拖动关卡时你可以按住ctrl来滚动关卡，滚动鼠标滚轴可以缩放关卡视图。

cloneSpriteWithDirection

结果如下图所示：

clonedBackground

让我们将这些图片添加到持续视差滚动中。导航至“视差”标签（游戏邦注：显示字幕“P”的标签），点击“新视差”按钮。

navigateToParallaxAndCreateNew

在选中视差时，勾选“持续滚动”选项。现在，选择关卡中所有的背景精灵，点击视差版块中的“添加已选场景精灵”按钮。

addSpritesToParallax

对于我们的持续视差滚动，我们还需要进行些许调整。首先，将“速度”预设为2.5（游戏邦注：随后将根据鼠标的移动速度来更改这项数值）。确保“方向”设定为“从右到左”。

现在，选择视差列表中的所有精灵，将“移动比率”设为“1”和“0”。这个比率和速度决定了精灵移动通过视差的速率。

setupParallax

在现在这种情况下，精灵的移动速率为1*2.5（游戏邦注：即比率*速度）。如果我们想要让其他精灵以不同的速率移动，可以对比率进行相应的修改（游戏邦注：比如0.4*2.5）。

如果你现在运行“场景测试器”，它就会移动持续视差！

runSceneTester

保存这个关卡，将其在我们的Xcode项目中运行。在LevelHelper中，选择“文件\保存关卡为”。

saveFirstLevel

在对话框中，输入“level01”，点击“保存”。

saveFirstLevelDialogue

通过保存关卡，我们使得LevelHelper更新了“关卡”版块。导航至“精灵”版块，然后前往“关卡”查看关卡文件。双击关卡可以将其在LevelHelper中打开。

seeTheLevelInLH

现在，让我们回到Xcode。先打开你的“RocketMouse Xcode”项目。右键点击或双击Xcode中的“资源”文件夹，选择“添加文件至RocketMouse”。

addFilesToRocketMouse

屏幕上会出现新窗口。导航至硬盘上的“资源”文件夹，选择“图片”和“关卡”两个文件夹。然后点击“添加”按钮将它们复制到Xcode的“资源”文件夹中。

AddImagesAndLevelsToXcode

Xcode中的新“资源”文件夹应当如下图所示：

xcodeIncludedImagesAndFolders

现在，导航到Xcode中的HelloWorldScene.mm。选择并寻找加载关卡的代码。

lookForLevelLoading

将本部分代码中的关卡名替换为你的关卡名，也就是“level01”。新代码如下所示：

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”level01″];

现在，编译运行。

compileAndRun

这样就实现了关卡的运行，很简单，不是吗？但是，当运行关卡时，你会发现如下粗糙内容：

artifacts

导致这种情况的原因是，互不重叠的像素精灵持续性地紧接移动。如何解决这个问题呢？Cocos2d正好可以派上用场。

导航到libs/cocos2d/ccConfig.h：

fixArtifactsCocos2dConfig

在ccConfig.h中，在文件顶端寻找以下这3行代码，位置在第54行左右：

#ifndef CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
#define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 0
#endif

将“0”修改为“1”：

#ifndef CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
#define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1
#endif

现在，当你运行项目时，就不会看到任何瑕疵了。

创建完整关卡

让我们回到LevelHelper，添加剩余的艺术内容，这样我们才能够获得最终的完整关卡。

将小书架拖动到主屏幕上。调整位置，直到你对它与背景精灵的相对位置感到满意。

在选中关卡中的书架精灵时，点击“克隆和排列”按钮，这样才能克隆出多个同样的精灵。

cloneAndAlignTool

将克隆的数值设为“7”，将补偿X设为“500”，补偿Y设为“0”。

你应当能够看到一系列蓝色或紫色的轮廓，显示精灵在关卡中的位置。当你对结果感到满意时，点击“制造克隆”按钮。

注：右键点击任何分档器按钮都会将相关区域重置为默认值。

makeClones

现在，让我们重复这个过程，添加其余的艺术内容。

添加大书架、猫、狗和窗户精灵，根据你的偏好来设定其位置。

我喜欢将够放在窗户下方，因为狗很喜欢望向窗外。我将猫放置在老鼠洞旁边，原因显而易见。我将书架随机放置在关卡场景中。

我设计的最终关卡如下图所示：

finalLevel

如果你激活了LevelHelper中的“显示多边形形状”选项，你就会看到所有精灵上面都显示有物理形状。

ShowPolygonShapes

在早期版本中（游戏邦注：LevelHelper 1.3），我们需要要禁用这种行为。现在，我们要启用它，因为我们在SpriteHelper场景中的更新也会导致关卡文件的更新。

如果我们在每个精灵中都选择“由SpriteHelper处理”，那么我们对SpriteHelper文件的每次改变都会直接显示在关卡中。我们不需要重新打开关卡或修改之前添加到关卡中的精灵。

HandledBySH

幸运的是，“有SpriteHelper处理”是个默认设置，所以激活无需进行任何操作。让我们打开SpriteHelper文件，修改有关精灵的设置。

要实现这个目标，我们可以先打开SpriteHelper，然后再打开文件。但是，有个更加简单的方法：

我将分步解析这个过程，这样你就能够学到所有的技巧。在LevelHelper界面左侧的精灵列表中，选择精灵后在上面点击右键。现在，选择“显示SpriteHelper场景”。

selectSpriteAndShowScene

这样，你就会看到SpriteHelper场景版面，已经为你选择了相应的场景文件。这个技巧很有用，因为有时很难想起精灵来自哪个场景。

现在，在场景上点击右键，选择“在SpriteHelper中打开”。

openInSH

这样，所需的场景便会在SpriteHelper中打开，我们可以在这里选择想要修改的精灵，在物理标签下选择“No Physics”。

setNoPhysicsInSH

确保在修改完成后保存场景。

现在，如果你回到LevelHelper，你会看到物理形状已经消失。通过Command+Shift+S将关卡另存，命名为“level02”。

现在，如果你运行“场景测试器”（游戏邦注：按“测试关卡”按钮），你会看到只有背景精灵会移动。

让我们将其他精灵添加到视差中。要实现这个目标，首先要选择除背景精灵外已经添加到视差中的所有精灵。

selectOtherBackgroundSprites

现在，前往“视差”标签，选择你的视差，添加所选的精灵。

从视差的精灵列表中选择精灵，将“移动比率”设为“1”和“0”。

addOtherSpritesToParallax

现在，如果你运行“场景测试器”，就会发现所有的精灵都会持续以相同的速度移动。

你会注意到，狗和猫精灵的形状对象都是基本的四边形。

dogQuadShape

让我们为狗和猫设置形状描绘，这样它们就能够以正确的物理行为移动。

要实现这个目标，选中狗精灵，然后使用之前介绍的方法打开SpriteHelper场景并导航到正确的场景文件中。

在SpriteHelper中，选择狗精灵，导航到“物理”版块，点击“创建形状”按钮。

selectDogForShape

现在点击和描绘狗的外形形状，而后点击“完成”。

注：

在SpriteHelper中，你可以用两个手指在触控板上的滑动来平铺视图，或者按住Option键后用鼠标拖动。

使用触控板上的手势或鼠标滚轮可以缩放场景。

createShapeOnDog

注：点击“编辑形状”按钮可以修改形状，将其拖动到所需的点。点击形状线可以添加新的点。按住ctrl键并点击一个点，可以将这个点移除。

选中猫精灵，重复上述过程。完成后，保存场景。

现在，让我们来尝试下！回到Xcode中，右键点击“资源\关卡”文件夹，选中“添加文件至RocketMouse”，然后找到新的level02.plhs关卡。随后，将HelloWorldScene.mm中加载关卡的代码修改为：

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”level02″];

编译运行，现在你的关卡看上去显得更加有趣。

BasicLevel

结语

现在，我们已经将基础关卡制作完成！但是，最为重要的是，我们学到了许多有关LevelHelper和SpriteHelper中导航以及添加和修改艺术内容的技巧。

你可以直接下载此刻的项目文件。

在第2部分的教程中，我们将学习如何添加和使用动画和传感器。我们还要创建游戏中的玩家，开始使用标签，这是执行精灵间碰撞的首个步骤。换句话说，游戏中要开始产生动作内容了！

在第3和第4部分中，游戏会变得更加有趣。除了完全执行碰撞外，我们还将制作起跳和着陆动画，学习如何杀死玩家和重新开始游戏，创建和呈现得分系统，添加其他很棒的功能。

我希望你能够坚持阅读本系列教程！掌握基础内容总是很充满挑战性的，所以如果你能够掌握本文中的所有内容，应该向你表示祝贺！

游戏邦注：本文发稿于2012年1月17日，所涉时间、事件和数据均以此为准。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）