行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

自定义图层集成

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 部分。例如: