ProtoPie 作为游戏设计师和开发者的强大助手脱颖而出，提供了一个用户友好的平台，可轻松对现实场景进行原型设计。结合 Unreal Engine，打造沉浸式与交互式界面的可能性几乎无穷无尽。
在这份分步手册中，我们将探索 ProtoPie Connect 与 Unreal Engine 的融合，帮助你轻松将 UI 创意变为现实。
概览
步骤 1. 在 Unreal Engine 中设置 Web Browser 插件
步骤 2. 创建一个新的用户界面 Widget
步骤 3. 将 Web Browser 添加到你的 Widget 中
步骤 4. 配置 Web Browser Widget
步骤 5. 创建用于显示 Widget 的 Blueprint
步骤 6. 将 UI Widget 添加到 Blueprint 中
步骤 7. 在 Unreal Engine 中测试你的 ProtoPie 原型
步骤 1. 在 Unreal Engine 中设置 Web Browser 插件
首先在 Unreal Engine 中设置 Web Browser 插件。
打开你的 Unreal Engine 项目。
打开你的 Unreal Engine 项目。
进入“Edit”菜单，然后选择“Plugins”。
在 Edit 菜单中选择 Plugins。
在 Plugins 窗口中搜索“Web Browser”插件。
搜索 Web Browser 插件。
如果 Web Browser 插件尚未启用，请将其启用。
重启 Unreal Engine 以应用更改。
启用 Web Browser 插件，然后重启 Unreal Engine 以应用更改。
步骤 2. 创建一个新的用户界面 Widget
在设置好 Web Browser 插件后，创建一个新的用户界面 Widget。
在 Unreal Engine 中进入“Content Browser”。
在内容区域右键，选择“User Interface”，然后选择“Widget Blueprint”以创建新 Widget。
创建一个新的 Widget Blueprint。
选择“User Widget”，并为你的 Widget 命名。
选择“User Widget”并为你的 Widget 命名。
步骤 3. 将 Web Browser 添加到你的 Widget 中
下一步，你需要在 Widget 中加入 Web Browser。
双击你刚创建的 Widget Blueprint 将其打开。
会打开一个新窗口；你可以点击并将此窗口拖到主标签页中。
将 Widget Blueprint 拖到主标签页。
在 Designer 标签页中，在左侧 Palette 面板的“Experimental”下搜索“Web Browser”Widget。
在左侧 Palette 中搜索“Web Browser”Widget。
将 Web Browser Widget 拖放到你的 Widget 布局中。
将 Web Browser Widget 拖放到你的 Widget 布局中。
调整大小（拖动双箭头）并摆放 Web Browser Widget，使其符合你的设计。
调整大小并摆放 Web Browser Widget，使其符合你的设计。
步骤 4. 配置 Web Browser Widget
你将通过复制并粘贴 ProtoPie 原型 URL 来设置 Web Browser Widget。
选中 Web Browser Widget 后，前往 Details 面板。
找到“Initial URL”属性。在这里输入托管你的 ProtoPie 原型的 URL。
找到“Initial URL”属性。
启动 ProtoPie Connect 并导入你的原型，可从 Cloud（仅限 Enterprise）选择，或上传本地 Pie 文件。加载 Cloud 中的原型时，请检查网络设置和权限，以避免连接问题。
将你的原型（Pie）导入 ProtoPie Connect 界面。
点击网页浏览器图标，在浏览器中打开 Pie。
点击网页浏览器图标，在浏览器中打开 Pie。
如果你的 Pie 使用透明背景，请在 URL 末尾添加“&bg=transparent”。
如有需要，启用透明背景。
从地址栏复制完整 URL，返回 Unreal，并将其粘贴到“Initial URL”字段中。同时确保启用“Supports Transparency”选项。
将 ProtoPie Connect 浏览器视图中的完整 URL 填入 Unreal 的“Initial URL”属性。
步骤 5. 创建用于显示 Widget 的 Blueprint
在 Content Browser 中进入“Blueprints”文件夹。
右键选择“Blueprint Class”，然后选择适合显示 UI 的类，例如 Actor 或 PlayerController。
为你的 Blueprint 命名，并将其打开。
为你的 Blueprint 命名，并将其打开。
由于本指南使用 Unreal 的“Third person”模板，请选择“BP_ThirdPersonCharacter”。
选择“BP_ThirdPersonCharacter”。
步骤 6. 将 UI Widget 添加到 Blueprint 中
在 Blueprint 编辑器中，进入“Event Graph”。
创建一个新的“Create Widget”节点，并将你的 Web Browser Widget 选为类。
将“Create Widget”节点连接到相应事件（例如 Actor 的“Event BeginPlay”或“按下按键/手柄按键”）。
将“Create Widget”节点连接到相应事件。
添加“Add to Viewport”节点，并将其连接到“Create Widget”节点，以便在事件触发时显示 Widget。
按下键盘上的“M”键来创建 Widget。
将 UI Widget 添加到 Blueprint 中。
步骤 7. 在 Unreal Engine 中测试你的 ProtoPie 原型
最后，你将在 Unreal 中测试你的 ProtoPie 原型。
编译并保存你的 Blueprint。
如果你的 Blueprint actor 尚未作为其他 Blueprint（如 PlayerController）的一部分，你可以将其拖放到关卡中。
点击“Play”在编辑器中运行游戏并测试集成效果。你的 ProtoPie 原型应通过 Web Browser Widget 显示在游戏环境中。
点击“Play”在编辑器中运行游戏并测试集成效果。
按下键盘上的“M”键以查看你的 Pie。
按下键盘上的“M”键以查看你的 Pie。
使用 ProtoPie 解锁无限可能
ProtoPie Connect 与 Unreal Engine 的组合，为希望突破数字交互边界的创作者提供了众多可能性。无论你是在为游戏、仿真还是任何交互媒体进行设计，本教程都可作为你创意项目的坚实基础。
现在你已经学会如何连接 ProtoPie 与 Unreal Engine，还等什么？
立即免费开启你的 ProtoPie 之旅，释放你创意愿景的全部潜能。你的下一个突破性项目现在就开始——祝你原型设计愉快！
