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

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

发布时间：2012-03-15 16:01:29  Tags： Cocos2D & Box2D, LevelHelper, 《Jetpack Joyride》, 动态元素

作者：Bogdan Vladu

前面我们已经制作出带有背景美工元素的可行关卡（第1部分详见此处）。

在第2部分中，我们将着眼于添加游戏活动元素，包括激光、硬币、飞行角色及初始触碰活动等。

要继续本教程，你需持有我们第1部分谈到的RocketMouse项目内容。

Jetpack Joyride from raywenderlich.com

入门指南

制作《Jetpack Joyride》游戏的下一步是，添加可供玩家直接互动的游戏元素：激光和硬币。添加这些元素也是学习如何基于LevelHelper落实动画和激光的绝佳方式。

由于我们希望激光间断运作，所以我们需要将其制作成动画效果。至于硬币，我们希望把握玩家同其互动的时间点，但我们不希望玩家弹开它们。要做到这点，我们需要赋予其传感能力。

把握动画和触碰反应基本要素后，我们会将话题转移至游戏的其他元素，包括游戏玩家。我们将学习如何创造标签，追踪触碰活动，然后将其同若干真实代码整合。

在开始内容前，请打开你的当前LevelHelper项目，将关卡状态设置成level03。在进行此过程时，将这一新关卡添加至Xcode项目中，按照下列操作更新代码，将关卡状态设置成level 3：

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

着手动画元素：添加激光

我们对于玩法动画元素的运用相当简单。当玩家同激光接触时，我们只需测试动画帧所处位置。若动画帧处于激光关闭状态，玩家就不会有性命之忧，如果处于激光开启状态，玩家就会死亡。

要创造激光动画，我们需要查看LevelHelper右侧的图像列表，右击其中的一个激光图像。然后在菜单中选择“Open SpriteHelper scene”。

openSHSceneFromSpritesList

SpriteHelper会呈现正确场景。转换至Animation版块，点击Add Frame。这一操作将给动画添加两个精灵。

通过点击上下箭头，以正确顺利安排游戏画面。将速度设定成3，选中Start At Launch和Loop Forever选项。

SHFirstAnimation

完成这些后，点击Command-S保存画面。

现在我们回到LevelHelper，着手处理我们刚刚创建的动画。此时你会发现Animations版块已被添加至LevelHelper中，如下图所示。

animationsInLH

激活动画有两种方式。我将逐一进行陈述。

第一种方式就是将动画拖到关卡（游戏邦注：这和操作精灵的方式类似）。

dragAnimationInLevel

第二种方式是，将动画同已存在于关卡中的精灵连接起来。在这种情况下，我会将动画添加至激光画面中。

spriteSectionAnimExample

现在进入精灵版块。我们还没有将激光精灵添加至关卡中，所以现在要将列表中的一个精灵拖到关卡中，要选定此精灵。然后跳到General Properties版块，从列表中选择激光动画。

spriteSectionAnimExample 2

继续在关卡中添加激光，直到达到满意的危险系数。你可以基于选择精灵时出现的控键旋转和调节laser。

我的关卡现在呈现如下样式：

levelWithLasers

若查看laser形状，你会发现精灵现在呈现四方形模式。

laserShapeFull

就我们的游戏来说，我们希望老鼠只在击中真正的激光时死去，所以我们不妨缩小模型的尺寸。

要做到这点，我们可以采用定义小猫和小狗形状的方式，或者我们可以通过预定义的数值修改Physics菜单下的Shape Border属性。现在你已知道如何通过位点创造物件形状，下面就来尝试第二种方式。

在LevelHelper的Images版块中选择laser1图像，然后右击，选择Open SpriteHelper Scene。

当呈现SpriteHelper scene时，点击“laser1”精灵。由于激光是个动画，我们需要修改动画首个帧数的物理属性——在此就是指“laser1”精灵。动画包含第一个帧数的物理属性。

选中laser1后，进入Physics菜单，在Shape Border数值中输入70和40。精灵的最终模型大小是原本尺寸减去你所输入的数值。你可以在画面上看到视觉表征。

laserShapeDefine

回到LevelHelper，我们会看到所有laser都被更新为正确形状。

现在选中所有laser，将它们添加到我们的parallax（游戏邦注：影视编辑软件）。按比例输入1和0。

保存关卡，若创建和运行游戏后你会发现，它现在具备动态laser。

AnimatingLasers

处理传感设置：添加硬币

现在就轮到硬币。记住，我们想要创建硬币传感器，这样老鼠就能够直接穿过它们，不会弹开，但我们依然能够察觉到触碰活动的发生。

要创造硬币传感器，从LevelHelper中的精灵列表中选择硬币精灵，右击，然后选择Open SpriteHelper Scene。

openCoinSHScene

开放SpriteHelper scene后，选择硬币精灵，选中Physics菜单中的Is Sensor、Is Circle和Can Sleep选项。然后保存画面。

* Is Sensor：让身体触发触碰活动，但不呈现触碰反应

* Is Circle：让身体的形状呈现圆形模式

* Can Sleep：加速物理元素的模拟过程

setCoinSensor

现在将硬币精灵添加到关卡，将其放在你认为合适的位置。通过Clone Tool复制硬币，基于你青睐的位移方向。

cloneToolDirection

现在我的关卡呈现如下模式：

levelWithCoins

将硬币添加至parallax，将比例调成1和0，然后保存关卡。编辑和运行你的项目，现在你拥有硬币元素。

AddingCoins

添加玩家元素

现在我们拥有包含基本要素的不错关卡，下面就来创建玩家角色及其相应的动画内容。

打开SpriteHelper，进入File\New创建空的精灵工作表。然后在Finder中点击目录（游戏邦注：这里保存游戏的美工元素）。在此你需要将所有老鼠精灵和火箭火焰拖到SpriteHelper窗口。

mouseAnimationDrag

现在我们需要通过刚输入的美工元素创建单个画面。这是创建动画前的必要步骤。LevelHelper和SpriteHelper支持的所有引擎都将动画帧数视作图像文件的组成元素。

现在切换到Sheet Editor菜单，取消选定Crop，因为我们不希望改变老鼠动画的帧数。点击Pack Sprites，将所有精灵都分配到精灵表单中。

packMouseFrames

然后，切换到SpriteHelper的Animation版块。我们将在此创建所有必要的动画内容，和我创建laser的过程一样。

运用你先前学到的技巧，创建包含下述属性的5个动画内容。

若你忘记如何创建动画，点击+按键，双击进行重命名。然后选定动画的规定帧数，设定速度，记得给需要进行循环的动画选定Loop Forever。

1）动画名称：mouseRun

Loop Forever: YES

Speed: 0.400（默认）

Repetition: 1.000（默认）

Frames: rocketmouse_1_run, rocketmouse_2_run, rocketmouse_3_run, rocketmouse_4_run

mouseRun

2）动画名称：flame

Start At Launch: YES

Loop Forever: YES

Speed: 0.400（默认）

Repetition: 1.000（默认）

Frames: rocket_flame1, rocket_flame2

rocketFlame

3）动画名称：mouseFly

Start At Launch: YES

Loop Forever: YES

Speed: 0.400（默认）

Repetition: 1.000（默认）

Frames: rocketmouse_5_fly

mouseFly

4）动画名称：mouseDie

Start At Launch: YES

Loop Forever: NO

Speed: 0.400（默认）

Repetition: 1.000（默认）

Frames: rocketmouse_7_die, rocketmouse_8_die

mouseDie

5）动画名称：mouseFall

Start At Launch: YES

Loop Forever: NO

Speed: 0.400（默认）

Repetition: 1.000（默认）

Frames: rocketmouse_6_fall

mouseFall

完成这些操作后，点击Command-S，保存画面。在Save对话框中，点击Xcode项目Resources文件夹中的Images文件，将画面保存为“mouse”。

saveMouseImage

回到LevelHelper，我们将在Animation区块中找到所有新创建的动画内容。

将mouseRun动画拖到主页面（有红色边界的页面），然后置于页面左侧。

然后拖动火焰精灵，将其放置在老鼠背后的红色坦克下。

最终画面如下：

mousePlacement

仔细观察你会发现，火焰精灵位于红色坦克之上。不妨将其放在坦克之后，这样火焰看起来会更像是由坦克产生的。完成这一操作后，选择火焰精灵，然后在General Properties中将Z Order调成-1。

zOrderOnFlame

若你此时通过Scene Tester运行关卡，你可能会看到老鼠，但也可能没看到。

这是因为精灵是通过成批节点进行渲染。要将老鼠放在关卡其他精灵顶部，我们需要改变成批节点的Z Order。

切换到LevelHelper的Images区块，双击mouse.png的Z Order字段。输入数值4。

我们希望玩家把握所有内容，我们很快将添加更多图片。这就是为什么我们要在这里设置一个更大的数值。

batchZOrder

现在运行关卡，你会看到老鼠在画面中奔跑，但没有发生任何触碰活动。

它其实有何小狗和小猫发生触碰，但由于老鼠和其他物件都处于静止状态，所以什么也没有发生。

现在是时候把老鼠和火焰精灵设置成动态模式。打开老鼠的SpriteHelper情境：

openMouseSH

然后选择所有精灵，将其设置成动态模式。我们不希望老鼠在和其他精灵触碰时发生旋转，所以还要选择Fixed Rotation option。

makeMouseDynamic

至于两个火箭火焰精灵，我们还需要勾选Is Sensor选项。这是因为随后我们将把火焰和火箭坦克结合起来。

flameProperties

完成操作后保存火箭坦克。

再次运行Scene Tester，我们将会看到老鼠在画面中掉落。这是老鼠对地心引力所做出的反应。不妨让它继续停留在屏幕上。

点击Physic Boundaries按键。

pressOnPBoundary

在Physic Boundaries窗口点击Create。

createPBoundary 1

我们现已创建边界，但想要对其进行编辑，使其出现在地板中间的老鼠的下方，老鼠会在这块区域中行走。点击Physic Boundaries窗口中的Edit。

pressOnEditBoundary

现在你会在物理边界的拐角处看到4个红色控键。你可以拖曳任何底部控键移动边界，确保边界始终处在老鼠的脚下。

dragPBoundaryHandle

你将看到类似的画面：

correctHandleBoundary

若你对物理边界没有什么意见，点击Editing按键，中断编辑过程。

stopEditingPBoundary

在Scene Tester中运行关卡，你将看到老鼠和小猫&小狗发生触碰，然后继续停留在屏幕中，但这里还存在另一问题。

这次，火焰在屏幕中落下，它有传感设置，所以不会和任何物体触碰，不会附着于老鼠的身体。但我们可以通过创建远距离接合点，将火焰和老鼠联系起来。

现在切换到LevelHelper中的Joints版块，选择列表中的Distance Joint，点击绿色+按键。

createDJoint

现在我们可以选择接合点要连接的精灵。

选择列表中的接合点，然后是Body A的属性，点击圆形图标。然后将老鼠拖至火焰精灵。当文本显示rocket_flame_1时，放开老鼠。

connectJointFlame

现在在Body B中重复相同操作，但这次要选择老鼠。

connectJointMouse

现在将接合点的定位点拉得更近些。

在接合点属性中选择A，拖曳显示火焰精灵的手柄，将锚点置于坦克之上。

jointAnchorA

在其他定位点中重复这一操作。选择锚点B，拖曳把手，将此锚点置于其他定位点的旁边。

jointAnchorB

若你在Scene Tester中运作关卡，你会看到火焰现在附着于老鼠身上。

现在我们已完成进入编码工作前所需的所有内容。

创建标签，执行触碰活动

要执行精灵间的触碰活动，我们需要记录同类精灵与其他类型精灵的触碰活动。

我们需要通过标签将精灵分类。所以所有有关小狗的精灵都会被标上“DOG” ，而所有涉及小猫的精灵都会被标上“CAT”。

要创建这些标签，需在LevelHelper中点击Define Tags按键。

defineTagsButton

在Define Tags窗口中，给新标签设定名称，点击Add按键创建新标签。需要创建如下标签：DOG、CAT、LASE、COIN和PLAYER。

pressAddTag

明确定义标签后，我们需要将这些标签分配到各个精灵中。

选择左边精灵列表中的所有小狗精灵。然后在General  Properties中将这些DOG标签分配到上述精灵。

assignDogTag

然后在所有精灵中重复这一操作：将PLAYER标签分配至老鼠精灵中，CAT分配至各小猫精灵，LASER分配到各种激光精灵，COIN分配到硬币精灵中。

完成这些操作后，以Command-S保存关卡。

编写游戏逻辑的代码

我们现在准备着手编写游戏代码。所以我们重新回到Xcode，打开我们的项目，开始真正的趣味之旅。

首先，确保将新的美工元素（游戏邦注：即mouse.png）纳入其中。此时的资源文件夹将呈如下模式：

newArtAndLevels

为控制parallax的运作，让玩家能够进行跳跃，我们需要设定若干指示LevelHelper物件的变量。将HelloWorldScene.h的这些代码添加至类别定义中。

LHParallaxNode* paralaxNode;
LHSprite*   player;
b2Body*     playerBody;

LHSprite*   rocketFlame;

随后在类别定义之外，即@end和+(id)scene之间，添加下列方法标记（method signature）：

-(void) retrieveRequiredObjects;

在HelloWorldScene.mm中定义新方法（可以选择任何适当位置，但要确保其处在类别定义之中）。我将其放置于初始方法之后。

-(void) retrieveRequiredObjects
{
//Retrieve pointers to parallax node and player sprite.
paralaxNode = [lh paralaxNodeWithUniqueName:@"Parallax_1"];
NSAssert(paralaxNode!=nil, @”Couldn’t find the parallax!”);

player = [lh spriteWithUniqueName:@"player"];
NSAssert(player!=nil, @”Couldn’t find the player!”);

playerBody = [player body];
NSAssert(playerBody!=nil, @”Error taking the body from the player LHSprite.”);

rocketFlame = [lh spriteWithUniqueName:@"flame"];
NSAssert(rocketFlame!=nil, @”Couldn’t find flame sprite!”);

[rocketFlame setVisible:NO]; //You can do it in LH, but I do it here so you guys can see it in LH
}

这里我们将把目光转至parallax，赋予LevelHelper parallax标识名称。

parallaxName

再来就是玩家精灵，也是赋予它们标识名称。若标识名称原先没有修改，要将其改成“player”，如下面的截图所示。

playerName

同样，你得把火焰的标识名称改成“flame”，以同代码相匹配。

若你通过spriteWithUniqueName查看精灵，你将得到一个LHSprite*实例，这是源自CCSprite的一个类别。通过此LHSprite*实例，我们将指示器转移到玩家的Box2d身体，因为我们随后要这一身体进行跳跃。

现在我们转移到火焰精灵，将此画面隐藏起来。只有当玩家飞起来的时候，我们才会看到此火焰。

现在我们已完整定义此新方法，不妨将其称作：

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”level03″]; // or level02 if you never changed it

[lh addObjectsToWorld:world cocos2dLayer:self];

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

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

// Add this
[self retrieveRequiredObjects]; // Retrieve all objects after we’ve loaded the level.

编辑和运行代码，若火焰运行时无法为我们所见，那么操作就圆满完成。

MouseInvisibleFlame

让玩家在空中飞行

现在我们重新取回加载关卡中的玩家，让其在空中飞行。

在HelloWorldScene.h类别定义中添加如下内容：

float  playerVelocity;
bool   playerWasFlying;
bool   playerShouldFly;

通过这一操作，我们让老鼠在用户触摸屏幕时飞入空中。

在HelloWorldScene.mm中将触控功能替换成如下内容：

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

playerVelocity = 0.5f;
playerShouldFly = true;
[rocketFlame setVisible:YES];
[player startAnimationNamed:@"mouseFly"];
}

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{

}

-(void) cancelPlayerFly
{
playerShouldFly = false;
[rocketFlame setVisible:NO];
playerWasFlying = true;
playerVelocity = 0.0f;
}
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[self cancelPlayerFly];
}
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
[self cancelPlayerFly];
}

在ccTouchesBegan方法中，当用户触控屏幕时，玩家就会开始飞翔，火箭的火焰就会进入我们的视野，飞翔动画就会出现在玩家精灵中。

接着我们就会在玩家的LHSprite*实例（游戏邦注：这由我们通过retrieveRequiredObjects方法取回）中启动“mouseFly” 动画。

当玩家停止触控屏幕，或取消触控时，我们就会通过调用“cancelPlayerFly”新方法让玩家停止飞翔。然后我们会继续隐藏火焰，因为玩家已不在空中飞翔。

但这远远不够。我们设定呈现玩家飞翔的时间，但我们没有落实真实的飞行操作。这需要我们在“tick”方法末尾添加如下内容：

if(playerShouldFly)
{
playerBody->ApplyLinearImpulse(b2Vec2(0, playerVelocity), playerBody->GetWorldCenter());

playerVelocity += 0.01f;

if(playerVelocity > 1.5f)
playerVelocity = 1.5f;
}

这里，我们会判断玩家是否应该飞翔，及测试操作是否正确，我们在老鼠的box2d身体中施加水平线性冲量。

然后我们会将速率变得越来越快，这样玩家就仿佛真的飞离地面，而且速度越来越快。

若玩家的速度到达一定程度（1.5），我们会停止加速。

编辑和运行游戏，现在你可以通过触控屏幕让老鼠在空中飞翔。

FlyingMouse

（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）