MenuToggle Menu

自定义层集成

ProtoPie Connect 展台视图能够将 ProtoPie 原型与各种自定义层集成，包括网页、嵌入式系统、实时摄像头，以及 Unity 项目。这种集成增强了用户测试体验，使设计更生动。

创建展示台

按照以下步骤创建展示台：

  1. 打开 ProtoPie Connect。
  2. 点击「Group」创建一个组，并将Pie 文件拖入。
  3. 选择该组。
  4. 单击 查看 图标在展示台打开原型。

嵌入自定义层

创建展示台后，右键单击访问展示台选项菜单。如需编辑，请单击编辑按钮。确认已启用编辑模式会有提示。

添加新原型或自定义层：

  • 左上角单击「Add」 添加。
  • 在展台中包括以下层：
    • Pie 文件
    • Web 嵌入（通过 URL 或 iframe 代码）（支持 Maps、Spline、Rive、Bezi 等）
    • 实时摄像头（从可用摄像头或实时流选项中选择）
    • Unity 项目（支持导入 WebGL 构建）
[object Object]

配置 Web 嵌入层

在将新的 Web 嵌入层添加到展示台后，可以通过属性面板设置其 URL。

你可以提供完整的 URL 或 iframe 代码。Web 嵌入支持各种格式，如 Maps、Spline、Rive 和 Bezi。请确保 URL 有效及其访问权限。

[object Object]

配置实时摄像头层

如需将摄像头视频添加到项目中，请使用实时摄像头层。此功能支持：

  • USB 连接的摄像头，如网络摄像头
  • 笔记本电脑的摄像头
  • 实时流 URL（HLS）

在使用摄像头层之前，请确保浏览器权限。添加摄像头层后，通过摄像头属性面板配置其属性。

[object Object]

配置 Unity 图层

如要将 Unity 的场景添加到原型项目中，应使用 Unity 图层。这一功能支持：

  • 导入 Unity 场景中的 WebGL 构建
  • ProtoPie 的 Unity 插件

这个过程中，很重要的一点是在构建设置环节必须将 WebGL 作为 Unity 项目构建的目标平台。构建产生的输出文件夹中必须包含 .loader.js、 .framework.js、 .wasm，以及 .data 文件，构建后需要将这些文件打包为一个 zip 文件，以便将 zip 文件作为导入时所使用的源文件，才能正确将 Unity 项目导入为一个图层。

[object Object]

Unity 插件使得发送和接收的消息得以与 Unity 场景协同工作，从而增强 ProtoPie 和 Unity 图层之间的互动性。这个插件是一个可以添加到 Unity 项目中的程序包，当然，也可以从 Unity 资源商店中下载这一插件。 如要了解更多相关信息，可以参阅 Unity 插件文档。

展示台预览

添加和配置层后，通过拖放在展示台中将其重新排列。右键单击图层以访问定位选项。在准备就绪时通过单击 查看 预览展示台。

常见问题解答

  • Web 嵌入源支持的 URL 类型有哪些？

    完整的 URL 或 iframe 代码。其中Web 嵌入功能支持各种格式，如 Maps、Spline、Rive、Bezi 等。必须确保 URL 有效，并且使用者具有访问它的权限。

    以下是一些需要考虑的额外细节：

    1. 完整 URL 嵌入：如果选择使用完整 URL 进行嵌入，请确保提供 URL 的服务器具有适当的 CORS（跨域资源共享）设置。特别是当需要嵌入在本地运行或在线托管的编码原型时，这一细节非常关键。
    2. iframe 代码嵌入：当从 Spline、Rive、Mapbox 等服务中嵌入 iframe 代码时，请确保使用直接从各自服务生成的 iframe 代码。你可以插入整个 iframe 代码，或者仅提取 src 部分。例如：

    <iframe

    src="https://my.spline.design/miniroomartcopy-51fb8d8402219e5b621015be7fae806d/"

    frameborder="0"

    width="100%"

    height="100%"

    ></iframe>

  • 为什么 Unity 图层中的一些键盘输入功能失效了？

    受 Unity 内部的 WebGL 构建方式影响，某些键盘输入功能可能无法在 ProtoPie 中正确响应。这是因为 Unity WebGL 的设置上默认会设为捕获所有键盘输入，于是就干扰了 ProtoPie 的功能。在安装 Unity 插件后，可以通过禁用 Unity WebGL 属性来解决这一问题。

    或者，也可以修改 Unity 项目中的代码来防止 Unity WebGL 捕获所有的键盘输入。

Back To Top