Construct 3 入门基础指南[1]

共计 6829 个字符，预计需要花费 18 分钟才能阅读完成。

文章转载自：《Construct 3 入门基础指南 [1]》
原文作者：XHXIAIEIN
发布日期：2024-08-11
原文链接：https://zhuanlan.zhihu.com/p/713408230

哈喽，大家好。想写这个系列教程已经好久了，但一直没有真正抽出时间来，这次终于可以跟大家一起学学 Construct 3 引擎了。关于 Construct 3 游戏引擎的简单介绍，可以看这篇回答《 如何看待游戏引擎 Construct3?》

在阅读这篇教程之前，不需要你有任何的专业知识基础，无论是编程、画画、写故事，唱、跳、Rap、打篮球 ….. 通通不需要！因为 Construct 3 非常适合零基础的用户，只要你拥有想要制作游戏的热情、好奇心。然后，跟着我一起操作即可~

噢，对了，本系列教程针对免费版用户编写，所以即便你没有订阅 Construct 3 也没问题！你不需要花 1 分钱也可以跟着动手做，免费版对于新手来说已经够用了！当然，如果后续对 C3 感兴趣，也可以花 ￥11 块钱订阅 1 个月试试，差不多就一杯奶茶钱嘛 ~

废话不多说了，直接开始正式的教程内容吧！

入门篇: Construct 3, 启动！

首先第一步，在浏览器打开 Construct 3 (https://editor.construct.net/)

Construct 3 是一款基于浏览器运行的游戏引擎。第一次打开时，它会自动下载离线版本，随后左下角会提示离线版本下载完成，之后即使可以在没有网络的环境下也可以使用。

注意事项：

1. 不要直接在微信、QQ 应用内置的浏览器打开。如果你是通过聊天窗口直接点链接打开的，请复制链接到浏览器再打开，推荐使用谷歌浏览器 (包括 Mac 用户)。因为这些浏览器可能没有访问本地储存的权限，会导致你的项目文件无法正常保存。
2. 如果你还没有安装谷歌浏览器，不要通过电脑管家的软件中心安装（因为他们提供的版本通常比较旧），建议访问 Chrome 官网 (https://google.cn/intl/zh-CN/chrome/) 下载安装，无需科学上网。对于使用国产浏览器的用户（如：360、QQ、搜狗、百度、UC、2345、猎豹、遨游），强烈建议更换谷歌浏览器，因为可能因为 Chromium 版本太低导致出现各种兼容性问题。
3. 如果你已经安装了谷歌浏览器，注意检查版本是否有更新。建议保持最新版本，可以减少许多早已经被解决的问题出现。检查版本更新的方式是：在右上角展开菜单，帮助 -> 关于 Google Chrome。或者打开这个链接 (chrome://settings/help)

入门篇: 新手引导

首次打开 Construct 3 时，会看到这样一个弹窗，里面有一个大大的按钮，邀请你参与初学者入门指引的教程。它会手把手教你怎么使用，对 Construct 3 的工作方式有个最基本的认识。预计时长 5 分钟。强烈推荐大家先完成这个教程，有助于帮助理解接下来的内容。

如果你已经跳过了或者想重新再看一次，也可以通过左上角【菜单】-【教程】再次进入新手教程。

这里看 2 个教程：

01: 平台跳跃游戏

教程地址：#open=guided-tour-makeAPlatformGame

02: 俯视角射击游戏

教程地址：#open=guided-tour-beginnersGuide

接下来，我会假设你已经通过上面的新手指引《平台跳跃游戏》或《顶视角射击游戏》。进入下一个部分。

界面介绍：食用指南

这部分是页面介绍篇，可能有些初学者想知道某些页面菜单是做什么用的，这部分属于可以不看但不能没有的意义，简单看看就好。如果这部分内容对你来说感到了无聊、疑惑、感觉暂时用不上。没关系，大致瞄一眼然后先跳过，知道大概都提到了哪些东西，当你未来遇到这个东西不知道应该怎么做的时候，再回来看看。

界面介绍：编辑器页面

编辑器页面本身并不复杂，和大部分工具类软件操作逻辑是相同的。在右边【项目栏】的列表中，点击任意文件夹、文件、对象等，左边【属性栏】都会显示它们的相关设置。

项目栏

例如，这里点击了右边【项目栏】顶部的 新项目 文件夹，在左边【属性栏】就会显示项目相关的属性。项目栏的设置会影响整个项目的属性，如项目名称、初始场景、加载页面样式、可视区域、采样方式、渲染设置、缩放适配等。

东西非常多，建议大家简单看一眼，不用记住，大概知道都有哪些东西就可以了。

当你点击场景空白地方的时候（不再是从项目栏点击项目文件夹），属性栏就会显示场景的属性。场景的属性都是比较常用的，例如场景大小、事件表、对齐网格（拖动精灵时，有网格吸附的辅助功能）、显示碰撞轮廓等。

注意，每个场景都需要指定 1 张事件表，你可以每个场景都新建一个事件表，也可以全部场景都指定同一张，主要看你自己如何管理比较舒服，没有什么标准答案。当然，在事件表里可以通过右键引用其他事件表，这样方便你组织不同的功能系统，也方便多人协作。

标签栏

如果你不小心关闭了顶部的标签栏，发现【场景】不见了。可以在项目中的场景文件夹双击要打开的场景，就会重新出现在标签栏中。

重新显示窗口

如果不小心将它们关闭了，也可以在左上角【菜单】-【视图】-【窗口】中重新将它勾选显示。

弹出窗口

对于有多个显示器的朋友，也可以在这个蓝色标题栏右键，将窗口弹出，这样就可以放在其他显示器页面了。把弹窗关闭即可恢复成原来的模样。

重置布局

或者你已经把他们玩坏了，把它们拖出丢在屏幕各个角落，希望还原编辑器默认的布局方案，也可以通过【设置】-【重置编辑器布局】，然后刷新网页即可。（注意，如果你正在编辑项目，请记得保存之后再进行操作！）

页面介绍：自动备份（必看！）

强烈建议所有人，都设置好自动备份，选择一个本地文件夹作为备份地址。我一般会选择 OneDrive 的本地同步文件夹，这样它在保存时还会帮我上传到云空间。这类云空间产品有个好处就是，自带版本管理功能，你可以回退到任意时间的版本，非常好用！

其他设置

强烈大家关闭这两个选项：

• 翻译表达式: 大家放心，禁用并不会影响中文翻译，旁边依然会有中文注释解释是如何使用的。禁用后表达式不需要通过中文输入了，因为中文输入法在输入框会很容易出问题，另一方面中文输入法也经常会被刺你。因此禁用它可以让你的使用体验更好。

什么是表达式呢？

• 对象表达式: 如玩家.X、玩家. 生命值、玩家. 数量 ….. 这些由 . 引用的属性，相当于玩家的什么东西。

• 系统表达式: 如场景宽度 (LayoutWidth)、可视区域左侧 (ViewportLeft)，这些系统属性。’

• 函数表达式: 如计算角度 (x1, y1, x2, y2)、计算距离 (x1, y1, x2, y2)、生成随机值 (1)、约束范围 (当前值, 最小值, 最大值) 等。
  禁用翻译表达式后，想要计算角度时，直接输入 angle() 就可以了，而不需要输入 计算角度。表达式输入框目前对中文输入法不是很友好，另一方面这些标点符号也需要用英文符号。（当然，整个编辑器是 100% 支持中文的，你可以在任何地方用中文输入，包括对象名、变量名、文件名、函数名、标签等）

• 使用应用内剪贴板: 这个是历史遗留的选项，为了兼容早期某些浏览器而提供的，较旧的 MacOS 设备可能会默认勾选，让剪贴板只能在当前窗口生效。现代设备如果勾选经常会导致项目的东西不能粘贴，因此如果你发现你的设备勾选了，请关闭它。

页面介绍：官方案例库

官方提供了非常丰富的案例库，从基本功能讲解、到简单示例、完整游戏项目，应有尽有。

官方做了非常多的分类标签，例如你可以按难度来选择，看从简单的开始看。需要提醒的是，这里的顺序纯粹是命名顺序，没有难度的划分，因此，你只需选择你自己感兴趣的看看即可，然后单独观察你想要的那个功能是如何实现的，其他作为点缀的加分设计，如果看不懂可以先不看。

我观察到有许多第一次接触的用户，不知道如何打开案例，只需要点击这个封面图就可以了。

当你不清楚某个功能应该怎么使用时，可以在左边的筛选器中，找到你想找的对象、行为、功能的标签，它会自动找出哪些自带案例使用到了这个功能。

属性栏：帮助

当你不了解某个功能如何使用或想知道每个属性什么意思，想看到更多介绍的时候，你可以在这个对象【右键菜单 – 关于】，或者点击这个对象后在【属性栏】的最底下点击【更多信息】，可以跳转到官方文档。

文档是英文的，但没有关系，你可以通过翻译软件来阅读它。

这里推荐一个浏览器插件【 沉浸式翻译 】，可以双语翻译页面，也可以切换不同的翻译服务。

项目栏：导入文件

如果希望导入音乐 (BGM)、声音 (音效)、视频、字体等文件，也可以在项目栏中，找到对应的文件夹右键导入文件。

导入音乐

导入音乐、声音文件时，编辑器会自动帮你将音频转码成 .webm 格式，因为 webm 格式是唯一能确保它在任何平台都能播放的格式。因为大部分人是不知道 mp3 是有版权专利的，它需要特定的编解码器才能播放。其他格式也不无法保证在另一个平台能被正常播放。

如果你是声音设计师，为了确保声音能被无损导入，请使用 16-bit PCM 的 WAV 或 FLAC 格式文件，或者直接导出为 WebM Opus。这样编辑器就无需过多处理，能无损导入音频文件。

播放的音频也非常简单，添加【音频对象】，使用音频的【播放】动作即可。

导入字体

如果是一些开源字体，建议导入 .woff 或者 .woff2 格式，这种格式专门对 Web 环境进行优化，体积会更小，比 ttf 格式小 40% 左右。当然，导入其他格式的字体也完全没问题！导入之后，可以在【文本】对象的属性中，更改字形，即可更换字体。如果选择上面那个列表的本地字体，编辑器会读取你设备本地的字体，这个字体仅在你本地可用，因为其他用户并不一定也安装了同样的字体。

特别注意：

1. 使用第三方字体时，请务必检查这个字体的版权范围可以被 内嵌使用，许多字库公司的字体即便宣称允许个人或商业免费使用，但也对内嵌使用有所限制。最好的方式是前往该字体的发布页查询，而不是下载字体的第三方网站。
2. 千！万！不！要！使！用！【微软雅黑】！请下载【思源黑体】代替！( 下载地址 1 OR 下载地址 2 )。

导入数据文件

在下面的【文件】文件夹中，可以新建数组、字典、JSON、HTML、CSS 样式文件等。如果你是订阅用户，编辑器会提供可视化编辑器来帮助编辑这些文件。

需注意的是，这里的文件并不是直接加载到游戏中的，而是需要通过 AJAX 对象请求文件 (在场景空白处双击添加对象，或在项目栏对象文件夹右键添加)，然后使用对应的数据对象加载 AJAX.LastData

导入图标文件

编辑器中会内置一些不同尺寸的图标，也就是游戏 LOGO，当你完成一款游戏后，就可以考虑将他们替换成自己的游戏图标了。为什么会有这么多不同的尺寸呢，从 16px 到 512px，全部都要准备一份吗？是的。因为不同设备的分辨率下也会显示不同尺寸的图标。例如：浏览器标签页的图标、手机 App 的图标、桌面应用的图标，他们有不同的用途，都会用得上，所以都要提供一份。

你还可以根据需要，点击图标文件，在属性栏设置不同的用途，对于手机端发布非常有用。

导入 CSS 样式

Construct 3 允许使用 HTML 元素组件来构成页面，除了提供最基本的元素组件，也支持直接插入 HTML 片段来展示 UI 元素。

如果你尚不了解 HTML + CSS 相关的知识，只想制作一些简单的 UI，如按钮、进度条、血条、滑动条等。我强烈建议新手不要直接使用这些 HTML 组件，而是使用【精灵】配合鼠标、触控等方式代替交互。因为这里提供的组件是浏览器默认的样式外观，它在不同的浏览器、运行平台、语言环境、主题配色等运行环境，看到的样子都是不同的。除非编写 CSS 样式来修改它。这方面的知识就是我们经常说的：网页设计、前端开发。这块是个非常深的萝卜坑。

更改 CSS 样式也非常简单，直接在项目栏底部的文件夹，右键新建 CSS 样式文件即可。然后在里面粘贴 CSS 样式，运行游戏就可以生效了，无需其他操作。(因为当你点击文件夹这个 css 文件，属性栏中的 用途 会帮你自动加载到页面中。)

因为想着这一篇把一些常识性的页面基本操作讲完，下一篇就可以将真正的实操了，所以这里就把其他的功能顺便讲讲了吧

功能介绍篇：对象

如果你已经通过了前面提到的新手引导，我想你已经对 对象类型 有了一个基本的了解。

青色图标的对象类型，它们可以提供某些功能的访问权限和功能。例如，添加了键盘对象，你就可以使用键盘相关功能，用来识别键盘的某个按键是否被按下，长按，松开等。添加了精灵对象，你就可以导入一张图片、或者一段动画，还可以划分碰撞区域等。

功能介绍篇：行为

橙色图标的实例行为。行为是对一些通用功能的封装，为对象类型扩展更加丰富的功能。想象成它就是哆啦 A 梦的神奇道具，当你把 竹蜻蜓 放在某个人头上，这个人就可以飞起来了。把 石头帽 放在头上，他就变成了无人关系的路边小石头。这些可以赋予一个普通对象特殊能力的东西，在这里就叫行为。

例如平台、8 方向、子弹、物理、寻路可以获得模拟真实运动的能力；拖放可以对象被拖动；补间动画可以让属性过渡到另一个状态；计时器可以进行计时；正弦、旋转、环绕、闪烁这些可以很方便做一些运动表现；

功能介绍篇：关联

关联是一个非常好用的功能，你可以把任意对象关联在一起，它们任何一个创建的时候，其他关联对象也会创建在相同位置。销毁的时候也会一起被销毁。在事件条件中被选择的时候也会被选中。（注意，但它们不会一直执行动作或一起做任何事情，关联 只是关系上的连接。）

除了关联精灵对象，对于一些大型游戏也会在对象身上关联数据类型的对象，例如字典、JSON、数组、流程图等。用来管理不同实例对象之间的数据。

功能介绍篇：对象层级

前面提到的关联，通常也会和对象层级一起使用。平时我们经常会需要将 2 个对象捆绑在一起，让他们跟着一起移动，例如角色和血条、碰撞体和角色动画、UI 背景和其他按钮等。这时候对象层级就非常的方便。

在以前，我们需要给对象添加 固定 行为来实现，这种方法有些过时且麻烦。而现在，只需要在场景中同时选中多个对象，然后在父级对象身上【右键 - 对象层级 - 添加为子对象】，就可以把它们绑定在一起。不需要写任何事件动作，即可完成这项操作。

你会发现，多出来一个绿色箭头，箭头所指的对象就是子对象。当你点击子对象的时候，对象层级属性也可以设置要同步的属性，例如我只希望跟随 X、Y 坐标，以及跟随销毁。就只勾选这几个属性即可。

功能介绍篇：选择模式

经常有同学问，如何永久组合对象？目前同时选中多个对象，然后右键有个组合所选，但这个组合只是临时的。下次点击对象有散开了。（小 TIPS：选中多个对象时，按 Enter 键也可以临时组合对象。）

解决办法就是，刚才提到的对象层级，当你同时选中多个包含对象层级结构的对象时，属性栏会显示【选择模式】属性，这时候选择【组合】就可以永久将它们组合在一起了，在编辑器可以一起被拖动。

功能介绍篇：家族

家族功能在免费版中不可用，但可以简单介绍一下它的作用。

例如，目前我有 3 种不同的精灵对象类型。

在没有家族的情况下，可能要像这样重复写 3 遍事件，非常麻烦对吧？

有家族的话，只需要写 1 次，就可以应用给家族成员了~

还可以给家族添加家族行为、家族变量、滤镜等，这样里面的所有成员都会获得这个属性。包括还有家族动作，也是非常方便的功能。这里先不细讲了，感兴趣也可以在案例库里搜索 家族。

功能介绍篇：时间轴

时间轴，在免费版里也可以有限使用。玩过 Flash 吗？或者有没有美术选手做过关键帧动画之类的。

时间轴就是可以让你在某个时间节点设置一个关键帧，记录当前的状态，接着在下一个时间节点也设置一个关键帧，这样时间轴就会帮你将 2 个状态自动补间，从前面过渡到后面的关键帧状态。

你还可以跳转补间动画的运动曲线，也就是缓动函数，来模拟不同的运动节奏。什么是缓动曲线呢？C3 里也有一个行为叫“补间动画”，其实它们都是同一个东西。你可能第一次接触到这个名字，但你绝对经常在各种地方能感受到它们。例如一些游戏里的 UI，它会飞进画面中，还可能会回弹一下，这就是缓动函数的其中一种。

这里先放一个网站参考下 easings.net/zh-cn，你可以把你的手举在空中，感受一下这个运动曲线的变化，你就能理解它们的作用了。这里只是列举了一些比较常用的曲线，在 C3 你也可以自己自定义动画曲线，如果你注意到有个 缓动曲线 的子文件夹。

官方提供了非常多时间轴的使用案例，感兴趣可以看看。

功能介绍篇：流程图

流程图功能是最近推出的一个功能，有点类似蓝图那种节点式工具，在 C3 也可以玩意大利面条那般的连连看了。但这个流程图是不带任何逻辑事件的，只是纯数据格式。真正处理逻辑的部分还是在事件表。

流程图很适合用来制作：分支文字冒险游戏、AI 行为树、状态机、问卷测试等。

官方也提供了一些案例可以参考

感觉讲到这里也差不多了，那些没介绍的，留着以后慢慢介绍吧~

下一篇就可以将实际操作了。
（未完待续）
https://www.zhihu.com/column/c_1416797906812329984