游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

以Construct 2制作平台游戏的新手指南(2)

发布时间:2012-05-11 14:49:32 Tags:,,,

作者:Ashley

创造事件

如果事件满足了一系列条件的话它便能够依靠着测试而推动行动的运行。(请点击此处阅读第1部分

在这种情况下我们总是希望能够将玩家定位于“玩家盒子”之上。而为了做到这一点我们就需要在每一个空格内“打勾”或改变游戏帧。

双击事件表视图中的空白位置以创造一个新的事件。

add system condition(from scirra)

add system condition(from scirra)

双击系统对象——包含了“在每一个空格内打勾”的条件。

every tick condition(from scirra)

every tick condition(from scirra)

现在我们便拥有了一个空白事件,并且当我们在每个空格内打勾时我们也能够运行它的行动了。

every tick1(from scirra)

every tick1(from scirra)

点击“添加动作”。

add player action(from scirra)

add player action(from scirra)

我们想要为玩家定位,所以需要双击“玩家”。

set position action(from scirra)

set position action(from scirra)

双击“设置另一个对象的位置”。为了明确对象我们需要点击并选择“玩家盒子”。将图像点设置为0(也就意味着这是起始点)。点击“完成”。所以最终的事件将如下图所示:

set position event(from scirra)

set position event(from scirra)

希望我们这么做是对的:我们总是将玩家放置于玩家盒子对象之上,而这一对象正是一种移动对象。

通过点击标题栏上的绿色“播放”箭头运行游戏。

run game(from scirra)

run game(from scirra)

随着方向键移动并跳跃。现在你的首个基本平台游戏便能够正常运行了!

问题

当你尝试着去玩游戏时你将会发现如下问题:

1.玩家不能朝左移动。

2.游戏中没有其它动画了。

让我们开始解决这些问题!首先,让我们让玩家能够自由地左右移动。

首先,我们需要使用最上方的标签而回到布局视图中。双击布局再次添加一个对象,并添加“键盘”对象。因为这是一种输入对象,所以你并不需要纠结将其搁置在哪里——它的功能只是让你能够使用键盘输入整个项目。

比起重新创造一个玩家朝左移动的动画,我们可以使用Construct 2的“设置映射”行动——将自动映射出对象而让它朝左边(而不是右边)前行。

回到事件列表中。当“按压左箭头”条件被激活时我们便能够创造一个新的事件,并且这时候的行动是“设置玩家映射”。

在空白位置双击并创造一个新的事件,或点击“添加事件链接”。双击键盘对象——因为它包含了“一键按压”条件。

add keyboard event_2(from scirra)

add keyboard event_2(from scirra)

这时候便会出现一列关于键盘对象的条件。而我们需要双击“一键按压”事件。

on key pressed event(from scirra)

on key pressed event(from scirra)

我们需要让Construct 2清楚你想要检测哪个按键。点击按钮,并点击朝左方向键,按压“OK”并最终点击“完成”。

on left arrow pressed(from scirra)

on left arrow pressed(from scirra)

现在我们便希望能够添加行动,即“设置玩家映射”。我们依旧需要先选择对象,然后选择条件类型或行为,这时候你便会看到各种参数。点击事件右边的添加“行动链接”。(确保你不是随机地点击添加事件!)

双击“玩家”。

双击“设置映射”。

离开“映射”界面并点击“完成”。

这时候你将看到如下内容:

set mirrored event(from scirra)

set mirrored event(from scirra)

现在开始添加另一个事件——在空白位置上双击,或点击“添加事件链接”。

这时候你将再次经历之前的过程,但是这一次你需要将事件设置为“右键按压”,并将玩家设置为“不映射”。如下:

mirroring events(from scirra)

mirroring events(from scirra)

所以现在当你按左时玩家将会出现映射而当你按右时他将再次恢复到朝右的图像。再次运行游戏并尝试看看调整后的游戏吧!

添加更多动画

让我们开始添加剩余的玩家动画。首先让我们添加更多平台让玩家能够到处跳跃,并且我们也能够更加清楚地看到动画的运转。

转回视图界面,我们能够在此看到玩家和地面图层。点击并选择三个图层,然后同步调整并拖曳图层进行复制。重复这一行动以确保我们能够创造出一些供玩家跳跃的平台。这时候缩小图像更有帮助。

three platforms(from scirra)

three platforms(from scirra)

为了创造出更棒的视角,我们将扩大窗口尺寸。点击项目栏最上方的项目名以呈现项目属性。并将窗口尺寸改为800,600。

bigger window size(from scirra)

bigger window size(from scirra)

现在我们的玩家便拥有一些可以跳跃的平台了,并且我们也能够基于更大的窗口看到更多内容。我们还需要继续添加玩家动画。

我们必须清楚现在我们正使用“设置映射”行动以自动翻转玩家的左右朝向。所以我们只需要输入玩家朝右的动画即可。

双击“布局视图”中的“玩家”,打开动画编辑器。在这里我们需要输入四个动画:

1.闲置到奔跑(两者间)

2.奔跑

3.从奔跑而开始跳跃

4.从站立而开始跳跃

添加这些动画的过程如下:

1.右击动画栏(基于默认值而移动到右边位置,列出闲置动画)并选择“添加动画”。

2.输入动画的名称。你应该取些更容易记住的名字,如IdleTorun。

3.左击动画以切换它,你将能够看到一个单一的空白帧。

4.右击动画分帧线(默认的分帧线在最底端,并罗列出了动画帧)并选择“输入精灵条”。

5.定位精灵条。在Jungle精灵包中每一帧都是作为一个独立的PNG文件。我们可以用这种方法输入帧,但是通常情况下使用精灵条版本能够帮助我们更快速地完成任务,所以我们最好能够选择带有完整条的图像。

6.核对单元数目是否一致,然后点击“OK”。

7.删除第一个空白帧——我们不需要再使用它了。

8.在第一帧中将起点放置在玩家的脚上。尝试着将它与闲置动画中的位置对应在一起。就像我们在闲置动画中所做的那样,将起点应用到整个动画中(右击图像点对话框中的“起点”并选择“应用到所有动画中”)。

9.按住shift键并按压“裁剪”同时处理所有输入帧,删除不必要的空白处。

10.在属性栏中核实每个动画都拥有如下属性:

速度:JumpFromStand为22,其它内容为15

循环:运行为“Yes”,其它内容为“No”

为每个动画设置这一属性,最后将能看到5个玩家动画。

platform animations(from scirra)

platform animations(from scirra)

关闭动画编辑器。现在我们需要告诉玩家如何在合适的时间切换到合适的动画中。为了做到这一点,平台行为必须提供动画触发器——即当玩家改变动画时便能够触发事件的运行。随后我们只需要使用玩家的“设置动画”行动便可。同时我们还需要牢记平台行为(带有动画触发器)是置于“玩家盒子”对象上的,这之后我们将会设置可见的玩家对象动画。

同时我们还需要注意我们拥有IdleToRun动画。这就意味着当我们开始移动时,动画将如下:

停止:闲置

开始移动:IdleToRun

当IdleToRun完成时:奔跑

如此我们便很容易去设置事件。

设置动画事件

到了现在你应该已经知道如何去创造一个事件了:

1.选择对象

2.选择条件或行动

3.可选项:如果你的条件或行动拥有参数,那就输入这些参数

再次回到“事件列表视图”中。首先,让我们将动画设置为IdleToRun,使用玩家盒子对象中的平台行为“移动中”触发器:

platform animation event1(from scirra)

platform animation event1(from scirra)

当IdleToRun动画完成时,我们便需要切换到“奔跑”动画中。我们可以使用玩家对象中的“完成动画”触发器:

platform animation event2(from scirra)

platform animation event2(from scirra)

如果玩家能够奔跑,我们便可以停下来,并转回闲置动画中。这时候我们可以使用玩家盒子对象中的“动画停止”触发器:

platform animation event3(from scrira)

platform animation event3(from scrira)

运行游戏。现在玩家便能够在奔跑与停止之间相互切换了,并且IdleToRun动画也将运行于这过程之间。但是现在我们还不能运行跳跃动画,因为我们共拥有2个跳跃动画,我们同样也需要基于玩家在跳跃中能否奔跑而设置不同的动画。我们可以基于以下事件完成这一设置:

platform animation event4(from scirra)

platform animation event4(from scirra)

需要注意的是我们将在这里使用一个次要事件——他们将出现在“跳跃”事件之下。次要事件是出现在主要事件运行之后。并且这也符合我们的基本逻辑:当平台行为跳跃时,如果它们能够移动,那就设置为JumpFromRun;如果不能就设置为JumpFromStand。

为了创造一个次要事件我们需要右击主要事件并选择“添加->添加次要事件”或选择次要事件并按压“S”。

为了创造上述事件你同样也需要转换一个条件(即红十字标记)。转换条件也就意味着转变为原先内容的对立面。在这里,转换“平台移动”的条件也就意味着变成“平台不再移动”。所以为了转换条件,我们首先需要添加条件,然后右击它,并选择转换即可。或者我们也可以选择转换条件并按压“I”。

我们还需要完成一件任务:玩家在跳跃后仍然会保持着跳跃动画(即使他们已经着陆了),除非我们在玩家着陆时将动画再次设置为闲置或奔跑。也就跟之前的事件一样:在“着陆动画”触发器中,如果玩家仍然在移动那就设置为“奔跑”,否则就设置为“闲置”。

platform animation event5(from scirra)

platform animation event5(from scirra)

当完成了如上设置后运行动画。恭喜你,你现在已经创造出一个非常生动的动画角色了!你需要注意当你从静止不动或奔跑中开始跳跃时会出现何种不同的动画。除此之外,当你在跳跃后着陆时,基于你是否能够继续移动你将再次回到闲置或奔跑动画中。

添加敌人

现在你多半非常熟悉添加精灵和动画的过程。所以出于简洁性,这里我们不会重复完整步骤。下面就给敌人添加新精灵。

1. 在版面中添加新Sprite。

2. 输入Enemies\Snail精灵横条。

3. 删除首个空白动画画面。

4. 将动画设置成循环模式,速度设成15。

5. 将起点设置在蜗牛画面的底部,将其应用至整个动画。

6. 裁剪所有画面(移动+裁剪)。

7. 关闭动画编辑器,将对象重新命作“SnailEnemy”。

8. 将其放置在图像所示的地砖上。

snailenemy(from scirra)

snailenemy(from scirra)

现在我们将执行如下逻辑:

—若玩家从旁边遇到蜗牛,他们会闪烁,然后受伤。

—若玩家扑到蜗牛的顶部,蜗牛就会被消灭。

要让玩家闪烁,选中玩家,添加Flash行为。记得要选定实际玩家,而不是PlayerBox对象。我们将立刻采用这一行为的“Flash”动作。

切换至事件列表视图,添加新事件:

PlayerBox -> On collision with another object -> SnailEnemy

当我们以任何角度同SnailEnemy触碰时,这一事件就会出现。我们随后可以通过子事件测试玩家是跳至顶部,还是从旁出现。首先先来测试玩家是否处于上方。

将子事件添加至触碰事件中:

PlayerBox -> Is falling

我们还应测试玩家是否真的位于敌人上方。这能够防止蜗牛被意外消灭(游戏邦注:例如我们从高处跳下,越过它们)。右击“Is falling”条件,选择“Add another condition”。记住,事件的运作需要满足所有条件。添加条件:

PlayerBox -> Compare Y -> Less than, SnailEnemy.Y

Y轴向下延伸,所以若玩家的Y轴坐标低于蜗牛,他们就置于蜗牛上方。

在此事件中,添加动作:

SnailEnemy -> Destroy

我们可以通过添加另一动作让玩家从蜗牛身上弹开:

PlayerBox -> Set vector Y -> -700

“设定矢量Y”相当于设置平台运动的垂直速度;将其设置成负值能够促使其向上延伸(而Y轴坐标是向下延伸),700略低于跳跃力量1100。所以这促使玩家出现反弹,仿佛进行一次无力的跳跃。

jump from above event(from scirra)

jump from above event(from scirra)

操作还没有完成:右击“Is falling”事件的边距(这一空白处位于PlayerBox图标的左侧),选择Add -> Else。“Else”属于特殊条件,出现在先前事件没有发生的情况下。所以当我们同蜗牛触碰,但没有跳至其上方时(游戏邦注:例如从旁接触),这一情况就会出现。在这一事件中,我们希望玩家受伤。添加此动作:

Player -> Flash -> (保留默认值,点击Done)

记住,Flash行为位于Player对象中,而不是PlayerBox。

finished jump above(from scirra)

finished jump above(from scirra)

所以玩家不会死去,他们只会闪烁。但我们已进行检测,查看他们是跳至顶部,还是从旁边撞上。本指南会没有掺杂任何附加修饰内容,但从中你将明白清楚需在哪里制造杀戮效果,在哪里拿走健康元素。

接着就让蜗牛敌人在平台中来回移动。

移动敌人

移动蜗牛的主要问题在于,如何发现它们到达平台边缘。最简单的方式就是通过无形“边缘”标记。这些只是无形精灵,当蜗牛触碰到它们时,它们会翻转蜗牛的方向。

我们还可以将Platform行为再次应用至蜗牛中。这非常方便,因为:

—它能够促使蜗牛左右移动

—蜗牛将像向玩家那样上下斜坡

—必要时候,它还能够从平台上跃下

—若你想要创造一个跳跃的敌人,你可以通过运用“simulate control”动作促使敌人自动跳跃。

将Platform行为添加至SnailEnemy精灵中。由于我们没有在此对象中采用复杂动画,所以我们可以通过直接在没有无形“box”的对象中应用平台行为,进而完成操作。注意如果你通过包含复杂动画的敌人创造不同的平台游戏,那么你应该采用我们用至玩家身上的box方法。

我们并不希望玩家控制SnailEnemy——我们希望它能够自动进行控制。我们可以通过将Default控制属性设置成NO,然后采用Simulate控制动作完这一操作。由于蜗牛相当缓慢,将最大速度设置成50,Acceleration和Deceleration设成100!

我们还需要“Edge”标记。添加新Sprite对象,在不透明的矩形中进行加载。我们将此称作EdgeMarker。然后将对象的尺寸设定成40 x 40,把Initial能见度设成Invisible,这样我们就不会看见它。接着将其分别置于蜗牛平台的各个边缘:

snailmarkers(from scirra)

snailmarkers(from scirra)

蜗牛还需把握自己当前的移动路径——左还是右。我们可以过实体变量完成这一操作。这些知识存储在各对象实体的数据或文本中。若存在多种蜗牛,它们会单独存储自己的实体变量。这促使它们的健康状态、当前方向呈现特殊数值。自动控制敌人的一个简单方法是创造保存于当前状态的“动作”实体变量。例如,这可以是“逃离”?“追逐玩家”或“闲逛”。在这种情况下,我们只需要“左”和“右”情况,但按照相同方式进行设置会让你受益匪浅。

选择SnailEnemy对象。在属性栏中,点击“Instance variables”中的Add / Edit。

platform instance vars(from scirra)

platform instance vars(from scirra)

接着将呈现罗列所有对象实体变量的对话框。点击“add”图标,然后添加新内容。将名称设置成动作,类型设置成文本,初始值设置成右。

action instance var(from scirra)

action instance var(from scirra)

点击OK,关闭实体变量对话框。然后切换至事件列表。

我们想要落实如下逻辑:

—若动作是“右”,模拟平台移动,按住“右”按键,将蜗牛向右移动。

—若动作是“左”,模拟平台移动,按住“左”箭头按键,将蜗牛向左移动。

我们可以通过如下两个事件设置移动操作:

事件:SnailEnemy -> Compare instance variable -> action equal to “right”(这里采用双引号旨在突出文本类型)

动作:SnailEnemy -> Simulate control -> Right

在此左侧的设定就变得相当清楚明了。我们希望画面和玩家一样映射左右内容。所以添加SnailEnemy -> 设置映射“左”事件,然后是SnailEnemy -> 设置映射“右”事件。最终结果如下:

snail control events(from scirra)

snail control events(from scirra)

现在设定蜗牛在边缘的方向:

事件:SnailEnemy -> On collision with another object -> EdgeMarker

子事件:SnailEnemy -> Compare instance variable -> action equal to “right”

动作:SnailEnemy -> Set value -> action to “left”

子事件:Else

动作:SnailEnemy -> Set value -> action to “right”

在此应用Else非常重要,因为事件从上至下进行。如果我们不是将其称作“其他”,而是“相当于‘左’的动作”,之前的事件就能够完整这一设置。所以它只是将其重新设回原状,没有什么整体影响。通过利用“其他”,若第一事件成真,我们就阻止第二事件的出现。

snail direction events(from scirra)

snail direction events(from scirra)

运行项目。注意蜗牛在自己的平台上来回移动。这提高玩家跃至它们身上的难度。这是个基本AI机制,但你有望通过以更多事件控制移动操作,创造更多的智能敌人,甚至能够让他们从平台上跳下,或通过其他标记触发跳跃活动,令画面看起来像是敌人知道需要跳到更高的平台。

尝试创建存在两只蜗牛的平台。注意他们独立控制自己,因为它们各自拥有维持其当前状态的动作实体变量。你会逐步发现实体变量在独立控制实体方面的重要性(游戏邦注:它们无需进行相同操作)。

twos nails(from scirra)

twos nails(from scirra)

穿越对象

若在周围放置若干方块,你也许会发现,如果你从下跳到方格,你的头部会被击中,然后又掉回去。如果你希望创建那个从下往上跳的平台怎么办?这是所谓的穿越行为。和Solid 行为一样,你可以通过Platform行为站在上面,但玩家可以从下至上跳跃。

下面就来制作穿越版Tile对象。右击Tile对象,选择Clone对象类型。这会带来独立的对象类型Tile2,其包含不同行为。删除Solid行为,添加穿越行为。

通过方格134和135制作如下穿越活动:

jumpthru(from scirra)

jumpthru(from scirra)

运行游戏。注意自己如何从下至上进行跳跃。

现在你已把握制作完整关卡的全部要素。这是个缩小版关卡设计。注意在平台中运用标记元素,记录蜗牛在平台的位置。

level design(from scirra)

level design(from scirra)

视差

试着融入视差效果,让背景看起来更遥远。在图层栏中选择背景图层。在属性栏中,将Parallax属性设置成50,50。注意背景如何缓慢移动,呈现距离感。运用包含各种视差比例的多重图层能够给2D游戏带来3D感觉。

总结

本指南覆盖很多内容。下面是若干关键点:

—关于玩家Platform行为,将移动内容添加至没有动画的无形box中。定位有形内容,激活box顶部的玩家精灵。这能够防止动画在平台运动中引发小故障。

—关卡可以通过方格进行创建。

—映射设置动作让你免于制作各动画的映射版本。

—动画有时需要进行移植,设置适当速度和循环属性,进行适当的初始设置,然后裁剪各画面。你也许还会想要改变触碰面罩。

—敌人也可以通过Platform行为进行控制。将Default Controls设置成No,通过Simulate控制动作实现自动控制移动。

—若玩家从上跃至敌人身上,而非正面遇到,你可以通过测试他们是否处在降落状态且位于敌人Y轴坐标之上进行判断。否则,他们就是和敌人正面遇到,他们会因此受伤。

—实体变量可以存储具体对象实体的数据或文本信息。这能够促使我们单独控制对象,在“AI”中作用显著。

—边缘标记也是促使敌人在平台来回移动的快速、简单方式。

—穿越情况是指玩家能够从下跳至平台。

—视差是平台游戏的简单有趣效果。

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

How to make a Platform game

By Ashley

Creating events

Events work by testing if a series of conditions have been met. If they have, the actions run.

In this case, we always want to position the player on top of PlayerBox. To do this, we should update its position every tick, or frame of the game.

Double-click a space in the Event Sheet View to create a new event.

Double-click the System object, which contains the Every tick condition.

Now we have an empty event which will run its actions every tick:

Click ‘Add action’.

We want to position Player, so double-click ‘Player’.

Double-click Set position to another object. For Object, click <click to choose> and pick PlayerBox. Leave Image point as 0 (that means the origin). Click ‘Done’. The finished event should look like this:

Hopefully this makes sense: we always position the player on top of the PlayerBox object, which is the object with the movement.

Run the game by clicking the green ‘play’ arrow in the title bar.

Move and jump with the arrow keys. You’ve got your first basic platformer up and running!

Problems

If you play around you might notice some problems:

1. The player doesn’t face left.

2. There aren’t any other animations yet.

Let’s sort these out! First of all, number 1: let’s get the player turning left and right.

First, switch back to the Layout view using the tabs at the top. Double click the layout to insert an object again, and insert the Keyboard object. Since it’s just an input object you don’t need to place it anywhere – it just enables keyboard input for the whole project.

Instead of creating a whole new animation with the player facing left, we can simply use Construct 2′s Set mirrored action, which will automatically mirror the object to make it appear to be facing left instead of right.

Switch back to the Event Sheet. We’re going to make a new event with the condition “On left arrow key pressed”, and the action “Set player mirrored”.

Double click a space to create a new event, or click the Add event link. Double click the Keyboard object, since it contains the On key pressed condition.

A list of all the Keyboard object’s conditions appear. Double-click the On key pressed event.

Construct 2 needs to know which key you want to detect. Click the <click to choose> button, hit the left arrow key, then press OK. Click Done.

Now we want to add our action: “Set player mirrored”. As before, first you pick the object, then you pick the type of condition or action, then you enter any parameters. Click the Add action link to the right of the event. (Make sure you don’t accidentally click Add event!)

Double-click Player.

Double-click Set mirrored.

Leave the state on Mirrored and click Done.

You should now have this:

Now add another event – double click a space, or click the Add event link.

This time go through the process again, but make the event On right arrow key pressed, and set the player Not mirrored. You should end up with this:

Now when we press left the player’s image will mirror, and when we press right it restores the right-facing image. Run the game and try it out!

Adding more animations

Let’s get the rest of the player’s animations added. First, let’s add some more platforms for the player to jump around so we can more easily see how the animations work.

Switch back to the Layout View where you can see the player and floor tiles. Click and drag to select all three tiles. Then, hold Control and drag the tiles to clone them. Do this a few times so there are some platforms to jump around. It might help to zoom out for this.

To give us a better view, let’s also make the window size a bit bigger. Click the name of the project at the top of the Project Bar to show the project’s properties. Change the Window Size to 800, 600.

Now that we have somewhere to jump to, with a bigger window size so we can see more, let’s get going adding the rest of the player animations.

Remember we’re using the Set mirrored action to automatically flip the player left and right. So we only need to import animations for the player facing right.

Double-click the player in the Layout View to bring up the animations editor. There are four animations we want to import:

1. Idle to run (tween)

2. Run

3. Jump from run

4. Jump from stand

For each of these animations, the process to add them is as follows:

1. Right-click in the Animations bar (by default, floating to the right and listing the Idle animation) and select Add animation.

2. Enter the name of the animation. You might want to give easier to remember names like IdleToRun.

3. Left-click the animation to switch to it. It should have a single empty frame.

4. Right-click in the Animation frames bar (by default, at the bottom, listing the animation frames) and select Import sprite strip….

5. Locate the sprite strip. Note in the Jungle sprite pack each frame is also available as a separate PNG file. The frames can be imported that way, but usually it’s quicker to use the sprite strip version, so select the image with the complete strip.

6. Check the number of cells is right, then click OK.

7. Delete the first empty frame which we don’t need any more.

8. In the first frame, place the origin by the player’s feet.
Try to get it to match the position in the Idle animation. Apply the origin to the entire animation as we did with the Idle animation (right-click the Origin in the Image Points dialog and select Apply to whole animation).

9. Hold shift and press Crop to crop all the imported frames at once, removing the unnecessary transparent areas.

10. In the Properties Bar, make sure each animation has the following properties:

Speed: 22 for JumpFromStand, 15 for everything else
Loop: Yes for Run, No for everything else

Do this for each animation, so finally there are five animations for the player.

Close the animation editor. Now we need to tell the player to switch to the appropriate animation at the appropriate time. To do this, the platform behavior provides animation triggers – events which run when the player should change animation. Then we just use the player’s Set animation action. Remember the Platform behavior (with the animation triggers) is on the PlayerBox object, and then we want to set the animation of the visible Player object.

Also note we have an IdleToRun animation. This means when we start moving, the animations go like this:

Stopped: Idle

Start moving: IdleToRun

When IdleToRun finishes: Run

This is also easy to set up with events.

Setting up the animation events

Hopefully by now you’re familiar with the process for creating an event:

1. Select the object.

2. Select the condition or action.

3. Optional: enter parameters if the condition or action has any.

Switch back to the Event Sheet View. First of all, let’s set the animation to IdleToRun when we start moving, using the Platform Behavior’s On moved trigger in the PlayerBox object:

When the IdleToRun animation finishes, we then want to switch to the Run animation. We can do this using the On animation finished trigger in the Player object:

If the player is running then they stop, we need to switch back to the Idle animation. We can do this with the On stopped animation trigger in the PlayerBox object:

Run the game. The player should now be able to switch from running to stopped, with the IdleToRun animation playing in between. However, the jump animations don’t play yet. Since we have two Jump animations, we also need to set a different animation depending on whether the player is running or not when they jump. This can be done with the following event:

Notice here sub-events have been used – they appear indented beneath the On jump event. Sub-events are each checked after the “parent” event has run. This correctly implements our logic: when the Platform behavior jumps, if they are moving, set JumpFromRun; otherwise, set JumpFromStand.

To make a sub-event, right-click the parent event and select Add -> Add sub-event, or select it and press S.

To make the above event you’ll also need to invert a condition (appearing as the red cross). Inverted conditions mean the opposite of what they state. In this case, the inverted “Platform is moving” condition then means “Platform is NOT moving”. To invert a condition, add it normally, then right-click on it and select Invert. Alternatively, select it and press I.

There is just one more thing we need to do: the player will remain on their Jump animation after jumping, even after they land, unless we set the animation back to Idle or Run when they land. This is very similar to the previous event: in the On land animation trigger, if they are moving, set “Run”; otherwise, set “Idle”.

Once you’ve set this all up, run the game. Congratulations – you’ve now made a fully animated player character! Notice how the different animations play if you jump from standing still, or jump from running. Also see how when you land from a jump, you either go back to Idle or Running depending on whether you are moving or not.

Now, time to make an enemy!

Adding an enemy

Hopefully you’re familiar with the process of adding sprites and animations now. So for conciseness the steps in full won’t be repeated. Let’s add a new sprite for an enemy.

1. Add a new Sprite object in the layout.

2. Import the Enemies\Snail sprite strip.

3. Delete the first empty animation frame.

4. Set the animation to looping, speed 15.

5. Set the origin to the base of the snail image, and apply it to the whole animation.

6. Crop all the frames (shift + crop).

7. Close the animation editor and rename the object to ‘SnailEnemy’.

8. Place it on a ground tile as shown.

Now we want to implement the following logic:

- If the player runs in to the snail from the side, they flash and get hurt.

- If the player jumps on top of the snail, the snail is killed.

To make the player flash, select the player and add the Flash behavior. Remember to select the actual player, not the PlayerBox object (since it is the visible player we want to flash). We’ll use the ‘Flash’ action from this behavior in a moment.

Switch to the event sheet view, and add a new event:

PlayerBox -> On collision with another object -> SnailEnemy

This event runs when we collide with the SnailEnemy from any angle. We can then use sub-events to test whether the player is jumping on top or running in from the side. Let’s first test if the player is above.

Add a sub event to the collision event:

PlayerBox -> Is falling

We should also test the player is actually above the enemy. This can prevent the snail accidentally being killed if we fall past it off a ledge, say. Right-click the ‘Is falling’ condition and select ‘Add another condition’. Remember, all conditions must be met for the event to run. Add the condition:

PlayerBox -> Compare Y -> Less than, SnailEnemy.Y

The Y axis increases downwards, so if the player’s Y co-ordinate is lower than the snail’s, they are above it.

In this event, add the action:

SnailEnemy -> Destroy

We can also make the player bounce off it by adding another action:

PlayerBox -> Set vector Y -> -700

‘Set vector Y’ basically just sets the vertical speed of the platform movement; setting it to a negative value sets it upwards (again, the Y axis increases downwards), and 700 is a little less than the jump strength of 1100. So this will make the player bounce off as if they did a weak jump.

We’re not quite done: right-click the margin of the ‘Is falling’ event (the space just to the left of the PlayerBox icon) and select Add -> Else. ‘Else’ is a special condition that runs if the previous event did not run. So this event will run if we collided with the snail but we weren’t jumping on top of it – we ran in to it from the side, say. In this event we want the player to be hurt. Add the action

Player -> Flash -> (leave default values and click Done)

Remember the Flash behavior is in the Player object, not PlayerBox.

OK, so the player will never die, they’ll just flash. But we’ve got the detection set up of whether they jumped on top or ran in to the side. This tutorial won’t cover all the bells and whistles, but hopefully you can see where to create kill effects (try creating a ‘poof’ sprite on the SnailEnemy when it is destroyed, using the SnailEnemy’s ‘Spawn object’ action) and where to take off health (in the event that makes the player flash – you can learn about health using instance variables in the top-down shooter tutorial which you might want to look at afterwards).

Let’s make the snail enemy move back and forth across the platform.

Moving the enemy

The main problem with moving the snail is how to detect when it’s reached the edge of a platform. The easiest way to do this is with invisible ‘edge’ markers. These are just invisible sprites that flip the direction of the snail when it touches them.

We can also use the Platform behavior again for the snail. This is convenient because:

- it can get it moving left and right

- it will go up and down slopes just like the player can

- it will fall off ledges if you want it to

- if you want to make a jumping enemy, you can make the enemy automatically jump too using the ‘simulate control’ action.

Add the Platform behavior to the SnailEnemy sprite. Since we are not using complicated animations on this object, we can get away with using the platform behavior directly on the object without an invisible ‘box’ object. Note if you make a different platform game with enemies with complicated animations, you should use the same box technique we used on the player.

We don’t want the player to control the SnailEnemy – we want to automatically control it. We can do this by setting its Default controls property to No, then using the Simulate control action. Since snails are also pretty slow, set the Max speed to 50 and its Acceleration and Deceleration to 100!

We’ll also need our ‘Edge’ markers. Add a new Sprite object and just load in an opaque rectangle. Call it EdgeMarker. Size the object to about 40 x 40 and set its Initial visibility to Invisible so we don’t see it. Place one at each end of the snail’s platform like so: (don’t forget you can create a new instance by control+dragging it)

The snail also needs to know which way it is currently moving – either left or right. We can do this with instance variables. These are simply numbers or text stored in each instance of the object. If we have multiple snails, they each store their instance variables separately. This allows them to have unique values for their health, current direction, and so on. A simple technique to control enemies automatically is to create an “action” instance variable which holds its current state. For example, it could be “run away”, “chase player” or “idle”. In this case we only need “left” and “right”, but it’s useful to set it up the same way.

Select the SnailEnemy object. In the properties bar, click Add / Edit under ‘Instance variables’.

A dialog listing all instance variables for the object appears. Click the ‘add’ icon to add a new one. Set the name to action, the type to text, and the initial value to right (for moving right).

Click OK and close the instance variables dialog. Switch to the event sheet.

We want to implement the following logic:

- if action is “right”, simulate the platform movement holding the ‘right’ key to move the snail right.

- if action is “left”, simulate the platform movement holding the ‘left’ arrow key to move the snail left.

Also:

- if the snail hits the EdgeMarker, flip its action (if “left” set it to “right”; if “right” set it to “left”).

We can set up the movement with the following two events:

Event: SnailEnemy -> Compare instance variable -> action equal to “right” (use double quotes here to indicate text)

Action: SnailEnemy -> Simulate control -> Right

It should be straightforward to do the same for left. We also want the image to mirror left and right like we did for the player. So add SnailEnemy -> Set mirrored in the “left” event, and SnailEnemy -> Set not mirrored in the “right” event. You should finish with this:

Now to flip the snail’s direction on the edges:

Event: SnailEnemy -> On collision with another object -> EdgeMarker

Subevent: SnailEnemy -> Compare instance variable -> action equal to “right”

Action: SnailEnemy -> Set value -> action to “left”

Subevent: Else

Action: SnailEnemy -> Set value -> action to “right”

It’s important to use Else here, because events are run from top-to-bottom. If instead of ‘else’ we said ‘action equal to “left”‘, notice the previous event would have just set it to that. So it’d just set it right back again, having no overall effect. By using ‘else’, we prevent the second event running if the first was true.

Run the project. Notice the snail is moving back and forth on its platform. This makes it a bit harder to jump on! This is a very rudimentary “AI” system, but hopefully you can imagine that you could create more intelligent enemies by controlling the movement with more events, possibly even allowing them to fall off edges, or using other markers to trigger a jump to make it look like the enemy knew to jump up on to a platform.

Try creating a platform with two snails on it. Notice they control themselves individually, since they each have their own individual action instance variable holding their current state. Hopefully you can begin to see how important instance variables are for controlling instances independently – they don’t all have to be doing exactly the same thing as each other!

Jump-thru objects

If you place some tiles around, you might notice if you jump in to a tile from underneath you hit your head on it and fall back down. What if you want to make platforms you can jump on to from underneath? This is what the Jump-thru behavior does. Like the Solid behavior you can stand on it with the Platform behavior, but the player can jump on to it from underneath.

Let’s make a Jump-thru version of our Tile object. Right-click the Tile object and select Clone object type. This will make a separate object type, Tile2, which can have different behaviors. Delete the Solid behavior and add the Jump-thru behavior.

Use tiles 134 and 135 to make a jump-thru like this:

Run the game. Notice how you can jump on to it from underneath.

Hopefully you now know enough to design a whole level! Here’s a zoomed out level design I put together quickly while writing the tutorial. It might help show you some of the possibilities. Notice the use of markers across platforms to keep the snails on their platforms.

Parallax

Try adding a parallax effect to make the background seem further away. Select the Background layer in the layers bar. In the properties bar, set the Parallax property to 50, 50 (which means half speed scrolling). Notice how the background moves slower, giving a distance feel. Using multiple layers all with different parallax rates can create an almost 3D feel to a 2D game.

Conclusion

This tutorial covered a lot. You may want to revise it some time. Here are some of the key points:

- For the player’s Platform behavior, always add the movement to an invisible box with no animations. Position the visible, animated player sprite on top of the box. This will prevent animations causing glitches in the platform movement.

- Levels can be built out of tiles.

- The Set mirrored action saves you having to make mirrored copies of all your animations.

- Animations sometimes need some work to get imported, set up with the right speed and looping properties, with the right origin set, and all frames cropped. You may also want to alter the collision masks, although this was not covered.

- Enemies can also be controlled with the Platform behavior. Set Default Controls to No and use the Simulate control action to automatically control movement.

- You can detect if the player is falling on an enemy rather than running in to them by testing if they are both falling and above the enemy on the Y axis when colliding. Otherwise (using ‘Else’), they must be running in to the enemy, and they should get hurt.

- Instance variables can store numbers or text unique to each instance of an object. This helps control objects individually, which is useful for “AI”.

- Edge markers are a quick and easy way to make enemies go back and forth on a platform.

- Jump-thru are platforms that can be jumped on to from underneath.

- Parallax is an easy and intriguing effect to add to platform games.

Obviously we have not made a full platform game! However, this tutorial has covered the most difficult bits, and the important essentials every platform game creator should know in advance. From here on hopefully you have an idea of how the rest of a platform game is going to come together. It takes time to get familiar with a complex development tool with Construct 2. However, experimenting can be fun, and teach you a lot! So spend a while playing around, breaking things, tweaking things, and see what you can come up with. Happy platforming!(Source:scirra


上一篇:

下一篇: