【Cocos2D系列】使用LevelHelper和SpriteHelper制作一款类似Jetpack Joyride的游戏教程(一)

作者:    发表于:    分类:iOS游戏开发   标签:, , , ,    抢沙发 热度

BBS.CHINAAPP.ORG 到ChinaApp与同行碰面,高质量APP运营交流社区ChinaApp( bbs.chinaapp.org)

Jetpack Joyride
这是由一位特殊的贡献者 Bogdan Vladu提供的教程, 他是一位居住在Bucharest, Romania的ios应用开发者和游戏开发者。

在本系列教程中,我们将使用Cocos2D和Box2D来制作一款类似于《Jetpack Joyride》的游戏。 (Prefer Corona? Check out the Corona version of this tutorial!)
如果你还没有玩过《Jetpack Joyride》,你应该 试玩下 – 这是款相当精致有趣的游戏,而且是免费的! :]
你可以单单使用Cocos2D来制作这款游戏,但这需要花费大量的时间。为简化开发过程,我们将在下文中介绍使用两个工具:LevelHelper和SpriteHelper。
如果你对这两个工具不甚熟悉,以下是简单的介绍:

  • LevelHelper 是个让关卡制作更加简单的工具。你只需要将精灵拖放到场景上即可!
  • SpriteHelper 是个可用来简单快捷地为游戏制作精灵层和物理形状的工具。

我们将要制作的是个复杂的游戏,要做的事情很多,所以本系列教程将分为4个部分。本文是第1部分,我们要先花点时间来设置LevelHelper。然后,我们将制作一个带有持续视差滚动的基本关卡,学习如何使用SpriteHelper来添加和修改艺术。
到本系列教程结束时,你不仅将获得使用这些工具的宝贵经验,而且还会得到令人兴奋的高端游戏!
本教程假设你已经对Cocos2D和Box2D较为熟悉。

开始

首先,你需要下载下列内容:
LevelHelper and SpriteHelper, 加入你还没有它们。
游戏所需的艺术素材,由Vicki Wenderlich制作, 你可以 在这里下载.
LevelHelper的Xcode 4模板.
注意: LevelHelper支持最新版Box2D,但Cocos2D中整合的是旧版Box2D。使用LevelHelper模板会使你的开发更加容易,因为它预整合了最新版Box2D。如果你想要使用普通Cocos2D模板,自行整合最新版Box2D。

安装LevelHelper模板

首先,确保你已经安装了Cocos2D 1.X模板(GDchina注:不是Cocos2D 2.X)。如果你已安装的是Cocos2D 2.X模板,需要下载1.X模板从Cocos2D下载页面 然后重新安装模板。如果你以后需要使用Cocos2D 2.X模板,你可以再次重新安装。
接下来,解压Cocos2dBox2dXCode4Template.zip。你将看到如下文件夹结构:
templateFolderStructure
点击桌面空白处,显示菜单栏。在菜单栏中选择“前往”:
goMenu1
在“前往”菜单显示时,按住Option(GDchina注:或Alt)键,这样就能看到“库”文件夹。很好用的技巧,不是吗?点击继续。
goMenuOptionKey
现在,你应当可以看到电脑上的“库”文件夹。“库”的路径为/(你的电脑名)/用户/(你的用户名)/库。
现在,导航至Developer/XCode/Templates/Cocos2D。将解压Cocos2dBox2dXcode4Template.zip文件所得的两个文件夹复制到这个文件夹中。
copyFoldersInCocos2d

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

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

创建Xcode项目

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

选择“iOScocos2dLevelHelper_With_Cocos2d_And_Box2d”模板,点击“下一步”。
chooseXCodeTemplate

在接下来的对话框中,将你的项目命名为“RocketMouse”(GDchina注:不含空格),再次点击“下一步”。
NameRocketMouse
编译运行项目,你就会看到用LevelHelper制成的范例关卡:
LevelHelperSample
不久之后,你就会知道自行创建这些关卡是件很容易的事情! :]

清除不需要的内容

我们从这里就可以开始扩展模板代码,但是为了让你更好地理解具体的运转方式,我们将从头开始。
首先,我们要先从模板代码中清除所有不需要的东西,分为两个步骤:清除资源和清除代码。
阅读下面的内容,自行清除代码, 如果你不想这么做,你可以 直接下载已经清除完成的项目 并且可以跳过这些步骤 :P
1) 清除资源
在Xcode中导航至“资源”文件夹,选择位于“图片”和“关卡”文件夹中的所有文件。
allFiles
现在,点击右键选择“删除”。

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

2) 清除代码
导航并点击HelloWorldScene.h,删除b2MouseJoint* mouseJoint;
deleteHeaderCode
现在,导航并点击HelloWorldScene.mm。在初始化方法中,删除评论代码和通知代码,这两个代码我们都不需要。
commentedCodeAndNotif
删除用来移除通知的方法。
notifMethodsRemoved
touch1
touch2
删除content 所有触碰方法的内容。
accelerometer
删除加速计代码。
deleteDeallocJoint
最后,从dealloc方法中删除关节鼠释放代码:
touch3

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

检查已清除代码

如果你查看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!
结果应当如下图所示:
resourceFolders

创建LevelHelper项目

现在,项目设置完成,我们可以用LevelHelper来开始关卡的制作!
从版本1.4开始,LevelHelper将保持项目中内容的条理性。这意味着,关卡文件属于项目的一部分,而不是像以往那样是单独的文件。
那么,让我们用LevelHelper来创建新项目。将它打开,选择“文件新项目”:
LHNewProject
屏幕上会出现新的层窗口。在“项目名称”区域,输入“RocketMouse”,这便是我们项目的名称。“屏幕大小”保持默认值“iPhone Landscape (480×320)”。

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

如果你希望游戏只适用于iPad,可以使用iPad模板,在SpriteHelper中创建精灵层时去除“保存SD”选项。
在iPad中,还有个不延伸图像的选项。这个选项不适用于本教程,因为我们将使用持续视差滚动。
Under “SpriteHelper scenes and image files directory,” choose the Images folder you just created inside the Resource folder, and click Open.
LHSelectImagesFolder
在“SpriteHelper场景和图片文件目录”下,选择你刚刚在“资源”文件夹中创建的“图片”文件夹,点击“打开”。
LHCodeFolder
这个设置告诉LevelHelper要在何处自动生成代码。
在“引擎”下选择“Cocos2d With Box2d”。你选择的是希望LevelHelper自动为你生成的代码。在这个教程中,我们将使用带有Cocos2d With Box2d,但是你可以看到LevelHelper也支持其他多种引擎和配置。
确保“需要时自动生成代码”选项已选定。这就等同于告诉LevelHelper在代码更新时或向项目添加新便签后自动生成代码。
LHCodeSetting
在“LevelHelper场景目录”下,选择你刚刚在“资源”文件夹中创建的“关卡”文件夹,点击“打开”。
LHSelectLevelsFolder
最终,“项目”设置窗口应当如下图所示:
LHProjectSettings

注意: LevelHelper中的每项主功能旁都有个“?”按钮。点击可以观看解释该功能的视频。
接下来,点击“创建新项目”按钮。屏幕上会出现新窗口,让你将项目保存成文件。
将新文件保存在与Xcode项目相同的文件夹中。

LHSaveProject
现在,LevelHelper窗口应该如下图所示:
emptyProject
但是,我们还没有图片,窗口中什么都没有!该是开始添加艺术内容的时候了。

向LevelHelper项目添加艺术元素

如果要添加艺术,我们需要使用SpriteHelper,所以先将它打开。
接下来,导航到本教程所使用的艺术包的存放处。选择以下截图中所显示那些文件(GDchina注:不是选择所有文件,只选择那些被选中的文件),将它们拖动到SpriteHelper中。
dragImagesInSh1
在右侧的层编辑器窗口中,取消“剪裁”选项的选定。“剪裁”会移除精灵上的透明空间,但是在某些动画中,精灵需要使用到透明度,所以我们不希望编辑器对透明度做出修改。
对于动画制作来说,取消“剪裁”选项总是项较好的选择。
接下来,点击层编辑器窗口底部的“打包精灵”按钮。
unselectCropAndPack1
结果场景应该会与下图类似(GDchina注:精灵的打包可能会有所不同):
SHResult1
将场景保存到“资源”文件夹中的“图片”文件夹中。选择“文件保存为”。
SHSaveAs
在“保存”对话窗口中,将场景命名为“对象”,点击“保存”。
SaveAsImagesName
如果你现在查看LevelHelper窗口,你会看到艺术已经自动添加完成。
LevelHelper会跟踪“关卡”和“图片”文件夹中发生的所有变化,就像我们在创建项目时告知它一样。你每次添加、移除或修改这些文件夹中的文件,LevelHelper都会自动更新其内容。
LHUpdatesContent
注意: 如果你没有在LevelHelper中看到艺术内容,点击位于项目设置上方的栏目,查看“图片”文件夹的路径是否正确或者是否含有空格。

创建基础关卡

我们先来创建带有滚动地板和墙纸背景的关卡。
首先,我们要创建一个从右向左移动的持续视差滚动。要实现这个目前,就需要确定视差的大小。你可以根据自己的需要来设置。
让我们来将游戏世界的大小设为8个屏幕。点击“游戏世界大小”按钮。
PressGameWorldSize
在“宽度”空格中,输入3840,数值来源于8X480(GDchina注:iPhone屏幕的宽度)。
gwWidth
现在,让我们来创建背景。将“bg”精灵拖动到关卡中,放置在首个屏幕的起始点。首个屏幕应当是位于左侧,红色边界所示区域。
dragFirstSprite
现在,我们要复制精灵,这样它才能够覆盖所有的屏幕。选中背景精灵,在图片下方将克隆方向设置为右侧
然后点击绿色的“+”标志。这便是克隆按钮。继续点击该按钮,直到背景精灵覆盖全部8个屏幕即可。

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

cloneSpriteWithDirection
结果如下图所示:
clonedBackground
让我们将这些图片添加到持续视差滚动中。导航至“视差”标签(GDchina注:显示字幕“P”的标签),点击“新视差”按钮。
navigateToParallaxAndCreateNew
在选中视差时,勾选“持续滚动”选项。现在,选择关卡中所有的背景精灵,点击视差版块中的“添加已选场景精灵”按钮。
addSpritesToParallax
对于我们的持续视差滚动,我们还需要进行些许调整。首先,将“速度”预设为2.5(GDchina注:随后将根据鼠标的移动速度来更改这项数值)。确保“方向”设定为“从右到左”。
现在,选择视差列表中的所有精灵,将“移动比率”设为“1”和“0”。这个比率和速度决定了精灵移动通过视差的速率。
setupParallax
在现在这种情况下,精灵的移动速率为1*2.5(GDchina注:即比率*速度)。如果我们想要让其他精灵以不同的速率移动,可以对比率进行相应的修改(GDchina注:比如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
在早期版本中(GDchina注:LevelHelper 1.3),我们需要要禁用这种行为。现在,我们要启用它,因为我们在SpriteHelper场景中的更新也会导致关卡文件的更新。
如果我们在每个精灵中都选择“由SpriteHelper处理”,那么我们对SpriteHelper文件的每次改变都会直接显示在关卡中。我们不需要重新打开关卡或修改之前添加到关卡中的精灵。
HandledBySH
幸运的是,“有SpriteHelper处理”是个默认设置,所以激活无需进行任何操作。让我们打开SpriteHelper文件,修改有关精灵的设置。
要实现这个目标,我们可以先打开SpriteHelper,然后再打开文件。但是,有个更加简单的方法:
我将分步解析这个过程,这样你就能够学到所有的技巧。在LevelHelper界面左侧的精灵列表中,选择精灵后在上面点击右键。现在,选择“显示SpriteHelper场景”。
”selectSpriteAndShowScene”

转载请注明:手机游戏开发社区 » 【Cocos2D系列】使用LevelHelper和SpriteHelper制作一款类似Jetpack Joyride的游戏教程(一)

我来说说»

*

*

如果觉得dApps靠谱,请按Ctrl+D(加入收藏夹)
取消