使用 Smart Shape 构建 OrbitRun | 第 1 部分：首次发射

在本教程中，你将制作一款受 Tiny Wings 启发的山坡滑翔游戏。按住屏幕沿山坡俯冲，在山谷处松开，然后借助惯性冲上天空。飞行过程中，Smart Shape 会生成后续山坡。

从一个空白项目开始，跟着截图和 GIF 一步步操作。

轻点截图或示意图，即可打开原图并查看细节。

本系列教程路线

1. **本页（步骤 1–5）：**创建项目、添加飞船和界面，并生成你的第一段赛道。
2. 第 2 部分：控制飞行：控制、惯性、距离和倒计时。
3. 第 3 部分：世界变化与重玩：更换地形美术、结束飞行并保存个人最佳成绩。
4. 第 4 部分：声音与收尾润色：音乐、尾迹、粒子和加载备用方案。
5. 第 5 部分：找到飞行节奏：更强劲的飞行、翱翔镜头和逐步加快的节奏。
6. 第 6 部分：电池拾取物：可重复使用的拾取物和可延长的能量计时器。

每添加一项功能，都花点时间试玩一下。这样能更早发现错误，也能亲身感受每处改动的效果。如果你已经熟悉编辑器，可以根据示意图连接行为，并在操作过程中尝试调整参数。

获取相同的资源

• 下载 OrbitRun 资源：PNG 美术、音频和粒子文件。
• 下载仅包含资源的起始项目。这是一个已导入资源的空白项目。
• 下载全部 20 个可编辑检查点。每个 .tap 文件名中的数字表示已完成的最后一步。
• 下载重新构建的完整项目，其中的行为组已分隔并命名。

在 iPad 上，使用 Safari 下载 ZIP 文件，在 文件 → 下载项 中找到它，然后轻点解压。对于 .tap 项目，请使用“文件”的“共享”菜单，在 hyperPad 中打开。请将自己的项目和检查点分别保存为不同的项目。你可以用检查点对照设置，而不会丢失自己的进度。原始粒子文件夹也可供重复使用；要将现成的粒子效果导入资源库，最简单的方法是使用起始项目。

你需要使用提供 Generate Smart Shape，并支持 Terrain、Endless 模式和 Ready 触发器的 hyperPad 版本。如果缺少此行为，请先换用包含 Smart Shape 的版本，再继续操作。

1. 创建空白横向项目

1. 在 我的项目 中创建一个新的空白项目，命名为 OrbitRun Build Along。
2. 选择横向 iPad 布局，比例为 4:3。本教程使用的世界缩放比例为 32 像素/米。
3. 打开世界设置（编辑器工具栏上的地球图标）。将世界重力设为 X 0，Y 0。稍后你会为飞船单独设置重力。
4. 保留一个世界图层供飞船使用。菜单、按钮和分数标签使用 Scene UI；这些对象在镜头移动时应保持在屏幕上的固定位置。
5. 熟悉 播放、对象属性面板，以及右下角的资源库按钮。

轻点“播放”。你应该会看到一个空场景。使用玩家菜单返回编辑器。

飞船属于世界图层，因为它要沿着赛道移动。标签应放在 Scene UI 上，这样镜头移动时它们会留在原位。

2. 导入美术资源

1. 在“文件”中解压下载的资源。
2. 打开编辑器的 资源库。在“图形”中，使用 导入 导入 PNG 文件。通过音频库导入 .m4a 文件。如果你打开的是仅包含资源的起始项目，这些资源就已经导入了。
3. 对照以下列表检查名称。保留这些名称，之后更容易识别行为设置。

• orbit-skimmer：玩家飞船
• orbit-space：场景背景
• luna-top、luna-fill：紫色起始地形
• aurora-top、aurora-fill：第二个绿色世界
• ember-top、ember-fill：第三个暖红色世界
• orbit-panel：菜单卡片和按钮
• orbit-pixel：可拉伸的纯色矩形
• orbit-trail：飞船尾迹

4. 在 场景设置 中，将 orbit-space 设为背景。让它保持铺满屏幕。

打开导入的资源，检查飞船背景是否透明，并确认每个地形世界都有顶部图形和填充图形。

Smart Shape 会使用顶部图形沿山坡铺设地形，并用中间图形填充下方地面。因此，每个世界都需要这两个文件。

3. 为 Skimmer 设置小巧的圆形碰撞体

添加、选中并打开碰撞编辑器

1. 在 资源库 → 图形 中轻点 orbit-skimmer，将它添加到底部停靠栏。
2. 选中 Main 世界图层，然后将飞船从停靠栏拖入场景。
3. 轻点放置好的飞船。在“对象属性”中，轻点属性面板旁边窄工具栏里的 碰撞编辑器。这段录制中的薄荷绿圆环会标出轻点位置；移动的圆环会跟随拖动操作。

将碰撞体设为圆形

4. 在碰撞编辑器中，轻点左侧的圆形工具。将圆形放在飞船中央，直径大致与飞船图像的宽度相同。轻点绿色勾号以应用设置。

将对象重命名为 Skimmer。设置为 X 8 米，Y 21.5 米，锚点居中，缩放为 85%。这些数值很重要：之后计算分数时会减去起始 X 坐标，而飞船的大小和高度会影响它第一次着陆的位置。在 物理 中选择 动态，并设置 质量 1 千克、摩擦力 0%、弹力 0%。保持碰撞启用。

添加两个起始属性

5. 在“对象属性”中打开 属性 标签页。轻点 +，将属性命名为 runState，并将值设为 menu。再添加一个名为 music、值为 1 的属性。这些都是文本键；大小写必须与示例完全一致。

属性是存储在对象上的值。游戏运行时，行为会读取和更改这些值。完整的编辑器操作流程请参阅对象属性，物理控件请参阅对象物理属性。

腾出操作空间：调整编辑器视图

6. 选择左侧的手形工具，然后拖动空白区域，直到绿色屏幕矩形和 Skimmer 都清晰地显示在视野中。这只会移动你的编辑器视图，不会移动游戏中的飞船。想要选中对象时，切换回箭头工具。

绿色矩形是屏幕区域的预览。不要仅仅为了让飞船在编辑器窗口中居中而移动它。第 5 步会使用 Screen to Object、Screen Follow 和 Zoom Screen 设置游戏镜头；第 5 部分稍后会加入翱翔缩放效果。编辑器工具请参阅界面概览。

点击“播放”。由于重力为零，飞船应该保持静止。如果飞船在移动或下落，请重新检查重力设置。

圆形碰撞体能让飞船沿山坡滑行，不会被机翼尖端卡住。之后你会旋转飞船图像来匹配飞行方向，但圆形碰撞体与地面的接触方式不会改变。

4. 在 Scene UI 中搭建飞行界面

你的界面需要标题画面、飞行信息和结束时的结果画面。以下图片可供参考，间距和颜色由你决定。

打开“图层”并选择 Scene UI，这样镜头移动时界面会固定在屏幕上。将这些对象的物理类型设为 Scenery，并关闭碰撞。如果你是第一次使用 UI 图层，请参阅图层。

先放置卡片，再添加标签

以下是标题画面完成后的参考效果：

1. 将 orbit-panel 拖到 Scene UI 上，调整大小作为卡片。再添加一个较小的面板作为 Launch 按钮。
2. 在 资源库 → UI → 字体 中选择字体，将标签拖到卡片上，然后编辑文本。GIF 展示了完整操作过程。
3. 重复以上步骤，添加其他标签和音乐按钮。确保标题易于阅读，并在按钮周围留出充足空间。

**后续步骤中会用到的名称：**将卡片命名为 Menu Card，标题命名为 Wordmark，小号副标题命名为 Subtitle，说明文字命名为 Howto。将 Launch 按钮图形命名为 Start，其标签命名为 Start Label。在它下方添加 Menu Best，并在角落添加 Music Button 和 Music Label。每个标签都应放在对应按钮图形的前面。

HUD 和结果界面对象

HUD 会让屏幕中部保持空旷，以便飞行：

在顶部添加名为 Distance、Speed 和 Clock 的标签。在它们下方放置 Stage，并在靠近底部的位置放置 Cue。添加 Flow Label，用于显示简短的奖励消息；再添加一条细长的 orbit-pixel 分隔线，命名为 Hud Rule。照着图片填写占位文本，具体尺寸和间距由你决定。

用相同的方法搭建结果卡片：

再添加一个面板，命名为 Results Card，并添加 Results Title、较大的 Results Score 和 Results Tip。添加一个名为 Replay 的按钮图形，以及一个名为 Replay Label 的标签，文本为 FLY AGAIN。之后设置行为时，这些名称能帮助你找到正确的对象。

添加触摸区域

放置一个名为 Input Plane 的 orbit-pixel 图形，让它位于其他 Scene UI 对象后方，并拉伸至覆盖整个屏幕。将其颜色的不透明度设为 0%，但保持 可见 状态，以便它能接收触摸。

通过对象的 可见 设置隐藏 HUD 和结果界面，稍后由行为将它们显示出来。保持标题画面和音乐按钮可见。

点击“播放”。检查标题是否清晰易读、按钮是否容易点击，以及 HUD 和结果界面是否隐藏。LAUNCH 按钮将在下一步启用。

5. 生成赛道，然后起飞

如果菜单挡住了 Skimmer，请打开“图层”，轻点 Scene UI 旁的眼睛图标，在编辑时隐藏该图层。选择 Main，轻点 Skimmer，再选择 行为。按下“播放”前，重新打开 Scene UI 的眼睛图标，这样菜单和触控控制才可用。

选择 Skimmer → 行为。本系列教程中的所有游戏逻辑都添加到 Skimmer 上，即使行为的目标是 UI 对象也一样。这样你就能在一个地方查看整个游戏。

连接行为的快速指南

编辑器控件介绍请参阅行为编辑器概览。搭建前两个行为时，请保持本教程页面打开以便对照。

在左侧面板中搜索 Started Touching。双击搜索结果将其添加，然后拖动该行为，为下方留出空间。你也可以直接从列表中将它拖出来。

现在搜索 Set Behavior State，将它添加进来，然后把 Started Touching 底部的输出端拖到它上面。观察连接线出现，并看到第二个行为吸附在第一个行为下方。

现在轻点每个行为以打开其属性。你可以在顶部的字段中为它命名。这些名称是方便识别用途的别名。例如，搜索 Started Touching，然后将它命名为 Start Touch。

白色连接线会告诉 hyperPad 接下来要运行什么。将底部的白色圆点拖到另一个行为上，即可建立连接。如果同一事件需要启动第二个操作，请使用另一个空闲圆点。

数值则通过另一种方式传递。选中接收值的行为，然后将来源行为的绿色输出图标拖到输入字段中。从列表中选择所需的输出。这会传递来源行为的结果；只有在该行为自身的执行连接触发时，它才会运行。你将在第 2 部分通过录制示例练习这种操作。

示意图会一次添加一个行为。复用表示这个行为已经添加过。高亮和编号徽章只是教学辅助。遇到 If 时，底部输出代表条件为 true，右侧输出代表条件为 false。

按照示意图的流程操作，并留出足够空间以便追踪每条连接线。使用 注释 将行为分组。

连接开始按钮

1. 添加 Set Gravity，并将其别名设为 Menu Gravity。目标设为 Skimmer，重力类型设为 Object，X 0，Y 0。不要在顶层为它连接其他行为，这样场景开始时它就会运行。

先设置 Launch 按钮。首次点击后，它会禁用自身，确保每次飞行只生成一条赛道。

打开已完成的静态示意图。

1. 使用上方录制中展示的 Started Touching 行为；如果你只是观看了录制，现在就添加它。将其命名为 Start Touch。
2. 使用刚刚添加在旁边的 Set Behavior State 行为，并将其命名为 Disarm Start。保留录制中建立的连接。如果你从这里开始操作，请添加此行为，并将 Start Touch 底部的白色圆点拖到它上面。
3. 添加 Generate Smart Shape，并将其命名为 Generate。将 Disarm Start 上一个尚未使用的底部白色圆点拖到 Generate 上。
4. 添加 Change Label，并将其命名为 Loading。将 Disarm Start 上另一个尚未使用的底部白色圆点拖到 Loading 上。

使用以下设置：Start Touch 的目标设为 Start，关闭 Touch Anywhere，开启 Absorbs Touch。Disarm Start 用于禁用 Start Touch。Loading 的目标设为 Start Label，文本为 PREPARING ORBIT...。Generate 的设置请见下一节。

更多详情请参阅在行为之间共享数值。执行连接线和数据输入的用途不同。

配置 Generate Smart Shape

• 形状类型 / 操作：Terrain / Generate
• 生成模式 / 跟随对象：Endless / Skimmer
• 山丘高度 / 山丘间距：15 米 / 32 米
• 山丘变化幅度 / 地面深度：38% / 35 米
• 顶部 / 中间：luna-top / luna-fill
• 摩擦力 / 弹力：0.08 / 0
• 放置位置：X 0 米，Y 12 米，世界图层
• 碰撞模式（如果显示）：Surface
• 触发时机：Ready

Generate Smart Shape 参考详细解释了各项地形设置。

打开 Position and layer 输入放置位置，即使之后要将该部分折叠起来也一样。不要填写侧面和底部的美术资源，并使用提供的中间图形。

添加 Ready 分支

将 Generate 的输出连接到此列表中的每个操作。这些操作会在初始地形准备就绪时启动，而不是在首次触碰 LAUNCH 时启动。

• Hide Menu（Set Visibility）：隐藏 Menu Card、Wordmark、Subtitle、Howto、Start、Start Label、Menu Best
• Show Hud（Set Visibility）：显示 Distance、Speed、Clock、Stage、Cue、Hud Rule
• Running（Set Attribute）：Skimmer；runState = running
• Launch（Set Velocity）：Skimmer；X 20，Y 0；两个 Maintain Velocity 开关都设为 Off
• Camera（Screen to Object）：Skimmer；启用两个轴；持续时间 0
• Zoom（Zoom Screen）：85%，持续时间 0
• Release（Set Gravity）：Skimmer；Object 重力；X 0，Y −12

Follow 使用 Screen Follow 跟随 Skimmer，并启用两个轴。Glide Cue 将 Cue 的文本改为 GLIDING / HOLD ON THE DOWNSLOPE。

赛道准备就绪后，隐藏菜单并显示飞行信息。

打开已完成的静态示意图。

1. 复用 Generate。
2. 添加 Set Visibility，并将其命名为 Hide Menu。将 Generate 上一个尚未使用的底部白色圆点拖到 Hide Menu 上。
3. 添加 Set Visibility，并将其命名为 Show Hud。将 Generate 上一个尚未使用的底部白色圆点拖到 Show Hud 上。
4. 添加 Set Attribute，并将其命名为 Running。将 Generate 上一个尚未使用的底部白色圆点拖到 Running 上。

再使用两个 Ready 连接，启动飞船并设置滑翔重力。

打开已完成的静态示意图。

1. 复用 Generate。
2. 添加 Set Velocity，并将其命名为 Launch。将 Generate 上一个尚未使用的底部白色圆点拖到 Launch 上。
3. 添加 Set Gravity，并将其命名为 Release。将 Generate 上一个尚未使用的底部白色圆点拖到 Release 上。
4. 添加 Change Label，并将其命名为 Glide Cue。将 Release 上一个尚未使用的底部白色圆点拖到 Glide Cue 上。

设置镜头的起始视角，然后开始跟随 Skimmer。

打开已完成的静态示意图。

1. 复用 Generate。
2. 添加 Screen to Object，并将其命名为 Camera。将 Generate 上一个尚未使用的底部白色圆点拖到 Camera 上。
3. 添加 Zoom Screen，并将其命名为 Zoom。将 Generate 上一个尚未使用的底部白色圆点拖到 Zoom 上。
4. 添加 Screen Follow，并将其命名为 Follow。将 Camera 上一个尚未使用的底部白色圆点拖到 Follow 上。

点击“播放”，然后轻点一次 LAUNCH。紫色赛道出现时，菜单应被 HUD 替换，飞船也应开始移动。你已经完成首次起飞。分数和计时器会保持不动，直到第 2 部分。

所有操作都从 Ready 开始，确保飞船移动前下方已有地面。这个输出还会提供生成对象的 ID，你将在第 3 部分用它更换对象图形。

继续之前，试试将 Hill Spacing 从 32 改为 40。观察山丘间距变大后飞行会有什么变化，然后恢复为 32，以便继续下一课。

继续学习第 2 部分：控制飞行。