探索 ProtoPie Connect 的强大功能——这是一款对设计师和开发者都至关重要的原型工具。本指南详细介绍了如何将 Unity WebGL 构建文件无缝集成到 ProtoPie Connect 中，让你能够轻松完善用户界面并优化菜单流程。
按照这些清晰的分步说明，使用 Web-Embed 图层将你的 Unity WebGL 构建嵌入到 ProtoPie Connect。开启这段变革之旅，将你的设计工作流提升到新高度。
**免责声明：**本教程需要使用 ProtoPie Connect Enterprise。有关 ProtoPie Connect 的更多信息，请联系 ProtoPie 销售团队。另外，也请查看这篇关于 ProtoPie Connect 的博客。
概览
步骤 1. 在 Unity 中构建 WebGL 文件
步骤 2. 上传到 GitHub
步骤 3. 在网页浏览器中运行你的游戏
[步骤 4. 与 ProtoPie Connect 集成
](/blog/unity-webgl-build-with-protopie-connect#step-4-integrate-with-proto-pie-connect)
步骤 1. 在 Unity 中构建 WebGL 文件。
1. 打开你的项目：首先打开你现有的 Unity 项目。
2. 将平台切换为 WebGL
前往
File > Build Settings。在平台列表中选择
WebGL。点击
Switch Platform，将构建目标更改为 WebGL。
3. 配置构建设置
前往
Edit > Player Settings。根据你的需求自定义
Resolution and Presentation下的设置。本教程使用PWA设置以实现全宽分辨率。
💡 **提示：**当你从主机服务器在浏览器中运行 WebGL 项目时，可能会遇到压缩错误，如下所示：
如果你在运行 webGL 文件时遇到上述错误，一个解决方案是在 Unity 中更改压缩格式。
前往
Edit > Player Settings > Player > Publishing Settings > Compression format。根据项目需求调整设置。本教程使用 “Brotli” 压缩设置，以便在从 GitHub 托管并运行 Unity WebGL 项目时不出现运行错误。
4. 构建项目。
在
Build Settings窗口中，点击Build。选择电脑上的一个位置来保存构建文件，并等待 Unity 编译项目。
步骤 2. 上传到 GitHub。
**1. 为上传准备你的构建：
**
确保你的构建文件夹包含
index.html文件，以及运行游戏所需的.js和.data文件。
2. 创建新仓库：
登录你的 GitHub 账户。
进入 Repositories 选项卡并点击
New。为仓库命名并将其设置为公开（如果你希望任何人都能访问）。
创建仓库。
3. 上传文件：
前往仓库主页并点击
uploading an existing file链接。
拖放你的构建文件，或使用文件浏览器选择你的 WebGL 构建文件夹。
将更改直接提交到 main 分支。
步骤 3. 在网页浏览器中运行你的游戏。
1. 启用 GitHub Pages：
前往你的仓库设置。
向下滚动到
GitHub Pages部分。选择
main分支和/ (root)作为来源。保存设置。
GitHub 会提供一个托管你项目的在线 URL。页面可能需要几分钟才会生效。几分钟后刷新页面以查看 URL。
2. 访问你的游戏：
启用并运行 GitHub Pages 后，访问提供的 URL。
你的 Unity WebGL 游戏应会直接在浏览器中加载。
💡 **提示：**如果你访问提供的 URL 时出现 404 错误，不要慌。这通常是因为你的文件位于子文件夹而不是根目录。
如下所示，我们的文件位于子文件夹** /.._GamePlay/PP_rpg/**，根文件夹是 /.._GamePlay
要解决这个问题，只需将子文件夹名称添加到 URL 链接中，Unity 项目就应该可以运行。在本教程中是将 /PP_rpg/ 添加到 URL。
步骤 4. 与 ProtoPie Connect 集成。
1. 在 ProtoPie Connect 中打开 Pie 文件
启动 ProtoPie Connect 并导入你的原型，可选择来自 Cloud（仅限 Enterprise）或上传本地 Pie 文件。请检查网络设置和权限，以避免从 Cloud 加载原型时出现连接问题。
2. 创建组并查看 Pie 文件
创建一个
Group，拖放将 Pie 文件移入该组。点击网页浏览器图标在浏览器中打开 Pie。
3. 编辑组
在页面上右键单击以查看 ProtoPie Connect 顶部菜单 UI，并选择
Edit
在编辑视图中点击
+Add菜单并选择Web Embed。你可以在图层窗口中通过拖放重新排列图层以设置层级。
根据你的偏好或项目需求调整网页视图窗口大小。
复制步骤 3 中的 GitHub 链接并粘贴到 Source 输入框。Unity 文件将会加载并运行。
4. 查看集成后的原型
在顶部菜单选择
View以返回查看模式你可以右键单击鼠标来隐藏 ProtoPie Connect 顶部菜单 UI。
使用 web-embed 图层后，你已成功将 Unity WebGL 构建集成到 ProtoPie Connect 中。此集成带来了更丰富的交互体验，使你的 Unity 项目能够无缝融入 ProtoPie 原型。因此，你现在可以直接在 UX/UI 设计中利用 Unity 强大的 3D 和游戏引擎能力，提升原型的真实感与响应性。
接下来，你可以探索更多自定义与优化的可能性，确保你的原型满足并超越用户期望。
