ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

菜单

自定义图层集成

ProtoPie Connect 的 Stage 视图使您能够将 ProtoPie 原型与多种自定义图层集成,包括网页、嵌入内容、实时摄像头和 Unity 项目。此集成可增强用户测试体验,并使您的设计更具动态效果。

创建 Stage 视图

请按照以下步骤创建 Stage 视图:

  1. 打开 ProtoPie Connect。

  2. 创建一个新 Group,并将您的原型(Pies)拖放到该组中。

  3. 选择该组。

  4. 点击 View 图标,在 Stage 中打开原型。

嵌入自定义图层

创建 Stage 视图后,右键单击以访问 Stage 选项菜单。要开始编辑,请点击 Edit 按钮。“Edit Mode”消息将确认已启用编辑。

要添加新原型或自定义图层:

  • 在左上角,点击 Add

  • 您可以在 Stage 中包含以下图层:

  • ProtoPie 原型

  • 通过 URL 或 iframe 代码嵌入的 网页内容(支持 Maps、Spline、Rive、Bezi 等)

  • 实时摄像头(从可用摄像头或直播流选项中选择)

  • Unity 项目(支持导入 WebGL 构建)


{'_type': 'localeString', 'en': 'custom layer integrations in stage view'}

配置网页嵌入图层

将新的 Web Embed 图层添加到 Stage 后,您可以通过属性面板设置其 URL。

您可以提供完整 URL 或 iframe 代码。网页嵌入支持多种格式,如 Maps、Spline、Rive 和 Bezi。请务必确保 URL 有效,并且您拥有访问该 URL 所需的权限。


{'_type': 'localeString', 'en': 'spline iframe embedding'}

配置实时摄像头图层

要将摄像头画面添加到您的项目中,请使用 Live Camera 图层。此功能支持:

  • 通过 USB 连接的摄像头,例如网络摄像头

  • 您笔记本电脑的摄像头

  • 直播流 URL(HLS)

在使用摄像头图层之前,请确保已向您的网络浏览器授予权限。添加摄像头图层后,可通过 Camera 属性面板配置其属性。


{'_type': 'localeString', 'en': 'embed camera feeds in stage view protopie connect'}

配置 Unity 图层

要将 Unity 场景添加到您的项目中,请使用 Unity 图层。此功能支持:

  • 导入 Unity 场景的 WebGL 构建

  • 适用于 Unity 的 ProtoPie 插件

请务必将 您的 Unity 项目以 WebGL 作为目标平台进行构建。生成的 Build 文件夹将包含 .loader.js.framework.js.wasm.data 文件,您需要将它们打包为 zip 文件。将该 zip 文件作为 Source File 插入,以将 Unity 项目作为图层导入。


{'_type': 'localeString', 'en': 'unity layer'}

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 有效,并且您拥有访问它所需的权限。

以下是一些需要考虑的其他细节:

  1. 完整 URL 嵌入:如果您选择使用完整 URL 进行嵌入,请确保提供该 URL 的服务器具有适当的 CORS(跨域资源共享)策略设置。这个细节至关重要,尤其是在您嵌入本地运行或在线托管的编码原型时。

  2. Iframe 代码嵌入:当从 Spline、Rive、Mapbox 等服务嵌入 iframe 代码时,请务必使用由相应服务直接生成的 iframe 代码。您可以插入完整的 iframe 代码,或仅提取 src 部分。例如: