自定义图层集成
ProtoPie Connect 的 Stage 视图使您能够将 ProtoPie 原型与多种自定义图层集成,包括网页、嵌入内容、实时摄像头和 Unity 项目。此集成可增强用户测试体验,并使您的设计更具动态效果。
创建 Stage 视图
请按照以下步骤创建 Stage 视图:
打开 ProtoPie Connect。
创建一个新 Group,并将您的原型(Pies)拖放到该组中。
选择该组。
点击 View 图标,在 Stage 中打开原型。
嵌入自定义图层
创建 Stage 视图后,右键单击以访问 Stage 选项菜单。要开始编辑,请点击 Edit 按钮。“Edit Mode”消息将确认已启用编辑。
要添加新原型或自定义图层:
在左上角,点击 Add。
您可以在 Stage 中包含以下图层:
ProtoPie 原型
通过 URL 或 iframe 代码嵌入的 网页内容(支持 Maps、Spline、Rive、Bezi 等)
实时摄像头(从可用摄像头或直播流选项中选择)
Unity 项目(支持导入 WebGL 构建)

配置网页嵌入图层
将新的 Web Embed 图层添加到 Stage 后,您可以通过属性面板设置其 URL。
您可以提供完整 URL 或 iframe 代码。网页嵌入支持多种格式,如 Maps、Spline、Rive 和 Bezi。请务必确保 URL 有效,并且您拥有访问该 URL 所需的权限。

配置实时摄像头图层
要将摄像头画面添加到您的项目中,请使用 Live Camera 图层。此功能支持:
通过 USB 连接的摄像头,例如网络摄像头
您笔记本电脑的摄像头
直播流 URL(HLS)
在使用摄像头图层之前,请确保已向您的网络浏览器授予权限。添加摄像头图层后,可通过 Camera 属性面板配置其属性。

配置 Unity 图层
要将 Unity 场景添加到您的项目中,请使用 Unity 图层。此功能支持:
导入 Unity 场景的 WebGL 构建
适用于 Unity 的 ProtoPie 插件
请务必将 您的 Unity 项目以 WebGL 作为目标平台进行构建。生成的 Build 文件夹将包含 .loader.js、.framework.js、.wasm 和 .data 文件,您需要将它们打包为 zip 文件。将该 zip 文件作为 Source File 插入,以将 Unity 项目作为图层导入。

Unity 插件 可使 Send/Receive 消息与 Unity 场景协同工作,从而增强 ProtoPie 与 Unity 图层之间的交互性。它是一个可添加到 Unity 项目的软件包,可从 Unity Asset Store 下载。有关更多信息,请参阅 Unity 插件 文档。
预览 Stage 视图
添加并配置图层后,可通过拖动在 Stage 中重新排列它们。要访问定位选项,请右键单击某个图层。准备就绪后,点击 View 预览 Stage。
常见问题
unity-layer-keyboard-input-fail
为什么某些键盘输入在 Unity 层中会失效?
根据 Unity 中的 WebGL 构建,某些键盘输入可能无法在 ProtoPie 中使用。这是因为 Unity WebGL 的默认设置会捕获所有键盘输入,从而可能干扰 ProtoPie 的功能。不过,安装 Unity 插件将通过禁用 Unity WebGL 属性来解决此问题。
或者,您也可以修改 Unity 项目中的代码,以防止 Unity WebGL 捕获所有键盘输入。
web-embed-supported-url-types
Web 嵌入源支持哪些 URL 类型?
您可以使用完整 URL 或 iframe 代码进行嵌入。网页嵌入功能支持 Maps、Spline、Rive、Bezi 等格式。请确保 URL 有效,并且您拥有访问它所需的权限。
以下是一些需要考虑的其他细节:
完整 URL 嵌入:如果您选择使用完整 URL 进行嵌入,请确保提供该 URL 的服务器具有适当的 CORS(跨域资源共享)策略设置。这个细节至关重要,尤其是在您嵌入本地运行或在线托管的编码原型时。
Iframe 代码嵌入:当从 Spline、Rive、Mapbox 等服务嵌入 iframe 代码时,请务必使用由相应服务直接生成的 iframe 代码。您可以插入完整的 iframe 代码,或仅提取 src 部分。例如:
