C3官方教程入门指南【使用 Construct 3 制作你的第一个游戏】《幽灵射手(Ghost Shooter)》中文翻译版

589 阅读47分钟

Construct 3 官方入门指南【使用 Construct 3 制作你的第一个游戏】《幽灵射手(Ghost Shooter)》。

将学习制作简单游戏所需的一切 - 从图层到事件系统!

本教程由 Construct 团队推荐!这意味着它包含有用的高质量信息,可帮助您成长为游戏开发人员。

这个教程由 Construct 3游戏开发引擎 创始人 阿什利(Ashley)编写,原文为英文版本,在 C3 编辑器》起始页》入门指南 或 直接点击网址访问原教程英文版  。

原教程使用 CC BY 4.0许可 对外发布。

Construct 3 初学者入门指南

本教程由 Construct 团队推荐!这意味着它包含有用的高质量信息,可帮助您成长为游戏开发人员。

感谢您选择 Construct 3!让我们开始制作你的第一款游戏。我们将制作 《幽灵射手(Ghost Shooter)》 演示游戏。您将学习制作简单游戏所需的一切知识 - 从图层到事件系统!

可替代的平台游戏教程

本指南将制作一款俯视视角的射击游戏(top-down shooter style game)。你想从平台游戏(platform game)开始吗?可以尝试另一个初学者教程 如何制作平台游戏  。

查看完成的游戏

提前了解我们的目标是有益处的,我们可以先试玩一下将要制作的游戏,点击这里打开C3编辑器,在 起始页的右下方点击 打开案例库 按钮。

添加图片注释,不超过 140 字(可选)

在案例库页面左上角的搜索框输入 基础示例:幽灵射手,并清除搜索框下方的筛选条件,找到 基础示例:幽灵射手 ,点击任意位置即可加载并打开案例文件,或者点击三角形 试玩按钮 直接试玩。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

加载完成后,单击“预览”按钮(在下面以红色圈出)运行并试用它。(如果显示“是否创建新的窗口”一类的警告,选择允许。)

添加图片注释,不超过 140 字(可选)

然后你可以看到我们要制作的游戏:移动鼠标控制游戏主角的朝向,使用方向键控制主角移动,并用鼠标按键射击怪物。

现在,关闭游戏预览并在浏览器中按重新加载按钮,使 Construct 3 重新启动。这样我们就可以从头开始制作这个游戏。

添加图片注释,不超过 140 字(可选)

寻求帮助

如果您遇到困难或有疑问,最好的去处是 我们的论坛(英文) www.construct.net/community 。我们禁用了本教程的评论,因为它们很容易被遗漏 - 你更有可能在论坛上得到回应。

(非官方中文社区【Construct2/3篝火堆】QQ群:180911504。)

一、开始吧

如果您还没有获得 Construct 3 的最新版本,只需访问 editor.construct.net。没错,Construct 3 就在您的浏览器中运行!无需安装或设置任何内容。如果出现错误,请查看 系统要求页面 www.construct.net/make-games/… ,您可能需要更新浏览器或系统(为了兼容性,请使用谷歌 Chrome 或者 Edge 浏览器。C3使用普通网络即可访问,如果网络出错,可能是宽带运营商的问题,可以试试使用手机热点)。

创建新项目(CREATE A NEW PROJECT)

单击“新建项目”(New project)按钮。将出现一个对话框,询问一些详细信息。你不必改变任何东西,但如果你愿意,你可以为你的项目输入一个名称(我的超级棒游戏怎么样?),单击“创建”,您应该会看到一个新的空项目,如下所示。(如果网络不畅,有可能会创建失败,请首先检查网络是否能连接到 editor.construct.net 。C3使用普通网络即可访问,如果网络出错,可能是宽带运营商的问题,可以试试使用手机热点)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

Construct 3 中的新空项目

关于屏幕截图的注意事项:我们在 Construct 3 中使用默认主题来制作图像。如果您更改了主题,或者 Construct 3 看起来有点不同,请不要担心 - 这些不同点一般不会影响你的操作。

屏幕中间的主视图是布局视图(layout view)。这是用于创建和定位对象(object)的设计视图。将布局(layout )想象成游戏关卡或菜单屏幕。在其他软件中,这可能被称为房间、场景或框架( room, scene or frame)。

添加对象(ADDING OBJECTS)

让我们添加游戏所需的对象。首先是背景(background)。

平铺背景

制作背景的一种简单方法是在布局上重复图像。平铺背景(Tiled background )对象可以为我们做到这一点。首先,这是您的背景图像 - 右键单击它并将其保存到计算机的某个位置:

添加图片注释,不超过 140 字(可选)

现在,双击布局中的空白区域来创建一个新对象。(如果将来我们把布局填满了,没有空白,您也可以右键单击并选择“插入新对象”(Insert new object)。出现“创建新对象”(Create new object )对话框后,双击“平铺背景”(Tiled Background)对象。

添加图片注释,不超过 140 字(可选)

鼠标将变成十字准线(crosshair),来指示放置对象的位置。单击布局中间的位置。这时图像编辑器( image editor)会打开,供您绘制图像或将图像导入瓦片/图块( tile )。让我们导入您之前保存的背景图像。单击文件夹图标以从计算机加载图像,找到文件下载的位置,然后选择它。

添加图片注释,不超过 140 字(可选)

单击右上角的 X 关闭图像编辑器窗口。(是的,不用点击存盘按钮。)现在,您应该在布局中看到平铺的背景对象。让我们调整它的大小以覆盖整个布局。点击它,确保它已选中,然后左侧的属性栏(Properties Bar)应显示对象的所有设置,包括其大小和位置。将其位置设置为 0,0(布局的左上角),并将其大小设置为 1708 x 960(布局的大小 - 这是默认大小,基于可视区域( viewport )大小的两倍)。

添加图片注释,不超过 140 字(可选)

让我们来审视一下我们的工作。按住 Control键 并向下滚动鼠标滚轮以缩小视图。或者,右键单击并选择“视图”►“缩小”几次。您也可以按住 空格键 或 鼠标中键 并移动鼠标进行视图平移。很整齐,是吧?您的平铺背景现在应该覆盖整个布局:

添加图片注释,不超过 140 字(可选)

布局的缩小视图

点击 Ctrl + 0 或右键单击并选择“视图”►“重置缩放”以返回 1:1 视图。

(如果您像我一样的急切,请单击主工具栏(main toolbar)中的“预览”(Preview)按钮 - 预览窗口应该会弹出,显示您的平铺布局!哇哦!)

添加图片注释,不超过 140 字(可选)

(保存一下我们的工作)

(需要休息一下吗?单击主工具栏(main toolbar)中的“保存项目”按钮 ,保存一下我们的工作成果吧。)

添加图片注释,不超过 140 字(可选)

二、添加更多的对象

(打开我们保存的工作)

(如果你之前保存了我们的项目,并且重启或者刷新了 Construct 3 编辑器 页面,可以在 起始页》最近编辑列表 找到保存的项目,或者使用起始页右上角的 打开文件 按钮来打开项目。)

添加图片注释,不超过 140 字(可选)

锁定平铺背景

在我们继续之前,应该锁定平铺背景。当我们在背景之上创建和移动对象时,很容易意外地选择或修改背景。由于我们不再需要更改背景,可以锁定它会使其无法被选择,就不会影响到它了。要锁定它,请右键单击平铺背景,然后选择 锁定►锁定选择(Lock►Lock selection)。(如果您以后确实想更改它,只需右键单击并选择 锁定►全部解锁(Lock►Unlock all)。

添加图片注释,不超过 140 字(可选)

添加输入对象

双击空白区域(可以是任何位置,因为平铺背景已锁定)以添加另一个新对象。这一次,双击选择 Mouse(鼠标) 对象,因为我们需要鼠标输入。然后,使用相同的操作来添加 Keyboard(键盘) 对象。

请注意,这些对象不需要放置在布局中。它们是隐藏的,并自动在整个项目中工作。现在我们项目中的所有布局都可以接受鼠标和键盘输入。

添加图片注释,不超过 140 字(可选)

游戏对象

是时候添加我们的游戏对象了!这是您的图像 - 将它们全部保存到您的计算机中,在图片上点击鼠标右键--就像您之前保存背景图像一样。

玩家形象:

添加图片注释,不超过 140 字(可选)

怪物形象:

添加图片注释,不超过 140 字(可选)

子弹图像:

添加图片注释,不超过 140 字(可选)

爆炸图像:

添加图片注释,不超过 140 字(可选)

对于每个对象,我们都将添加一个 Sprite (精灵)对象。Sprite (精灵)显示一个图像,可以移动、旋转、调整大小和制作动画。游戏通常主要由精灵对象组成。让我们将上述四个对象中的每一个添加为 Sprite (精灵) 对象。该过程类似于插入平铺背景:

  1. 双击空白区域以插入新对象

  2. 双击选择新建 Sprite 对象。

添加图片注释,不超过 140 字(可选)

  1. 当鼠标转到十字准线时,单击布局中的某个位置以放置它。

  2. 弹出图像编辑器。单击“导入图像”按钮,然后导入四个图像之一。

  3. 关闭图像编辑器。您现在应该在布局中看到新建的 Sprite 对象!

添加图片注释,不超过 140 字(可选)

创建 Sprite (精灵)对象的另一种快速方法是将图像文件直接从文件夹拖放到布局视图中。Construct 将为您创建一个带有该图像的 Sprite。不过,请确保一次拖动一张图像 - 如果您一次拖动所有四个图像文件,Construct 将制作一个包含四个动画帧的精灵。 这样操作的一个额外好处是:新建的精灵会直接用图像的文件名命名。

将子弹和爆炸精灵移动到布局边缘以外的某个地方 - 因为我们不希望在游戏开始时看到它们。

添加图片注释,不超过 140 字(可选)

这些对象被命名为 Sprite、Sprite2、Sprite3 和 Sprite4。这样不太好 - 事情很快就会变得混乱。根据我们的需要将它们重命名为 Player(玩家)、Monster(怪物)、Bullet(子弹) 和 Explosion(爆炸)。选择对象,在属性栏点击选择其中的 名称(Name) 属性来重命名对象:

添加图片注释,不超过 140 字(可选)

(单击主工具栏(main toolbar)中的“保存项目”按钮 ,保存一下我们的工作吧。)

添加图片注释,不超过 140 字(可选)

三、添加行为

行为(Behaviors)是使对象以某种方式运行的便捷方法。例如,您可以向对象添加“平台”(Platform)行为,将“实体”(Solid)行为添加到地板上,然后您可以立即像平台游戏一样跳来跳去。您通常可以使用事件(event)来实现同样的效果,但使用“行为”要快捷得多!Construct 具有多种行为,以下是与本教程相关的一些行为。

  • 8 方向运动(8 Direction movement):这使您可以使用方向键控制对象移动。它通常用来实现游戏主角的移动。

  • 子弹运动(Bullet movement):将物体以当前角度向前移动。它对控制玩家的子弹很有效。尽管名字叫子弹运动,但它也可以很好地移动怪物 - 因为运动所做的只是以一定的速度向前移动对象。

  • 镜头跟随(Scroll to):使屏幕跟随对象四处移动(也称为滚动(scrolling))。这会使视图保持以玩家位置为中心。

  • 边界约束(Bound to layout):这将阻止对象离开布局区域。这对玩家对象也很有用,使他们不能移动到游戏区域以外!

  • 出界销毁(Destroy outside layout):这不会阻止对象离开布局区域,而是会销毁出界的对象。它对我们的子弹很有用。没有它,子弹将永远在屏幕以外飞行,这些子弹总是会消耗内存和处理能力。所以,我们应该在子弹离开布局后销毁它们。

  • 淡入淡出(Fade):这会使对象淡出,我们会使用在爆炸中。

让我们将这些行为添加到需要它们的对象中。

如何添加行为

我们将 8方向运动行为添加到玩家对象。单击选中玩家对象。在“属性栏”中,找到“行为”类别。单击此处的“行为”链接。将打开玩家对象的“行为”对话框。

添加图片注释,不超过 140 字(可选)

“行为”对话框(The Behaviors dialog )

点击行为对话框中的“添加新行为”。双击添加 8 方向运动。

添加图片注释,不超过 140 字(可选)

重复相同的步骤,为玩家对象添加“镜头跟随”行为,使屏幕跟随玩家。然后,再添加“边界约束”行为,把玩家对象限制在布局范围以内。行为对话框现在应如下所示:

添加图片注释,不超过 140 字(可选)

关闭“行为”对话框。现在尝试按“预览”来运行到目前为止的游戏!你会注意到,在预览窗口中您已经可以使用方向键控制玩家四处移动,并且屏幕会跟随玩家。由于“边界约束”行为,您也无法走出布局区域。这就是行为的好处 - 快速添加通用功能。我们将很快使用事件系统来添加自定义功能。

添加图片注释,不超过 140 字(可选)

添加其他行为

我们可以通过相同的方法将行为添加到其他对象 - 选择对象,点击“属性栏”中的“行为”链接以打开行为对话框,然后添加一些行为。让我们添加以下其他行为:

  1. 将 子弹运动 和 出界销毁 添加到 Bullet 对象(通常都是这样做)。

  2. 将 子弹运动 添加到 Monster 对象(因为它也向前移动,只是速度较慢)。

  3. 将“淡入淡出”行为添加到“ Explosion”对象(使其在出现后逐渐消失)。默认情况下,淡入淡出行为会在对象淡出后销毁对象,这也让我们不必担心不可见的爆炸对象会消耗游戏资源。

如果你运行游戏,你会发现一个不满意的地方:你会看到怪物突然快速地冲出去。让我们放慢他们的步伐。选择 Monster 对象。请注意,我们添加了行为以后,属性栏中出现了一些额外的属性:

添加图片注释,不超过 140 字(可选)

这些属性使我们能够调整行为的工作方式。将速度从 400 更改为 80(以每秒行进的像素为单位)。

类似的,将 Bullet 对象的速度更改为 600,将 Explosion 对象的 Fade 行为的 淡出时间(Fade out time)更改为 0.5(即半秒)。

创造更多的怪物

按住 Control 键,按住鼠标左键并拖动 Monster 对象。您会注意到它创建了另一个实例(instance)。这只是 Monster 对象类型(object type)的另一个对象。

对象类型(object type)本质上是对象的“类”(classes)。在事件系统(event system)中,主要处理对象类型。例如,您可以创建一个事件:“Bullet 碰撞到 Monster”。这实际上意味着“Bullet 对象类型的任何实例都会与 Monster 对象类型的任何实例发生碰撞”——而不是必须为每个怪物创建一个单独的事件。稍后我们将详细介绍对象类型与实例。现在,一个很好的例子是不同类型的敌人是不同的对象类型,那么实际的敌人本身(可能有几个)就是这些对象类型的实例。

使用 Control + 拖动(drag),创建 7 或 8 个新怪物。不要把怪物放在离玩家太近的地方,否则玩家可能会立即死亡!请记住,如果需要,您可以使用 Control + 鼠标滚轮向下来缩小视图,并将怪物分散在整个布局中。你最终应该得到类似下图的东西。

添加图片注释,不超过 140 字(可选)

现在是时候使用 Construct 的可视化编程方法 - 事件(event) 来添加我们的自定义逻辑了!

(记得保存一下我们的工作。)

四、添加事件

事件

首先,单击顶部的“事件表1”选项卡(Event sheet 1 tab)以切换到“事件表视图”(Event Sheet View)。事件的列表称为事件表(Event sheet),您可以为游戏的不同部分或组织设置不同的事件表。事件表还可以“包含”(include)其他事件表,允许您在同类事物上多次重用事件,但我们现在不需要这样做。

添加图片注释,不超过 140 字(可选)

关于事件

如空工作表中的提示文本所示,Construct 每次分时运行一次事件工作表中的所有内容。大多数屏幕每秒更新显示 60 次,因此 Construct 将尝试匹配它以获得最流畅的显示。这意味着事件表通常每秒运行 60 次,每次都会重新绘制屏幕。这就是 tick(刻度、滴答声) - 一个“运行事件然后绘制屏幕”的单位。

事件从上到下运行,因此首先运行事件表顶部的事件。

添加图片注释,不超过 140 字(可选)

条件、动作和子事件

事件由条件(conditions)组成,并检测是否满足这些条件,例如“空格键是否按下?“。如果满足所有这些条件,则事件的动作(actions)将全部运行,例如“创建 bullet 对象”。动作运行后,还会运行子事件(sub-events) - 然后可以测试更多条件,然后运行更多动作,然后运行更多子事件,依此类推。使用这个系统,我们可以为我们的游戏和应用程序构建复杂的逻辑。不过,在本教程中,我们不需要子事件。

让我们梳理一下。简而言之,事件基本上是这样的:

是否满足所有条件?

  • 是:运行事件的所有动作。

  • 否:进入下一个事件(跳过当前事件的任何子事件)。

这有点过于简单化了。Construct 提供了许多事件功能,涵盖了您可能需要执行的许多不同操作。然而,就目前而言,这是一个很好的思考方式。

您的第一个事件

我们想让玩家始终注视鼠标光标。所以,我们需要创建如下的事件:

添加图片注释,不超过 140 字(可选)

请记住,每次绘制屏幕时都会运行一个 tick,因此,如果我们让玩家在每个 tick 都指向鼠标光标位置,他们将始终面向鼠标光标。

让我们开始创建这个事件。双击事件工作表中的空白区域,这时会提示我们为新事件添加条件。

添加图片注释,不超过 140 字(可选)

不同的对象具有不同的条件和动作,具体取决于它们各自的属性。在这里可以看到 系统(System) 对象,它表示 Construct 的内置功能。双击 系统对象,会显示如下的对话框,其中列出了 System 对象的所有条件:

添加图片注释,不超过 140 字(可选)

双击 每一帧(Every tick )条件以使用它创建事件。对话框将关闭并创建了一个事件,这个新事件没有包含任何动作。

添加图片注释,不超过 140 字(可选)

现在我们要添加一个动作,让玩家朝向鼠标光标。单击事件右侧的 添加动作 链接。(确认是“添加动作”链接,而不是其下方的“添加事件”链接,“添加事件”链接将再次添加一个完全不同的事件。)将出现“添加动作”对话框:

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

与添加事件时一样,我们有相同的对象列表可供选择,但这次用于添加动作。尽量不要混淆添加条件和添加动作!如图所示,双击 Player 对象,因为我们想让它朝向鼠标光标。此时将显示 Player 对象中可用的动作列表:

添加图片注释,不超过 140 字(可选)

在这里可以注意一下玩家 player 的 8方向 具有哪些动作。不过,我们现在还用不上。

与其将玩家的角度设置为一个数值,不如“朝向位置”(Set angle towards position)动作更方便。这将自动计算从玩家到给定 X 和 Y 坐标的角度,并自动设置对象的角度。双击选择列表中的“朝向位置”(Set angle towards position) 动作。

Construct 现在需要知道 X 和 Y 坐标才能将玩家朝向那里:

添加图片注释,不超过 140 字(可选)

X 和 Y 字段( field)称为动作的参数(parameter)。条件也可以有参数,但 每一帧(Every tick )条件 不需要参数。

我们想设置角度到朝向鼠标的位置。Mouse 对象可以提供这个坐标。输入 X 为 Mouse.X, Y 为 Mouse.Y。这些称为表达式(expressions)。表达式就像是运算的组合。例如,您也可以输入 Mouse.X + 100 or sin(Mouse.Y) (尽管这些特定示例可能没有实际意义!)。这样,您可以使用来自任何对象或算式的数据来计算 动作 和 条件 中的参数。它非常强大,是 Construct 大部分灵活性的隐藏来源。

如果收到“Mouse 不是对象名称”的错误,请查看右上角的 项目栏,确保添加了 Mouse 对象!否则,请返回第 2 页,检查 添加输入对象 步骤。

添加图片注释,不超过 140 字(可选)

您可能会问:如何记住所有可用的表达式。首先,您可能会注意到 Construct 在您键入表达式时会显示一个列表。这称为自动完成(autocomplete),会显示出每个不同的位置可用的表达式。其次,还有表达式手册,其中列出了所有表达式。如果鼠标移出表达式手册窗口,它将会变得透明,使你可以查看表达式的编辑情况。您可以点击链接使用“表达式手册”。您可以双击“表达式手册”中的对象以查看其所有表达式的列表。如果双击某个表达式,它也会为您插入该表达式,这样您就不必自己输入了。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

最后,单击参数对话框中的“完成”,动作已添加!像我们之前看到的,它应该是这样的:

添加图片注释,不超过 140 字(可选)

这是您的第一个事件!尝试运行游戏,玩家现在应该能够像以前一样四处走动,但始终面向鼠标光标。这是我们的第一个自定义逻辑。

五、更多游戏逻辑

添加条件或动作的步骤

如果每个事件都像前文一样详细描述,那将是一个相当长的教程。让我们对接下来的事件进行更简短的描述。请记住,添加条件或动作的步骤如下:

  1. 在事件表视图双击空白区域(或点击“添加事件”链接)以插入新事件,或单击“添加动作”链接以添加动作。

  2. 双击选择条件/动作所在的对象。

  3. 双击选择所需的条件/动作。

  4. 如果需要参数,请输入参数。

从现在开始,事件将被描述为对象,后跟条件/动作,后跟任何参数。

例如,我们刚刚插入的事件可以写成:

添加条件 系统►每一帧

添加动作 Player►朝向位置,参数 X:Mouse.X , Y:Mouse.Y

让 PLAYER 射击

当玩家点击鼠标时,游戏主角需要射出一颗子弹。这可以通过 Player对象 中的 “生成其他对象”(Spawn an object ) 动作来完成,该动作会在与 Player 相同的位置和角度创建 Bullet 对象的新实例。然后,我们之前添加的 子弹运动 将使 Bullet 向前飞出。创建以下事件:

条件:Mouse►鼠标点击►参数:左键,点击(默认参数)

动作:Player►生成其他对象►参数:选择 Bullet 对象。保持其他参数不变。

您的事件现在应如下所示:

添加图片注释,不超过 140 字(可选)

如果你运行游戏,你可以发射子弹!但是,您可能会注意到子弹是从玩家的中间射出的,而不是从枪的末端射出的。让我们通过在枪的末端放置一个图像点( image point)来解决这个问题。图像点只是图像上的一个位置,您可以从那里生成对象,我们可以在 “生成其他对象”(Spawn an object ) 动作中引用它。

右键单击“项目栏”中的 Player对象,然后选择“编辑动画”(Edit animations)。

添加图片注释,不超过 140 字(可选)

player 对象的图像编辑器将重新出现。单击 编辑图像点 工具:

...然后侧窗格将转到图像点列表:

添加图片注释,不超过 140 字(可选)

请注意,图像原点(origin)会显示在列表中。这是对象的“热点”或“枢轴点”("hotspot" or "pivot point")。如果旋转对象,它将围绕图像原点旋转。就像我们刚才的操作,就是在 图像点 0 处生成 Bullet 对象的。我们想添加另一个图像点来表示枪支,因此在列表中单击鼠标右键并选择“添加新的图像点”。列表中将出现一个新的 图像点1,并且图像上会出现一个图标,以指示 图像点1 的位置。在玩家枪的末端左键单击,将图像点放置在那里:

添加图片注释,不超过 140 字(可选)

关闭图像编辑器。双击我们之前添加的“生成对象”动作,然后将“图像点”指向更改为 1 。该事件现在应如下所示 - 请注意,参数已经改为 图像点 1:

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

再次预览游戏。子弹现在从你的枪头射出!不过,子弹还没有做任何事情。然而,希望你会开始意识到,一旦你掌握了事件系统,你就可以非常快速地将游戏的逻辑组合在一起。

我们需要让子弹杀死怪物。添加以下事件:

条件:Bullet►碰撞到其他对象(On collision with another object)►参数:Monster对象。

动作:Monster►销毁对象(Destroy)

动作:Bullet►生成其他对象►参数:Explosion对象

动作:Bullet►销毁对象

下面是事件完成的样子。

添加图片注释,不超过 140 字(可选)

爆炸效果

预览游戏,并尝试射击怪物。哎呀,爆炸有那个大的黑色边框!

添加图片注释,不超过 140 字(可选)

你可能从一开始就预料到它会是这样的,并想知道我们的游戏是否真的会变成这样!别担心,它不会的。单击项目栏中的 Explosion 对象。其属性显示在左侧的属性栏中。在“效果”(Effects)部分中,将其“混合”模式( Blend mode)设置为“叠加”(Additive)。现在再试一次游戏。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

这是什么原理啊?无需过多讨论具体细节,普通图像将覆盖在屏幕图像顶层。使用叠加混合模式时,图像的每个像素都会与后面的背景图像像素相加(就像加法运算)。黑色的颜色值是零,因此不会添加任何内容 - 您看不到黑色背景。颜色越亮,效果越好,效果越强烈。它非常适合爆炸和灯光效果。

让怪物更聪明一点

现在,怪物只是在布局中一直向右边走。我们要让它们更有趣一点。首先,要让它们在开始时有不同的方向。

条件:系统►场景开始时(On start of Layout)

动作:Monste►设置角度(Set angle to)►参数: 生成随机数(360) (random(360))

当怪物走到布局外时,他们仍然会继续向前走,再也看不到了。我们要把它们留在游戏里。我们要做的是在怪物离开布局时将它们重新指向玩家。这有两个效果:怪物始终保持在布局内,如果玩家静止不动,怪物最终会向他走来!

条件:Monster►在场景外(Is outside layout)

动作: Monster►朝向位置(Set angle toward position)►参数: X: Player.X Y: Player.Y

以下是两个事件完成的样子。

添加图片注释,不超过 140 字(可选)

运行游戏。如果你在附近徘徊一会儿,你会注意到怪物也在布局里面游荡,它们会向各个方向移动。这几乎说不上是人工智能,但是效果不错!

现在,假设我们要击中怪物五次才能杀死它,而不是像现在这样立即死亡。我们要怎么做到呐?如果我们只存储一个“生命值”计数器,那么一旦我们击中怪物五次,所有的怪物都会死亡。相反,我们需要每个怪物都记住自己的健康情况。我们可以使用实例变量(instance variables)来做到这一点。

六、使用实例变量

实例变量(instance variable)允许每个怪物存储自己的生命值。变量(variable)是一个可以更改(或变化)的值(value),如果它们为每个实例单独存储,就称为实例变量。

让我们为 monster 添加一个“健康值”实例变量。添加实例变量的操作步骤与添加行为类似。单击项目栏中的monster。 或者,您可以使用顶部的选项卡切换回布局并选择一个 monster 对象。这将在属性栏中显示怪物的属性。 单击“实例变量”以打开“实例变量”对话框。

添加图片注释,不超过 140 字(可选)

您可以根据需要向对象添加任意数量的实例变量,但我们现在只需要为 monster 创建一个实例变量。单击“添加实例变量”。将显示以下对话框,用于添加实例变量。

键入“健康值”作为名称,将 类型(Type) 保持为 数值型(Number),初始值(Initial value)输入 5(如下所示)。这将使每个怪物的 5 点生命值开始。当它们被击中时,我们将从生命值中减去 1,然后当生命值为零时,我们将销毁该对象。

添加图片注释,不超过 140 字(可选)

完成后,单击“确定”。 请注意,该变量现在出现在实例变量对话框中,也出现在怪物的属性中。您可以在属性栏中快速更改初始值,但要添加或删除变量,您需要打开实例变量对话框。另请注意,布局中的每个对象也可以设置不同的实例变量值,因此您可以以不同的生命值启动每个怪物。

修改事件

使用顶部的选项卡切换回事件表。现在,子弹击中怪物就会销毁它们。接下来,我们要修改为从其健康值中减去 1。

找到显示 “Bullet:碰撞到 Monster" 的事件。请注意,我们有一个“ monster 销毁对象”的动作。让我们用“ monster 变量 健康值 减少 1”来代替它。右键单击“ monster 销毁对象”动作,然后单击“替换动作指令”(Replace action)操作。

添加图片注释,不超过 140 字(可选)

像我们 添加动作 时一样,出现了同样的 添加动作 对话框。选择 Monster►减少值(Subtract from)(在 实例变量 类别中),选择实例变量 “健康值”,然后输入参数 值:1 。单击完成。该事件现在应如下所示:

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

现在,当我们射击怪物时,它们会失去 1 点 健康值 并且子弹会爆炸,但我们还没有在怪物的生命值达到零时杀死它们。添加另一个事件:

条件:Monster►比较实例变量►健康值,小于或等于(Less or equal),0

动作: Monster►生成其他对象►Explosion

动作:Monster►销毁对象

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

为什么是“小于或等于 0”而不是“等于 0”?假设我们添加了另一种更强大的武器,从 健康值 中减去 2。当你射杀一个怪物时,它的生命值会变为 5、3、1、-1、-3......请注意,它的生命值在任何时候都不会直接等于零,所以它永远不会死!因此,最好使用“小于或等于”来测试某些东西的健康状况。

运行游戏。你现在必须击中怪物五次才能杀死它们!

七、保存得分

我们的游戏需要一个分数(score),这样玩家就能知道他们做得有多好。为此,我们需要另一个变量。你可能会想“让我们把分数作为玩家的实例变量之一!这并不是一个糟糕的想法,但请记住,实例变量存储在对象“里面”。如果没有实例,也没有变量!因此,如果我们摧毁了玩家,我们就无法再分辨他们的分数是多少,因为它是与玩家一起被摧毁的。

这时,我们可以使用全局变量(global variable)。与实例变量一样,全局变量(或简称为“全局”)可以存储文本或数字(text or a number)。每个变量可以存储单个数字或单个文本。全局变量也可用于整个游戏的所有布局 - 如果我们要添加其他关卡,这很方便。

右键单击事件工作表底部的空白区域(或者事件表右下角的“添加...”链接),然后选择 添加全局变量。

添加图片注释,不超过 140 字(可选)

输入 “得分” 作为名称。其他字段默认值就好,它会成为一个初始值为 0 的数字。

添加图片注释,不超过 140 字(可选)

现在,这个全局变量成为单独的一行,并显示在事件表中。它位于这个事件表中,但可以从任何布局中的任何事件表访问它。

添加图片注释,不超过 140 字(可选)

还有一些局部变量( local variables)只能由较小的事件“范围”(scope)访问,但我们现在不需要担心这一点。

玩家每杀死一个怪物就记1分。在我们的 “Monster:健康值 小于或等于 0” 事件(当怪物死亡时)中,单击“添加动作”,然后选择“系统”►“增加值”(Add to)(在“全局和局部变量”( Global & local variables)下),然后选择“得分”,值为 1 。现在,事件应如下所示:

添加图片注释,不超过 140 字(可选)

现在玩家有一个得分,他们每杀死一个怪物,得分就会增加 1 - 但他们看不到他们的分数!让我们用一个文本对象向他们展示它。

八、显示分数

为了显示玩家的分数,我们将使用 Text(文本) 对象。但是,我们希望将其显示在屏幕上的固定位置。镜头是跟随玩家移动的,但我们不希望分数在玩家离开时消失!要解决此问题,我们需要添加一个新图层。

添加图层

布局可以由多个图层(layer)组成,您可以使用这些图层对对象进行分组。想象一下,像玻璃板一样的层层叠叠,每张玻璃板上都画着物体。它允许您轻松地排列某些对象出现在其他对象之上,并且可以隐藏、锁定图层、应用视差效果等。我们希望我们的分数显示在其他所有内容之上,并且保持在屏幕上的同一位置,因此我们可以添加一个新图层来执行这些操作。

尽量不要混淆布局和图层。这些东西看起来很相似。

将注意力转向图层栏(Layers Bar)。默认情况下,它位于屏幕的右下角。

添加图片注释,不超过 140 字(可选)

The Layers Bar 图层栏

您应该在列表中看 图层0。

Construct 3 从零开始计数,因为这样在编程中工作得更好。

在图层栏中单击鼠标右键,然后选择 “在顶部添加图层”(Add layer at top)。(请务必将其添加到顶部(top),而不是底部(bottom),因为我们希望分数显示在其他所有内容的顶部!添加时,您可以立即输入名称。输入HUD,它代表平视显示器 - 这是一个用于所有屏幕信息的术语。

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

现在,确保在图层栏中选择了“HUD”图层。这很重要 - 所选图层是活动图层(active layer)。所有新添加的对象都会添加到活动图层中,因此,如果未选择它,我们稍后会意外地将 Text 对象添加到错误的图层中。活动图层显示在布局视图右下角的状态栏(status bar)中 - 值得关注。(如果“HUD”图层不是活动图层,请在右下角 图层栏 点击“HUD”图层。)

添加图片注释,不超过 140 字(可选)

视差

HUD 应始终保持在屏幕上的同一位置。默认情况下,图层会随着镜头的移动而滚动(scroll)。为了将它们保留在屏幕上,我们可以使用图层视差(Parallax)设置。视差允许不同的图层以不同的速率(rate)滚动,以获得一种半 3D(semi-3D) 效果。但是,如果我们将视差设置为零,则图层根本不会滚动 - 非常适合HUD。

由于您已选择 HUD 图层,因此其属性会显示在左上角的属性栏中。 将“滚动视差”属性(Parallax property)设置为 0 x 0(X 轴和 Y 轴(X and Y axes)均为零)。

添加图片注释,不超过 140 字(可选)

现在我们有一个 HUD 图层,我们可以在其中放置出现在屏幕上固定位置的对象!但是,我们还没有在图层里面创建对象。

添加 TEXT 对象

使用顶部的选项卡切换回布局视图。确保在图层栏中选择了 HUD 图层,以确保将 Text 对象添加到正确的图层中。在布局中双击空位以添加另一个对象。这一次,请选择 Text 对象。(如果双击后弹出了背景的图像编辑器,请右键点击背景对象►设定►锁定选择——以锁定背景对象。)

尽量不要将显示一些文本的 Text 对象与 文本框 对象(Text input object)混淆,后者是用户可以在其中键入一些文本的框(例如,对于表单)。

将 Text 对象放在布局的左上角。显示的黑色文字不够醒目,因此在属性栏中,将其设置为粗体、斜体、黄色,并选择稍大的字体大小。调整 Text 对象的大小以适应合理数量的文本。它应该看起来像这样:

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

如果文本对象太小而无法容纳框中的第一个单词,则它们将不会在游戏中显示任何文本。如果未显示任何文本,请尝试将 Text 对象调整为较大大小。

切换回事件表。让我们用玩家的分数来更新文本。在我们之前添加的 每一帧 事件中,添加操作 Text►更改文本(Set text)。

使用 & 运算符(operator),我们可以将一个数字转换为文本并将其连接到另一个文本字符串(string)。因此,对于参数:文本,请输入:

"得分: " & 得分

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

添加图片注释,不超过 140 字(可选)

第一部分 ( "得分: " ) 表示文本将始终以文字 得分: 开头。预定义的文本必须出现在表达式中的双引号中。第二部分 ( 得分 ) 是 Score 全局变量的实际值。& 运算符将它们连接在一起形成一段新的文本。

运行游戏,并射击一些怪物。您的分数将显示出来,并且它保持在屏幕上的同一位置!

九、收尾

添加一些润色

我们快完成了。让我们添加一些最后的润色。

首先,让我们定期生成一些怪物,否则一旦你射杀了所有的怪物,就没有什么可做的了。我们将每 3 秒创建一个新怪物。添加新事件:

条件:系统►每隔 X 秒执行(Every X seconds)►3

动作: 系统►创建对象(Create object)►参数:Monster, 图层 0 (这是主要图层), X: LayoutWidth + 100(场景宽度+100), Y: random(LayoutHeight)(生成随机数(场景高度))

请注意,这是沿布局右边缘外的随机位置。这就是怪物的来源。我们还将它们创建在更右边 100 像素(pixels)处,这样玩家就不会看到它们突然出现在边缘,而是从外面进来。

最后,让我们让幽灵可以杀死玩家。

条件:Monster►与另一个物体碰撞时►Player

动作:Player►摧毁

添加图片注释,不超过 140 字(可选)

尝试更多想法

想走得更远吗?以下是一些添加额外内容的想法:

  • 让玩家击中怪物时和杀死怪物时获得不同的积分。您可以调整每种情况获得的分数。

  • 让怪物们的速度逐渐增加,这样它们就更难被击中和躲避。

  • 添加另一种敌人!

  • 添加另一种武器,它使用不同的鼠标按钮或键盘控制。

  • 添加 Audio(音频) 对象,导入一些声音文件,并添加音效或音乐(sound effects or music)。

  • 添加标题屏幕(启动屏幕)。使用“系统对象转到布局”操作在它们之间切换。

  • 在关卡设计中引入一些风景或障碍物(scenery or obstacles)。

  • 添加“游戏结束”屏幕,或在游戏主角死亡时发生其他事情。

总结

恭喜你,你已经在 Construct 中制作了你的第一款游戏!如果你想展示你的作品,请使用菜单►项目►导出(Menu►Project►Export)。您可以发布到 Construct 免费游戏社区 Scirra Arcade www.construct.net/en/free-onl…,也可以使用 Web (HTML5) 导出上传到您自己的 Web 服务器。您可以发布到其他平台,但您需要订阅才能访问 Construct 3 的全部功能。

您已经学习了有关 Construct 的一些重要基础知识:添加对象、使用行为、事件、图层等。希望这应该让您做好充分的准备,以了解有关 Construct 的更多信息!尝试探索它的功能,看看它能为您做什么。

成品

单击此处打开已完成的游戏,或在起始页中搜索 Ghost shooter 教程。它添加了一些额外的功能,例如一些“游戏结束”文本,以及逐渐加速的怪物。还有很多评论(关于事件的简单的注释)描述它是如何工作的。

如果您喜欢本教程,并且认为您认识的人可能也喜欢 Construct,为什么不向他们发送本教程的链接呢?

WHAT NEXT? 下一步学习什么?

想走得更远?以下是关于进一步学习的一些想法。

  • 看看教程如何学习 Construct 3?初学者的后续步骤。这是一个很好的指南,可以继续学习 Construct 3!

  • 尝试网站教程部分中的其他一些教程!

  • 请查看 Construct 3 手册,其中有一节详细介绍了事件的工作原理

  • 浏览起始页中的示例。他们展示了 Construct 中的各种功能。

  • 在起始页中试用演示游戏。你也可以尝试“破解”它们,比如试图弄清楚在事件中要改变什么,给自己无限的生命、更快的移动或更强大的武器。

  • 参与 Construct 3 社区!(非官方中文社区【Construct2/3篝火堆】QQ群:180911504。)

  • 购买订阅并试用 Construct 3 的全部功能!