共计 16917 个字符,预计需要花费 43 分钟才能阅读完成。
如何制作平台游戏
本教程是 Construct 团队推荐的!这意味着它包含有用的、高质量的信息,将帮助您成长为一名游戏开发人员。
感谢您选择 Construct 3!
Construct 3 可以制作各种 2D 游戏。在本教程中,您将了解在 Construct 3 中制作平台游戏的基础知识。
如果您是 Construct 3 的新手,并且更喜欢制作一款自上而下的射击风格游戏,请查看这个替代初学者指南.
准备好制作平台游戏了吗?让我们开始吧!
使用什么资产?
本教程使用知识共享零(CC0)资产制作者肯尼·弗勒格尔斯(Kenney.nl)他们在为游戏制作社区提供免费、可访问的资产方面的贡献是无价的。
不要犹豫检查他们的所有资产. 只要有一点想象力,您甚至可以将资产用于一种最初没有想到的游戏类型。
本教程利用了抽象平台游戏包.
请务必下载该包并将存档解压缩到硬盘驱动器上的某个位置,以便您轻松访问。
查看完成的游戏
了解我们的目标很有帮助,因此请下载以下文件:
.C3P 公司
PLATFORMER-ABSTRACTION.C3P
立即下载 362.85
在 Construct 3 的编辑器中打开它。
在开始页面中,单击顶部的“打开”按钮或进入菜单►项目►打开►从本地文件打开,浏览到您下载文件的位置并选择它。
加载后,单击“预览”按钮(下面以红色圈出显示)以运行它并尝试一下。
然后你就可以看到我们的目标是什么:一个玩家角色可以从一个平台跳到另一个平台,用箭头键移动,镜头保持对焦在角色身上,他们可以跳过敌人来摧毁它们。
完成后,关闭预览并在浏览器中按 reload,以便 Construct 3 重新启动。这样我们就可以从头开始本教程的其余部分。
寻求帮助
如果您遇到困难或有问题,最好的去处是我们的论坛. 我们已经禁用了本教程的评论,因为它们很容易被遗漏!
[========]
开始
如果您还没有查看 Construct 3 的新副本,只需访问 editor.construct.net. 没错,Construct 3 就在您的浏览器中运行!无需安装或设置任何内容。如果看到错误,请检查“系统要求”页,您可能需要更新浏览器或系统。
创建新项目
单击“新建项目”按钮。将出现一个对话框,询问一些详细信息。你不需要改变任何东西,但如果你愿意,你可以为你的项目输入一个名字(我的超级棒游戏怎么样?单击“创建”,您应该会看到一个新的空项目,如下所示。
关于屏幕截图的注意事项:我们在 Construct 3 中使用默认主题来存储图像。如果您更改了主题,或者 Construct 3 看起来有点不同,请不要担心 – 遵循它应该仍然很简单。
屏幕中间的主视图是布局视图。这是您在其中创建和定位对象的设计视图。将布局视为游戏关卡或菜单屏幕。在其他工具中,这可能被称为房间、场景或框架。
调整布局大小
首先,我们需要布局(级别)比默认布局大一点。
左键单击布局中的空格,然后属性栏将显示布局属性。
如果您在任何时候想要访问布局的属性,也可以在项目栏.
将布局的大小更改为 4000 x 2048 属性栏.
让我们在布局中平铺背景图像。
双击布局中的空格。这将显示“创建新对象类型”对话框.
如果您在移动设备上使用 Construct,您可能需要检查移动设备控件为了以舒适的方式学习本教程。
双击 Tiled Background 对象以插入它。
鼠标变成十字准线。最初放置它在哪里并不重要,因此只需在布局中的某个位置左键单击即可。
平铺背景编辑器(基于动画编辑器)打开,以便您可以输入图像进行平铺。
单击“打开”图标以导入图像
从 Abstract Platformer 包中选择 PNG\Backgrounds\set1_tiles.png 文件。
然后通过单击右上角的 X 来关闭 Tiled Background 编辑器。您应该在布局中看到背景图像的一部分。
您也可以使用拖放功能将图像导入图像编辑器 – 您只需从操作系统直接拖放到图像区域,然后它就会导入它。
我们需要调整背景的大小以覆盖整个布局。确保已选中“平铺背景”(在布局中左键单击它),其属性应显示在“属性栏”中。
要使其覆盖整个布局,请将其 Position 设置为 0,0,并将其 Size 设置为 4000,2048(与布局的大小相同)。
背景图像现在是一个在整个布局中重复出现的主题。
在当前的缩放级别下,很难一次看到整个布局。让我们试着缩小以预览更多内容。
按住并向下滚动鼠标滚轮以缩小。或者,右键单击布局视图,然后选择 Control 视图►缩小在右键菜单中。
您应该能够看到整个布局,有点像这样:
左上角的虚线轮廓是与布局其余部分相比的视口大小。
按 + 缩放回 100%,或右键单击布局视图并选择 Ctrl0 视图►重置缩放在右键菜单中。
您现在可能已放大到布局的中间。使用滚动条导航回布局的左上角。
您也可以单击并拖动鼠标中键以在布局周围“平移”,或者如果您没有鼠标中键,则按住以执行相同的操作。space
如果您像我一样不耐烦,请单击主工具栏中的预览按钮 – 预览窗口应该弹出,显示您的平铺布局!追求!
我们希望在平铺背景之上将其他对象类型添加到我们的游戏中。
但是,除非我们锁定它,使其无法选择,否则我们将继续意外地选择平铺背景。
右键单击 Tiled Background 以选择它,然后在右键单击菜单中选择锁►锁选择.
如果现在在布局视图中单击,则“平铺背景”将被取消选择,并且无法单击,就像它不存在一样。
如果要再次选择它,则必须再次进入右键单击菜单,并根据项目中最实用的选项选择在对象所在的图层上锁定 / 解锁全部,或锁定 / 解锁全部。
[========]
使用 TILEMAP 对象添加平台
我们现在想将平台添加到我们的级别中。为此,我们将使用瓦片地图使用瓦片集的插件。
Tilemap 使用单个图像,但允许您从此图像中绘制元素(高度 / 宽度的方块),并为布局中的元素使用特定的碰撞多边形。
在这里使用此插件来绘制我们级别的平台非常有意义。
让我们看看如何做到这一点。
双击布局中的空格。这将显示“创建新对象类型”对话框再。
这一次,双击 Tilemap 对象以插入它。
与平铺背景一样,鼠标光标会变成十字准线,在布局中单击的位置并不重要。
瓦片地图编辑器(Tilemap Editor)打开。它包含一个默认的图块集,但我们希望为此使用我们自己的图块集。
让我们从 Abstract Platformer 包中导入 tileset Tilesheet\tilesheet_complete.png 文件。
单击“打开”图标以导入图像。通过单击右上角的十字来关闭 Tilemap 编辑器。
您返回到布局视图。当前已选择采用布局大小的对象。它不是 Tiled Background,因为对象的名称是 Tilemap。
在属性栏,我们将 Tile Width 和 Tile Height 的值更改为 64。
这里的 64 像素很有意义,因为它适合我们在 Tilemap 中打开的特定图块集。
它也对应于我们稍后将要添加到项目中的角色动画。
如果您尚未看到它,请显示瓦片地图栏通过单击右下角的相应选项卡。
Construct 的界面是高度可定制的。如果你玩过一些游戏,你可能已经移动了窗格和 / 或条形图。甚至可能关闭了一些。
您可以随时单击菜单按钮并选择视图►酒吧. 在那里,您可以看到可用的柱线列表,并设置是否将它们设置为显示。
这里还有“重置柱和对话框”按钮。设置对话框这可以帮助将 Construct 重置为其默认界面。
请注意,您将丢失并且必须重新进行到目前为止所做的任何界面重新定位。
在 Tilemap 条中,将鼠标光标移动到各个图块上,您可以看到一个适当比例的正方形(64 像素对 64 像素,适合我们在 Tilemap 中打开的特定图块集)。
左键单击以选择一个图块。
单击 Tilemap 栏顶部工具栏中的铅笔工具。
在布局上移动时,选定的图块会显示在鼠标光标下方,并自动“捕捉”到图块宽度和图块高度比例的网格上。
左键单击以绘制图块。
您可以随时从瓦片映射栏中选择不同的瓦片并绘制它。
如果您犯了错误并想要删除已放置的图块,则可以使用不同的图块在其上绘制,或使用瓦片图条工具栏中的擦除工具。
您可以通过单击并拖动鼠标中键,或按住键并拖动来调整 Tilemap 栏的大小并在其中“平移”,就像之前的布局一样。space
享受绘制关卡的乐趣。
完成后,它可能看起来像这样:
左键单击瓦片地图条工具栏中的选择工具。
这使您可以停止绘制 / 编辑 Tilemap 图块,并返回到布局视图的正常使用。
[========]
添加播放器子画面
我们可能会一直无意中选择 Tilemap 对象。我们可以锁定它,就像我们对平铺背景所做的那样。尽管如此,让我们使用分层系统来使事情更易于管理。
添加图层
布局可以由多个组成层,可用于对对象进行分组。想象一下,像玻璃片一样的层叠在一起,每片玻璃板上都画有物体。它使您可以轻松地安排哪些对象显示在其他对象之上,并且可以隐藏、锁定图层、应用视差效果等。例如,在这个游戏中,我们希望所有内容都显示在平铺背景上方,这样我们就可以在顶部为我们的其他对象创建另一个图层。
要管理图层,请单击图层选项卡,该选项卡通常位于项目栏我们在哪里有我们的瓦片地图栏:
构造计数从零开始,因为它在编程中的工作方式更好。这就是为什么布局中的默认图层被命名为 Layer 0 而不是 Layer 1 的原因。
在图层栏以显示右键单击菜单,您可以在其中选择“在顶部添加图层”。
图层按从上到下进行组织。顶层中的对象将显示在“前景中”,而较低层中的对象将显示在上层的对象下方。
新创建的图层已被选中,如果您选择这样做,您甚至可以重命名它。
我们将其命名为 PlayerLayer。
您还需要单击第 0 层旁边的小锁图标。
这将锁定图层,防止在其上选择任何对象。再次单击锁定可解锁图层。
我们可以将 Layer 0 重命名为 Platforms。
重命名有助于使事情更清晰,当几个月后回到一个项目时,你会对自己感激不尽。
要重命名,请右键单击要重命名的图层,然后选择重命名。
然后,您可以将图层重命名为所需的名称。
在继续操作之前,请确保已选择图层 PlayerLayer。
添加播放器子画面
现在我们要添加一个对象,该对象将代表我们游戏中的玩家角色。
它将由几个动画组成,关于我们角色的各种“状态”(闲置、跌倒、行走、跳跃)。
您可以在布局周围的灰色区域中双击,或在项目栏中的文件夹对象类型上单击鼠标右键。在右键菜单中,选择“添加新对象类型”。或者,您也可以在布局本身的空白区域中右键单击,然后选择“插入新对象”。
这将显示“创建新对象类型”对话框.
双击 Sprite 对象以插入它(或在选择 Sprite 时单击“插入”按钮)。
鼠标变成十字准线。单击布局中的某个位置以放置 Sprite。
这动画编辑器打开,以便您可以设置要显示的图像。
请注意,此编辑器具有比以前的窗格更多的窗格来处理动画。
在 Animations Editor 中,单击工具栏中的 Open 按钮。它可以导入多个帧,这也将覆盖当前帧。
将打开一个系统对话框,允许您浏览计算机。
转到已解压缩抽象平台包的地方,然后选择文件 PNG\Players\Player Blue\playerBlue_walk1.png;playerBlue_walk2.png 和 playerBlue_walk3.png
单击“打开”按钮。
现在,帧已导入到“动画帧”窗格中。
我们现在有三个框架,代表我们的角色走路。
另一种方法是将图像从操作系统拖放到动画编辑器中。
设置原点
原点是对象的中心或热点。在平台游戏中,最好将原点放在玩家的脚下。这意味着,如果动画在播放时改变高度,它们会向上生长,而不是向地板上生长。
要设置原点,请单击工具栏中的编辑图像点按钮。
请注意,在较小的显示设备上可能看不到此按钮。如果动画帧窗格不允许在工具栏中显示某些工具,则可以调整此窗格的大小。
您应该注意到播放器上出现了一个红点。这就是起源。您可以单击以更改它。但是,我们希望它从底部到中间对齐。我们可以通过点击数字键盘(如果数字锁定已打开)来快速分配此值。如果您没有数字键盘(例如某些笔记本电脑),请在左侧的“图像点”窗格中右键单击“原点”行,然后选择“快速分配 / 底部”。2
对每一帧都执行此操作很麻烦,但幸运的是还有另一个捷径:在左侧的“图像点”窗格中,右键单击“原点”行,然后单击“应用于整个动画”。
宾果游戏!应在每个动画帧上设置原点。
“动画”和“动画”属性
让我们暂时关注“动画”窗格和“动画属性”窗格。
选择“动画 1”,并确保下面的窗格被命名为“动画属性”(当选择单个动画帧时,该窗格将被命名为“帧属性”)
让我们重命名 Animation 1 并将其命名为 walk。
您可以在“动画属性”窗格中修改“名称”属性,也可以直接在“动画”列表中选择动画,直到字段变为可编辑状态。
我们可以将 Speed 属性保持为默认值 5。这是动画在一秒钟内显示的帧数。
如果要查看动画及其当前属性的外观,可以在顶部的“动画”窗格中右键单击它,然后选择“预览”。
将打开另一个对话框,显示动画。
请注意,动画此时仅显示其三个帧和停止。
左键单击右上角的十字,关闭预览对话框,返回到动画属性窗格并勾选循环复选框。
如果您再次预览动画,您现在可以看到它循环显示,并可以确定其速度是否适合它。
您可以看到 Loop 使得当动画到达最后一帧时,它会从第 0 帧再次开始显示。
关闭“预览”对话框,然后在“动画属性”窗格中勾选“乒乓球”复选框。
再次预览,动画现在感觉更加自然和流畅。
动画以设定的速度显示其所有帧,当它显示动画的最后一帧时,它不是在那里停止,而是以相反的顺序显示动画的帧,直到第一帧。
然后它循环,从这个帧 0 返回。
让我们为我们的角色添加另一个动画。
在“动画”窗格中单击鼠标右键,然后选择“添加动画”。
这一次,我们将使用现有的帧,并将其替换为单个动画帧。
单击“打开”图标,浏览到 Abstract Platformer 包。
打开图像 PNG\Players\Player Blue\playerBlue_stand.png
将原点设置到帧的底部。将动画重命名为空闲。
您可以返回本教程,并应用用于执行这些操作的相同步骤。
完成后,通过单击右上角的叉号来关闭动画编辑器。
确保你的精灵对象位于布局的虚线区域。
您可以预览您当前的工作,并看到您的角色在您的关卡中展示其行走动画。
尽管如此,你的角色、玩家和平台之间目前没有互动。
让我们通过添加一些行为来解决这个问题。
[========]
添加行为
Construct 带有很多行为. 这些使您的对象以预定义的方式工作,这通常可以节省大量时间。可以重做事件系统中的行为所做的一切,但这样做通常既困难又耗时。这就是为什么行为对于让您的游戏快速启动和运行非常方便的原因!
这平台行为可以为我们处理平台移动的复杂性。但是,使用它有一个重要的提示:该行为应应用于不可见的矩形对象,并将播放器放置在顶部。如果具有该行为的对象不进行动画处理,则“平台”行为的效果会更好,因为更改动画帧可能会使对象部分粘在墙上,这可能会混淆“平台”行为。此外,它还可以避免愚蠢的碰撞情况,例如您的玩家用鼻子挂在窗台上或他们拿着的东西。
所以我们需要先为运动做一个看不见的方块。双击布局以再次添加新的 Sprite。
这一次,我们将使用动画编辑器工具来创建我们自己的图像。
单击顶部工具栏中的调整大小时按钮。
此时将显示“调整图像画布大小”对话框。将 Width 设置为 48(这将适合我们的玩家角色的动画大小)。
由于默认情况下勾选了“保持纵横比”复选框,因此会自动设置“高度”值,以匹配键入的“宽度”值。
单击“确定”。
现在选择左侧工具栏中的填充工具。
请注意,左侧窗格现在显示调色板,您可以从中选择一种颜色。
您可以选择顶部矩形中的颜色,然后将光标移动到水平条上以指定其亮度(如果不选择适当的亮度,则无论在顶部矩形中选择何种色调,最终都可能得到黑色),或者在底部字段中输入数值。
选择你最喜欢的颜色,无论如何,精灵对象都是不可见的,这只是为了你的方便。
当您对自己的选择感到满意时,请单击图像区域进行填充。
最后,将原点设置到底部,就像我们的玩家精灵一样。
在这里,你有你的颜色方块。
关闭 Animations 编辑器。
您应该在布局中看到您的正方形。请确保选择它,并在“属性”栏中将其名称设置为“PlayerBox”,因为它是用于播放器移动和碰撞测试的框。此外,在“属性栏”中,取消选中属性“最初可见”复选框,因为我们不想看到它。
我们还希望将 Platform 移动赋予 PlayerBox 对象,以实现更可靠的碰撞检测。仍在 PlayerBox 的属性中,单击属性栏中的“添加 / 编辑行为”。在显示的对话框中,单击“添加新行为”。
您也可以在“行为”对话框中单击鼠标右键以打开允许添加行为的右键单击菜单。
双击“添加行为”对话框中的“平台”行为。
完成此操作后,您可以在“属性”栏的“行为”类别下看到 PlayerBox 对象的一组新属性。
一旦我们完成了向项目添加行为,我们稍后将返回修改这些值,以便进行我们的平台游戏交互。
现在,我们希望向 PlayerBox 添加另一个行为。按照与之前相同的步骤操作,添加“滚动到”行为。
Scroll To 具有摄像机跟随 PlayerBox 对象的效果,并将其保持在屏幕的中心。添加它后,可以关闭 PlayerBox 行为对话框。
我们现在要添加的最后一个行为是 Solid 行为,我们希望将其添加到我们的 Tilemap 对象中。为此,我们需要解锁 Platforms 层并选择 Tilemap 对象。
按照与之前相同的步骤,将 Solid 行为添加到 Tilemap 对象。
“实体”行为将与“平台”行为进行交互,并确保角色不会简单地从屏幕上掉下来,而是停留在现有平台上。
但是,如果您现在预览项目,您仍然不会看到任何事情发生(尽管您可能会看到一些摄像机正在移动)。请记住,我们已将 PlayerBox 对象设置为不可见。而包含我们动画的精灵只是停留在当前位置,没有进一步的交互。理想情况下,我们希望这个 Sprite 跟随 PlayerBox 对象。
让我们再次锁定 Platforms 层并选择 Sprite。将其重命名为 PlayerAnim。
完成后,单击布局视图顶部的 Event Sheet 1 选项卡。这就是我们定义游戏逻辑的地方 Construct 的事件系统.
[========]
创建事件
事件的工作原理是测试一系列条件已经得到满足。如果有,则行动跑。
在本例中,我们始终希望将 PlayerAnim 放置在 PlayerBox 的顶部。为此,我们应该在游戏的每个刻度或帧中更新其位置。
双击“事件工作表视图”中的空间以创建新事件(或单击工作表中的“添加事件”链接)。
双击 System 对象,该对象包含 Every tick 条件。
现在我们有一个空事件,它将在每次价格变动时运行其操作:
单击“添加操作”。
双击 PlayerAnim 对象。我们将希望确定其位置。
双击“将位置设置为另一个对象”。
对于对象,单击 < 单击以选择 > 然后选择 PlayerBox。将“图像点”保留为 0(表示原点)。
单击完成。完成的事件应如下所示:
希望这是有道理的:我们始终将 PlayerAnim 对象放置在 PlayerBox 对象的顶部,而 PlayerBox 对象是具有运动的对象。
通过单击“预览”按钮运行游戏。
使用箭头键移动和跳跃。你已经启动并运行了你的第一个基本平台游戏!
问题
如果你尝试一下,你可能会注意到一些问题:
- PlayerAnim 不面向左侧。
2. 还没有任何其他动画。
让我们来梳理一下!首先,第 1 点:让我们让玩家左右转动。
首先,使用顶部的选项卡切换回布局视图。双击布局以再次插入对象,然后插入 Keyboard 对象。由于它只是一个输入对象,因此您无需将其放置在任何地方 – 它只需为整个项目启用键盘输入。
我们可以简单地使用 Construct 的 Set 镜像动作来创建玩家朝左的全新动画,该动作将自动镜像对象,使其看起来朝向左侧而不是右侧。
切换回事件表。我们将添加一个新事件,其条件为“按下左箭头键时”,以及“设置镜像 PlayerAnim”操作。
双击空间以创建新事件,或单击“添加事件”链接。双击 Keyboard 对象,因为它包含 On 键按下条件。
此时将显示 Keyboard 对象的所有条件的列表。双击 On 键按下条件。
Construct 需要知道您想要检测哪个键。点击 < 点击选择 > 按钮,点击,然后按 OK。单击完成。left arrow
现在我们想要添加我们的操作:“Set PlayerAnim mirrored”。和以前一样,首先选择对象,然后选择条件或操作的类型,然后输入任何参数。单击事件右侧的添加操作链接。(请确保您不会意外点击“添加事件”!
双击 PlayerAnim。
双击“设置镜像”。
将状态保留为 Mirrored,然后单击 Done。
您现在应该拥有以下内容:
现在添加另一个事件 – 双击一个空间,或单击添加事件链接。
这次再次执行该过程,但使事件 On 右箭头键按下,并设置 PlayerAnim Not 镜像。你最终应该得到这个:
现在,当我们向左按时,播放器的图像将镜像,而当我们向右按时,它会恢复朝右的图像。运行游戏并尝试一下!
[========]
添加更多动画
让我们添加播放器的其余动画。
首先,确保你有足够的平台让玩家跳来跳去,这样我们就可以更容易地看到动画是如何工作的。
切换回布局视图,您可以在其中看到播放器和平台瓦片图。解锁 Platforms 图层,然后选择 Tilemap。您可能需要添加或删除某些平台。请考虑回溯查看本教程的第 3 页如果您不记得如何操作。
为了给我们和我们的玩家提供更好的视野,我们还将窗口大小调大一些。单击顶部的项目名称项目栏以显示项目的属性。您可能需要更改其名称。我们还将视口大小更改为 1280,720。
现在我们有了可以跳转到的地方,游戏窗口的大小更大,这样我们可以看到更多,让我们开始添加其余的播放器动画。
请记住,我们正在使用“设置镜像”操作来自动左右翻转播放器。因此,我们只需要为面向右侧的玩家导入动画即可。
现在,我们可以专注于添加更多新的动画。
跳跃动画
让我们添加一个跳跃动画,以显示角色何时跳向天花板。
双击 PlayerAnim 对象以打开图像编辑器。
右键单击“动画”栏,然后单击“添加动画”。
重命名动画 1 以跳转。
单击工具栏中的“打开”按钮。
从 Abstract Platformer 包中选择 Sprite PNG\Players\Player Blue\playerBlue_up1.png、playerBlue_up2.png 和 playerBlue_up3.png 文件。
确保按照“设置原点”段落中的说明将图像点放置在框架的底部本页.
我们不需要让那个动画循环。
秋天动画
让我们添加最后一个动画,即坠落动画。
右键单击“动画”栏,然后单击“添加动画”。
重命名动画 1 以下降。
单击工具栏中的“打开”图标
从 Abstract Platformer 包中导入精灵 PNG\Players\Player Blue\playerBlue_fall.png 文件。
确保将框架的原点设置为底部。
现在,我们的 PlayerAnim 对象有 4 个动画。
让我们关闭动画编辑器并添加一些事件,以适当地显示动画以适应正在进行的游戏情况。
设置动画事件
希望到现在为止,您已经熟悉了创建事件的过程:
-
选择对象。
-
选择条件或操作。
-
可选:如果条件或操作有任何参数,请输入参数。
切换回 Event Sheet 视图。首先,让我们在 PlayerBox 对象中使用 Platform Behavior 的 On moved 触发器,将动画设置为在开始移动时行走:
创建该事件后,向其添加操作。
选择播放器动画
选择设置动画
在“动画”字段中,键入 walk
点击完成,我们的活动就结束了。
当对象 PlayerBox 的平台行为移动(绿色不可见框移动)时,将触发该条件。
当它发生时,我们将 PlayerAnim 对象中显示的动画设置为步行。
请记住,playerBox 具有平台行为,并且是不可见的。任何动画都在 playerAnim 对象中设置。
如果播放器正在运行,然后他们停止,我们需要切换回空闲动画。我们可以使用 PlayerBox 对象中的 On stopped 触发器来执行此操作:
运行游戏。玩家现在应该能够从正在运行切换到停止。但是,跳跃动画尚未播放。这可以通过以下事件来完成:
我们还希望在角色坠落时添加坠落动画:
如果您现在运行游戏,您会注意到在接触地面时,动画没有改变,它仍然显示坠落动画帧。
我们可能会使用平台行为的 On landed 条件来解决这个问题:
您现在可以注意到,着陆时只会播放空闲动画。即使你正在移动你的角色,它也会保持相同的动画。
我们可以检查玩家在着陆时是否在移动。
为此,我们将添加新事件并将它们定位为子事件通过将它们拖放到事件表视图中的相应子事件级别。
添加新事件并使用条件 Is moving:
添加动作设置动画,并将动画设置为显示步行。
然后,在我们刚刚创建的事件上单击并按住鼠标按钮。
请务必选择条件中图标的左侧。
当您按住鼠标按钮时,您可以拖动和移动事件。将其放在顶部正前方的事件上(同时按住鼠标按钮)。
请注意图像中的黑线,当您选择一个事件(在条件的左侧区域),按住鼠标按钮并将鼠标光标放在您希望作为“父”的事件上时,它就会出现。
请注意,黑线应缩进 – 略微向右显示 – 以便将事件放在父事件内,而不是仅仅在父事件之后。
当您释放鼠标按钮(放下)时,事件应如下所示:
请注意,子事件也是缩进的,表明它是其上方事件的子事件,而不仅仅是它之后的另一个事件。
所以现在,当角色落地时,它会空闲地播放动画,如果 PlayerBox 对象在移动,动画将被设置为行走。
一旦你设置了这一切,运行游戏。恭喜 – 您现在已经制作了一个完全动画的玩家角色!请注意不同动画的播放方式。
还可以看看当你从跳跃中着陆时,你是如何回到空闲状态或走路的,这取决于你是否在移动。
请注意,我们只使用了触发条件,动画从一个“跳过”到另一个。如果您的游戏计划通过中间动画从空闲动画平滑过渡到步行动画(让我们考虑一个名为 idleToWalk 的动画,该动画不是循环的),则可以在 On moved 的情况下播放动画 idleToWalk。使用条件 On animation finished 添加一个事件,您将在其中设置要播放的 walk 动画,并且只有在 idleToWalk 动画播放完毕后才会发生此更改。当您停止角色移动并播放另一个过渡动画并添加相关事件以在角色完全停止时播放空闲动画时,您可以执行相同的操作。
由于我们确实解锁了平台层,因此请务必在继续操作之前再次锁定它。
锁定后,请务必选择 PlayerLayer 图层。
现在,是时候树敌了!
[========]
添加敌人
希望您现在已经熟悉添加精灵和动画的过程。因此,为了简洁起见,不会重复完整的步骤。让我们为敌人添加一个新的精灵。
- 在布局中添加一个新的 Sprite 对象。
- 从 enemyWalking_1.png 的文件添加帧,并从抽象平台包的 PNG\Enemies 文件 enemyWalking_2.png 添加帧。
- 将动画设置为循环播放。
- 将原点设置为敌人图像的底部,并将其应用于整个动画。
- 关闭动画编辑器并将对象重命名为“Enemy”。
- 如图所示,将其放在地砖上。
现在我们要实现以下逻辑:
-
如果玩家从侧面撞到敌人,他们会闪光并受伤。
-
如果玩家跳到敌人的顶部,敌人就会被杀死。
若要使播放器闪烁,请选择 PlayerAnim 对象并添加 Flash 行为。请记住选择实际的 PlayerAnim,而不是 PlayerBox 对象(因为它是我们想要刷入的可见播放器)。我们稍后将使用此行为中的 Flash 操作。
切换到事件表视图,并添加一个新事件:
PlayerBox -> 与另一个物体碰撞时 -> 敌人
当我们从任何角度与敌人碰撞时,此事件就会运行。然后,我们可以使用子事件来测试玩家是跳到顶部还是从侧面跑进来。让我们先测试一下播放器是否在上面。
向碰撞事件添加子事件:
PlayerBox -> 正在下降
您可以通过右键单击顶部所需的事件来创建子事件,然后选择加►添加子事件在右键菜单中。请注意,您必须在事件块左侧的边距中右键单击,而不是在事件块内已有的条件下单击鼠标右键。您也可以在选择顶层时按 或。将打开“添加条件”对话框,并允许您直接选择要添加的条件。将创建一个新的空白子事件,您可以向其添加条件 / 操作。sbsb
我们还应该测试玩家实际上在敌人之上。例如,这可以防止如果我们从壁架上掉下来,敌人会意外死亡。右键单击“正在下降”条件,然后选择“添加其他条件”。请记住,必须满足所有条件才能运行活动。添加条件:
PlayerBox -> 比较 Y -> 小于,Enemy.Y
Y 轴向下增加,因此如果玩家的 Y 坐标低于敌人的坐标,他们就会高于它。
在此事件中,请添加操作:
敌人 -> 摧毁
我们还可以通过添加另一个动作来让玩家从它上反弹:
PlayerBox -> 设置向量 Y -> -550
‘ 设置向量 Y’ 基本上只是设置平台运动的垂直速度; 将其设置为负值会将其向上设置(同样,Y 轴向下增加),并且 550 略小于默认跳跃强度 650。因此,这将使玩家反弹,就好像他们做了一个微弱的跳跃一样。
完成后,事件应如下所示:
我们还没有完全完成:右键单击“正在下降”事件的边缘(PlayerBox 图标左侧的空间),然后选择加►还.“Else”是一个特殊条件,如果前一个事件未运行,则运行。
因此,如果我们与敌人相撞,但我们没有跳到敌人的顶部 – 比如说,我们从侧面跑进去,这个事件就会发生。在这种情况下,我们希望球员受伤。添加操作
PlayerAnim -> Flash ->(保留默认值并单击完成)
请记住,Flash 行为位于 PlayerAnim 对象中,而不是 PlayerBox 中。
您可以将 Else 事件添加到已选定的事件中,然后按 X
好吧,所以玩家永远不会死,他们只会闪现。但是我们已经设置了检测设备,可以检测他们是跳到顶部还是跑到一边。本教程不会涵盖所有的花里胡哨,但希望您能看到在哪里创建杀戮效果(尝试在敌人被摧毁时,使用敌人的“生成对象”动作在敌人上创建一个占位符精灵)以及在哪里关闭生命值(如果使播放器闪烁 – 您可以使用实例变量来了解健康。自上而下的射击游戏教程您可能希望在以后查看)。
让我们让敌人在平台上来回移动。
移动敌人
移动敌人的主要问题是如何检测它何时到达平台的边缘。最简单的方法是使用不可见的“边缘”标记。这些只是看不见的精灵,当敌人接触到敌人时,它们会翻转方向。
我们也可以再次对敌人使用平台行为。这很方便,因为:
-
它可以让它左右移动
-
它会像玩家一样上下斜坡
-
如果你愿意,它会从壁架上掉下来
-
如果你想让敌人跳跃,你可以使用“模拟控制”动作让敌人也自动跳跃。
将平台行为添加到敌人精灵中。由于我们没有在这个对象上使用复杂的动画,所以我们可以直接在对象上使用平台行为,而不需要一个不可见的“盒子”对象。注意:如果你制作一个不同的平台游戏,其中的敌人有复杂的动画,你应该使用我们在播放器上使用的相同的盒子技术。
我们不希望玩家控制敌人 – 我们希望自动控制它。为此,我们可以取消选中“默认控件”复选框,然后使用“模拟控件”操作。让我们有一个相当慢的敌人,将最大速度设置为 50,将其加速和减速设置为 100!
我们还需要我们的“边缘”标记。添加一个新的 Sprite 对象,然后在 Animations 编辑器中用纯色填充它。称其为 EdgeMarker。将对象的大小调整为大约 40 x 40,并取消选中其初始可见性,这样我们就看不到它了。在敌人平台的两端放置一个,如下所示:(别忘了您可以通过 + 拖动它来创建一个新实例)control
敌人还需要知道它当前正在朝哪个方向移动 – 向左或向右。我们可以用实例变量. 这些只是存储在对象的每个实例中的数字或文本。如果我们有多个敌人,它们每个敌人都会单独存储其实例变量。这使他们能够对自己的健康状况、当前方向等具有唯一的值。自动控制敌人的一种简单技术是创建一个名为 state 的实例变量,该变量保持其当前状态。例如,它可以是“逃跑”、“追逐玩家”或“闲置”。在这种情况下,我们只需要“left”和“right”,但以相同的方式设置它很有用。
选择 Enemy 对象。在属性栏中,单击“实例变量”下的“添加 / 编辑”行中的“实例变量”。
此时将显示一个对话框,其中列出了对象的所有实例变量。单击“添加新实例变量”以添加新的实例变量。将名称设置为 state,将类型设置为 String,将初始值设置为 right(用于向右移动)。
字符串是字符串的计算术语 – 如文本中一样。
单击“确定”并关闭实例变量对话框。切换到事件表。
我们希望实现以下逻辑:
-
如果状态为“正确”,则模拟平台移动按住“右”键以将敌人向右移动。
-
如果 state 为“left”,则模拟按住“left”箭头键的平台运动以将 enmy 向左移动。
也:
- 如果敌人击中了 EdgeMarker,则翻转其状态(如果“左”将其设置为“右”; 如果“右”将其设置为“左”)。
我们可以使用以下两个事件来设置运动:
事件:敌人 -> 比较实例变量 -> 状态等于“right”(此处使用双引号表示文本)
动作:敌人 -> 模拟控制 -> 右
对 left 做同样的事情应该很简单。我们还希望图像能够左右镜像,就像我们为玩家所做的那样。因此,在“left”事件中添加 Enemy -> Set 镜像,并在“right”事件中添加 Enemy -> Set not mirrored。你应该完成这个:
现在要在边缘翻转敌人的方向:
事件:敌人 -> 与另一个对象碰撞时 -> EdgeMarker
子事件:敌人 -> 比较实例变量 -> 动作等于“右”
动作:敌人 -> 设置值 -> 状态为“左”
子事件:else
动作:敌人 -> 设置值 -> 状态为“右”
在这里使用 Else 很重要,因为事件是从上到下运行的。如果我们说的不是“else”,而是“action equal to ‘left”’,请注意,上一个事件会只是将其设置为那个。所以它只是把它重新放回原处,没有整体效果。通过使用 ‘else’,如果第一个事件为 true,我们可以阻止第二个事件运行。
运行项目。请注意,敌人在其平台上来回移动。这使得跳上去有点困难!这是一个非常基本的“AI”系统,但希望你能想象到你可以通过控制更多事件的运动来创造更聪明的敌人,甚至可能允许它们从边缘掉下来,或者使用其他标记触发跳跃,让它看起来像敌人知道跳到平台上。
尝试创建一个平台上有两个敌人的平台。请注意,它们单独控制自己,因为它们都有自己的单独操作实例变量,用于保存其当前状态。希望您可以开始了解实例变量对于独立控制实例有多么重要 – 它们不必彼此都做完全相同的事情!
让我们找点乐子,为我们的游戏添加一些拾音器和分数。
[========]
添加拾取器
拾取器是游戏对象,如收藏品,您的游戏规则可能需要您的玩家收集以完成一个关卡。
我们基本上要添加一个新的精灵对象,当 PlayerBox 与它碰撞时将其销毁(“穿过”它),并为我们希望始终显示在屏幕上的全局变量添加分数。
首先,让我们添加一个新的 Sprite 对象,并从 Abstract Platformer 包中导入 PNG\Items\yellowJewel.png 文件。
您现在可以关闭动画编辑器。
在“属性”选项卡中,将此新对象重命名为 Pickup。
添加正弦行为对它。
正弦行为可以根据振荡的正弦波来回调整对象的属性(如其位置、大小或角度)。
在我们的游戏中,我们将其添加到 Pickup 对象中,以便让拾音器在几个像素上垂直移动地“漂浮”在地面上。
在行为的属性中,将其 Movement 属性从 Horizontal 更改为 Vertical,以便我们让宝石上下移动,就好像它漂浮在地面上一样。
将 Magnitude 属性修改为 8。这意味着移动将发生在顶部 8 个像素和底部 8 个像素上,总共 16 个像素。
将 Period 属性修改为 1。这意味着运动将在 1 秒的时间内发生(而不是原来的 4 秒),使其速度更快。
您可以根据自己的喜好和游戏的特殊性来修改这些值。
现在,您可以创建 Pickup 对象的实例(按住键盘并拖动拖放实例以创建其副本),并将它们放置在关卡中的平台上。ctrl
现在,我们将希望显示一个分数,并在每次 PlayerBox 对象与 Pickup 碰撞时提高此分数。
为此,在免费版的限制中,我们将重用 PlayerLayer 层并对其进行修改以显示一些文本对象。
我们将希望将此层上的各种对象移动到平台层。
如果您拥有 Construct 3 的计划,则您可能拥有的层数不受限制,然后可以简单地创建新层,而不是重用现有层。
在“项目”栏中,选择“EdgeMarker”。这将一次选择对象的所有实例。在“属性”栏中,将属性“图层”的值从“PlayerLayer”修改为“Platforms”。
对对象 PlayerBox、PlayerAnim、Enemy 和 Pickup 执行相同的操作。
如果您现在想要修改前面提到的一些对象(例如,您想要删除一些 Pickup 实例),您将需要解锁 Platforms 层,如本教程中前面提到的。
现在,您的图层 PlayerLayer 上没有对象。
确保选择它并将其重命名为 HUD。(这是 Heads-Up Display 的缩写。
选中后,在其上插入一个对象。
选择 Text 对象,将其放置在表示视口的虚线区域中。
将 Text 对象重命名为 txtScore。
选择 HUD 图层并在属性栏中检查其属性。
将属性 Parallax 设置为 0,0。
这使得图层 HUD“固定”,此外,借助 PlayerBox 对象上的 Scroll To 行为,将使 txtScore 对象始终在屏幕上可见。
您可以为不同的图层设置不同的视差值,以便它们以不同的速度移动,彼此独立。在游戏中,这通常是称为“多重视差”的效果,您可以通过在 Construct 中修改这些值来实现。
现在,我们想在该文本对象中显示一些分数。进入 Event Sheet 视图。
在事件周围的空间中单击鼠标右键,然后选择“添加全局变量”。
如果右键单击现有事件,则可以通过单击 加►全局变量在右键菜单中。
这将创建一个新的全局变量以供使用。将变量命名为 Score。
完成后,在事件表中的第一个事件中,即条件为 Every Tick 的事件中,添加一个新操作。
选择 txtScore 对象,然后选择“设置文本”操作。
在字段 文本 中,键入:“分数:”和 score
这是一个示例,允许您显示一些常规文本(“Score:”)并显示变量的内容(这里我们的 score 变量)。
& 是不是要结合书面文本(引号之间的所有内容“”)和其他值,在本例中为我们的变量分数。
此过程称为串联.
现在,让我们添加一个事件来摧毁 Pickup,并在我们的分数中添加一些分数。
添加一个新事件 PlayerBox -> On collision with another object – Pickup。
添加操作 Pickup -> Destroy(类别杂项)
添加操作 系统 -> 添加到(类别 全局 和 局部变量)
从下拉列表中选择变量 Score(如果尚未选择)。将“值”文本字段设置为 10。
生成的事件应如下所示:
预览游戏。
现在,当您的角色走在上面时,拾取器会消失,并且分数会显示在左上角,每次您走过拾取器时都会进行修改。
我们现在已经完成了我们的小游戏。
[========]
结论
本教程涵盖了很多内容。您可能需要修改一段时间。以下是一些关键点:
-
对于玩家的平台行为,请始终将移动添加到没有动画的不可见框中。将可见的动画播放器精灵放在盒子的顶部。这将防止动画导致平台移动出现故障。
-
可以使用 Tilemap 对象从瓦片中构建关卡。
-
“设置镜像”操作使您不必制作所有动画的镜像副本。
-
动画有时需要一些工作才能导入,设置正确的速度和循环属性,设置正确的原点,并裁剪所有帧。您可能还想更改碰撞掩码,尽管这未包括在内。
-
敌人也可以通过平台行为来控制。将“默认控制”设置为“否”,并使用“模拟控制”操作自动控制移动。
-
您可以通过测试玩家在碰撞时是否都在 Y 轴上坠落并高于敌人,从而检测玩家是否跌倒在敌人身上,而不是撞向他们。否则(使用“Else”),他们必须撞到敌人身边,他们应该受伤。
-
实例变量可以存储对对象的每个实例唯一的数字或文本。这有助于单独控制对象,这对“AI”很有用。
-
边缘标记是一种快速简便的方法,可以使敌人在平台上来回移动。
-
碰撞多边形可以帮助设置正确的碰撞,并防止游戏中发生意外的错误 / 行为。
-
正弦行为可用于在游戏中具有类似“浮动”的对象。
-
您可以将图层的视差值设置为 0,0,以便元素将始终显示在屏幕上,无论相机 / 滚动条位于布局中的哪个位置。
显然我们还没有做一个全平台的游戏!但是,本教程涵盖了最困难的部分,以及每个平台游戏创作者都应该提前了解的重要要点。
您可能希望使用跳转行为在游戏中的某些平台上(允许直接从平台下方跳到平台上)。在我们当前的游戏中,我建议您添加一个新的 Sprite 对象并将其用作这些特定平台。例如,将 Jump-thru 添加到 Tilemap 将不起作用,而 Solid 行为将接管。
您可能还需要查看 layer’s 属性 Parallax. 在具有多个图层的项目中,您只需正确设置几个数值即可提供不同图层以不同速度移动的印象,从而获得出色的视觉效果。
从这里开始,希望您已经了解了平台游戏的其余部分将如何组合在一起。熟悉 Construct 3 的复杂开发工具需要时间。然而,实验可以很有趣,并教会你很多东西!所以花点时间玩一玩,打破一些东西,调整一些东西,看看你能想出什么。祝您平台游戏愉快!
延伸阅读
您可能对以下内容感兴趣另类初学者指南,这是一个制作自上而下的射击游戏的教程。它涵盖了一些不同的要点,例如制作平视显示器,并且还更详细地介绍了实例变量。这些都是可以应用于平台游戏的东西,因此除了本教程之外,了解它肯定会很有用。
想要添加音乐和音效吗?看声音与音乐在手册中。
如果您想了解更多关于 Construct 3 中事件如何工作的信息,请参阅以下部分活动的工作原理在手册中。强烈推荐它,这样您就可以快速开始自己的项目!然后,有关更多信息,请不要忘记有手册中的完整文档.
感谢您的阅读,我希望本教程有助于帮助您更好地理解 Construct 并开始制作您心中的游戏。