小窍门

ProtoPie Connect 和 Unreal Engine 5 集成

深入探索 ProtoPie Connect 和 Unreal Engine 的融合。

Jubilee Mayanja, Prototyper

April 22, 2024

ProtoPie Connect 和 Unreal Engine 5 集成
ProtoPie 成为游戏设计师和开发者的有力盟友，提供一个用户友好的平台，轻松原型化真实世界的场景。与 Unreal Engine 结合，打造沉浸式和交互式界面的可能性是无限的。
在这个逐步手册中，我们将探索 ProtoPie Connect和 Unreal Engine 的融合，帮助你轻松地将你的 UI 想法变为现实。

概览

步骤1. 在 Unreal Engine 中设置 Web Browser 插件
步骤2. 创建一个新的用户界面小部件
步骤3. 在你的小部件中添加 Web Browser
步骤4. 配置 Web Browser 小部件
步骤5. 创建一个蓝图来显示小部件
步骤6. 将 UI 小部件添加到蓝图中
步骤7. 在 Unreal Engine 中测试你的 ProtoPie 原型

步骤1. 在 Unreal Engine 中设置 Web Browser 插件

首先，在 Unreal Engine 中设置 Web Browser 插件。
  1. 打开你的 Unreal Engine 项目。
打开你的虚幻引擎项目。
打开你的虚幻引擎项目。
2. 转到“编辑”菜单，然后选择“插件”。
从编辑菜单中选择插件。
从编辑菜单中选择插件。
3. 在插件窗口中搜索“Web Browser”插件。
搜索网页浏览器插件。
搜索网页浏览器插件。
4. 如果尚未启用，启用 Web Browser 插件。
5. 重新启动 Unreal Engine 以应用更改。
激活Web浏览器插件，然后重新启动虚幻引擎以实现更改。
激活Web浏览器插件，然后重新启动虚幻引擎以实现更改。

步骤2. 创建一个新的用户界面小部件

在设置 Web Browser 插件后创建一个新的用户界面小部件。
1. 转到 Unreal Engine 中的“内容浏览器”。
2. 在内容区域右键点击，选择“用户界面”，然后选择“小部件蓝图”以创建一个新的小部件。
创建一个新的小部件蓝图。
创建一个新的小部件蓝图。
3. 选择“用户小部件”并适当地命名你的小部件。
选择“用户小部件”并命名您的小部件。
选择“用户小部件”并命名您的小部件。

步骤3. 在你的小部件中添加 Web Browser

在下一步中，你必须在你的小部件中包括 Web Browser。
  1. 双击刚刚创建的小部件蓝图以打开它。
  2. 一个新的窗口会打开；你可以点击并拖动这个窗口到主标签页。
将小部件蓝图拖到主选项卡。
将小部件蓝图拖到主选项卡。
3. 在设计师标签页中，在左侧的“实验性”下的调色板面板中搜索“Web Browser”小部件。
在左侧调色板中搜索“网页浏览器”小部件。
在左侧调色板中搜索“网页浏览器”小部件。
4. 将 Web Browser 小部件拖放到你的小部件布局中。
将Web浏览器小部件拖放到您的小部件布局中。
将Web浏览器小部件拖放到您的小部件布局中。
5. 调整（拖动双箭头）并定位 Web Browser 小部件以适应你的设计。
调整Web浏览器小部件的大小和位置，以适应您的设计。
调整Web浏览器小部件的大小和位置，以适应您的设计。

步骤4. 配置 Web Browser 小部件

你将通过复制和粘贴 ProtoPie 原型的 URL 来设置 web browser 小部件。
  1. 选择 Web Browser 小部件后，转到详细信息面板。
  2. 找到“Initial URL”属性。在这里，你将输入你的 ProtoPie 原型托管的 URL。
找到“初始URL”属性。
找到“初始URL”属性。
3. 启动 ProtoPie Connect 并导入你的原型，选择从云端（仅企业版）或上传本地的 Pie 文件。检查你的网络设置和权限，以避免从云端加载原型时出现连接问题。
将您的原型（Pie）导入ProtoPie Connect界面。
将您的原型（Pie）导入ProtoPie Connect界面。
4. 点击网页浏览器图标，在浏览器中打开 Pie 文件。
单击网页浏览器图标，在浏览器中打开馅饼。
单击网页浏览器图标，在浏览器中打开馅饼。
5. 如果你的 Pie 有透明背景，在 URL 的末尾添加 “&bg=transparent”。
如果需要，启用透明背景。
如果需要，启用透明背景。
6. 从地址栏复制整个 URL，返回到 Unreal，然后将其粘贴到“Initial URL”字段中。确保启用“支持透明度”选项。
将ProtoPie Connect浏览器视图中的完整URL插入Unreal中的“初始URL”属性中。
将ProtoPie Connect浏览器视图中的完整URL插入Unreal中的“初始URL”属性中。

步骤5. 创建一个蓝图以显示小部件

  1. 转到内容浏览器中的“蓝图”文件夹。
  2. 右键点击“蓝图类”，然后选择一个适合显示 UI 的类，例如 Actor 或 PlayerController。
  3. 命名你的蓝图，并打开它。
命名你的蓝图，然后打开它。
命名你的蓝图，然后打开它。
4. 由于这个指南使用的是“第三人称”Unreal模板，选择“BP_ThirdPersonCharacter”。
选择“BP_ThirdPersonCharacter”。
选择“BP_ThirdPersonCharacter”。

步骤6. 将 UI 小部件添加到蓝图

  1. 在蓝图编辑器中，转到“事件图”。
  2. 创建一个新的“创建小部件”节点，并选择你的 Web Browser 小部件作为类。
  3. 将“创建小部件”节点连接到适当的事件（例如，对于一个 Actor，使用“Event BeginPlay”，或者键盘/游戏手柄按键）。
将“创建小部件”节点连接到适当的事件。
将“创建小部件”节点连接到适当的事件。
4. 添加一个“添加到视口”节点，并将其连接到“创建小部件”节点，以在事件触发时显示小部件。
5. 按键盘上的“M”键以创建小部件。
将UI小部件添加到蓝图中。
将UI小部件添加到蓝图中。

步骤7. 在Unreal Engine中测试你的ProtoPie原型

进行最终测试，你将在Unreal中测试你的ProtoPie原型。
  1. 编译并保存你的蓝图。
  2. 如果你的蓝图角色还没有成为其他蓝图的一部分，比如PlayerController，你可以将其拖放到关卡中。
  3. 按下“播放”按钮在编辑器中运行游戏并测试集成。你的ProtoPie原型应该会在游戏环境中使用Web Browser小部件显示出来。
按“播放”在编辑器中运行游戏并测试集成。
按“播放”在编辑器中运行游戏并测试集成。
  1. 按下键盘上的“M”键查看你的Pie。
按键盘上的“M”键查看您的馅饼。
按键盘上的“M”键查看您的馅饼。

释放ProtoPie的无限可能性

ProtoPie Connect 和 Unreal Engine 的结合为希望突破数字交互界限的创作者提供了众多可能性。无论你是为游戏、模拟还是任何交互媒体设计，这个教程都为你的创意项目奠定了坚实的基础。
现在你已经学会了如何连接ProtoPie和Unreal Engine，还等什么呢？
今天就开始使用ProtoPie的免费版本，释放你创意愿景的全部潜力。你的下一个创新项目从现在开始——祝你原型设计愉快！