概览
配置 ProtoPie 原型
设置 Unity 项目
设置 ProtoPie Unity 插件
准备场景管理脚本
设置 Unity 到 ProtoPie 的通信
构建 Unity 项目并将其导入 ProtoPie
在 ProtoPie Connect 中预览和测试
本分步教程将指导你使用 ProtoPie Connect 和 Unity 插件创建一个游戏 UI 演示。我们将涵盖导入文件、设置交互，以及将 Unity 与 ProtoPie 集成以获得流畅的游戏体验。
要跟随教程操作，请从第
分钟开始观看演示。
在开始教程之前，先预览最终演示，以了解我们要实现的目标。
该演示展示了一个基础 MMO RPG 界面，其中 UI 元素由 ProtoPie 创建。请注意屏幕上的各种 UI 元素，例如选项卡、进入按钮和功能按钮。这些 UI 元素构建于 ProtoPie 中，并将叠加在 Unity 游戏环境之上。
使用 ProtoPie 和 Unity 打造沉浸式游戏体验。
1. 配置 ProtoPie 原型
1.1 下载 Pie
下载并打开这个 Pie 文件到 ProtoPie Studio 中。它包含我们将用于控制 Unity 游戏的 UI 元素和交互。
1.2 添加 UI 元素
接下来，我们将在 ProtoPie 中创建 UI 元素。这些元素将作为 Unity 游戏的控制界面，例如：
UI 元素：在 ProtoPie 中创建按钮、选项卡和其他交互组件。
图层叠放：确保这些 UI 元素能够正确覆盖在 Unity 项目之上。这意味着它们的位置和尺寸应适配游戏屏幕。
1.3 配置 ProtoPie 到 Unity 的消息
接下来，我们将配置 ProtoPie 发送给 Unity 的特定消息，例如：
进入按钮（场景 01）：在 ProtoPie 中配置进入按钮向 Unity 发送消息。此消息将触发场景切换到游戏体验场景。
主页按钮（场景 02）：同样，配置主页按钮向 Unity 发送消息。此消息将把场景恢复到主菜单。
背景不透明度（场景 02）：将背景不透明度颜色设置为 0。
2. 设置 Unity 项目
2.1 下载 Unity Game UI 模板
下载这个 Unity Game UI 模板 并在 Unity 中打开。
2.2 准备 Unity 场景
该项目包含两个场景：Island 场景和 MainMenu 场景。它们位于 Assets→Scenes 文件夹中。我们将先从 MainMenu 场景开始，然后对 Island 场景重复该过程。
3. 设置 ProtoPie Unity 插件
场景中应已包含一个名为“ProtoPie”的游戏对象，其中包含用于与 ProtoPie Connect 建立通信的必要代码脚本。
进一步查看 Mapping 可知，消息方向将是“ProtoPie to Unity”，消息为“CHANGE_SCENE_2”。
你可以直接编辑 Mapping Table。可在表中添加/删除/编辑映射。
4. 准备场景管理脚本
接下来，我们将编写一个脚本来管理 Unity 中的场景切换。
场景管理器：编写一个脚本（例如
ChangeScene）用于切换 Unity 场景。该脚本将由来自 ProtoPie 的消息触发。示例：下面的脚本包含一个函数
_ChangeScene()，调用后将根据公开变量sceneName中设置的场景名进行切换。
在 Unity 场景中创建一个游戏对象并添加
ChangeScene脚本。在本项目中，游戏对象SceneManager包含该脚本。sceneName变量是公开的，因此你可以将其改为任意其他名称，只要与要切换到的场景名称一致即可。
为确保 Unity 收到来自 ProtoPie 的
CHANGE_SCENE_2消息时会调用函数_ChangeScene，请通过拖放将SceneManager游戏对象添加到映射中的“Desired action”下。
从下拉菜单列表中找到函数“_ChangeScene”。
对 Island 场景重复同样的过程。
创建一个
SceneManager对象，添加ChangeScene脚本，并将场景名设置为你想切换到的场景；在此示例中为“MainMenu”。
创建一个包含消息
CHANGE_TO_SCENE_1的新映射，并将方向设置为 ProtoPie 到 Unity。
5. 设置 Unity 到 ProtoPie 的通信
5.1 设置 Unity 到 ProtoPie 的消息
接下来，我们将配置 Unity 向 ProtoPie 回传消息。这使 Unity 中的游戏动作能够触发 ProtoPie 中的响应。
示例：当游戏角色收集到金币时，Unity 会向 ProtoPie 发送消息，以更新 UI 中的新金币数量。
要触发 Unity 向 ProtoPie 发送消息，必须调用一个 Unity 事件。
编写脚本，在玩家与金币碰撞时调用 Unity 事件
onCoinCollision.Invoke()。脚本还应包含碰撞后销毁金币的代码。这样，当玩家碰到金币时，事件会被触发，金币会消失。
此外，你还可以添加一个脚本让金币旋转。
将这两个脚本都附加到一个
Coin游戏对象上。
最后一个需要的脚本是在发送消息时发送金币数值。请编写一个包含金币数值的脚本。该变量应为字符串类型。
将该脚本附加到一个名为
sendCoinValue的新游戏对象上。
在 ProtoPie 游戏对象中为场景中的每个金币创建映射。映射消息应为
COIN，因为这是 Unity 将发送给 ProtoPie 的消息。将方向设置为 Unity 到 ProtoPie。
将
Coin游戏对象拖到 Event Object 槽位。脚本会自动找到 invoke 代码。
将
sendCoinValue游戏对象拖到 value source object 槽位。脚本会自动找到字符串变量。
对场景中其余金币重复此操作。将每个金币添加到各自的映射中。
5.2 设置 ProtoPie 响应
我们将配置 ProtoPie 对来自 Unity 的消息进行响应。
消息处理：在 ProtoPie 中，设置对 Unity 传入消息的响应。例如，接收到“coin”消息时，增加金币计数、播放音效并为金币图标添加动画。
6. 构建 Unity 项目并将其导入 ProtoPie
6.1 构建 Unity 项目
配置好交互后，我们将把 Unity 项目构建为 WebGL 应用。
前往 File → Build Settings。确保包含所有场景，并将平台设置为 WebGL。
在构建项目之前，需要在 Player 设置中进行一些修改。前往 Edit → Project Settings → Player。
将 WebGL 模板设置为 PWA。
将压缩格式设置为 Disabled。
构建流程：构建 Unity 项目并将其导出为 WebGL 应用。这使我们能够将其作为 Unity 图层集成到 ProtoPie Connect 的 Stage View 中。
压缩文件：将构建文件夹压缩为 ZIP 文件，以便轻松导入 ProtoPie。
6.2 将 Unity 构建 ProtoPie 文件导入 ProtoPie Connect Stage View
打开 ProtoPie Connect 并创建一个 Pie 组。
从云端或你的电脑添加 Pie。
将你的 Pie 拖放到该组中。
将鼠标悬停在组卡片的标题图层上以显示图标按钮。选择 View 图标。
浏览器会打开一个包含 Pie 的新标签页。这称为Stage View。在页面任意位置右键以显示顶部菜单，然后点击右上角的编辑按钮。
现在，我们将把 Unity 构建导入 ProtoPie 以完成集成。
7. 在 ProtoPie Connect 中预览和测试
最后，我们将预览并测试该演示，以确保一切按预期工作。
在 Stage View 中插入一个新的 Unity 图层。这将是嵌入 Unity 构建的图层。
根据需要重新排序图层。将 ProtoPie 图层放在顶部，Unity 图层放在底部，以便 UI 覆盖在 Unity 图层之上。
将 WebGL 构建 zip 文件导入新创建的 Unity 图层。
通过选择标题左上角的 View 按钮返回 View 模式。可在标题菜单中选择全屏图标切换到全屏模式以获得更好的测试体验，或在屏幕任意位置右键隐藏标题菜单。
测试交互。点击 ProtoPie 中的各种按钮并观察其交互。每个按钮都应触发发送到 Unity 的对应消息，例如使用 ProtoPie UI 在场景之间导航，以及在 Unity 中收集金币以触发 ProtoPie 响应。
使用 ProtoPie 与 Unity 提升你的游戏 UI 原型设计
本教程展示了 ProtoPie 与 Unity 的强大集成能力，让你能够构建交互性强且响应灵敏的游戏 UI。按照这些步骤，你可以创建流畅交互并提升游戏项目中的用户体验。立即下载 ProtoPie，免费开启你的游戏 UI 原型设计之旅。
