使用 ProtoPie Connect Unity 插件的 3D 汽车 HMI 教程

概览

1. 什么是 Unity 插件？

2. 如何在 ProtoPie Connect 中使用 Unity 项目

3. 步骤 1. 设置 Unity 项目

4. 步骤 2. 配置 ProtoPie 原型

5. 步骤 3. 配置消息映射

6. 步骤 4. 构建 Unity 项目

7. 步骤 5. 在 ProtoPie Connect 中测试交互

8. Unity 与 ProtoPie 集成工作流

9. 高效进行 Unity-ProtoPie 集成的技巧

本分步教程将指导你使用 ProtoPie Connect Unity 插件创建一个 3D 汽车 HMI 体验。跟随教程了解 Unity 插件、其工作原理，以及如何在 ProtoPie Connect 中导入和测试 Unity 项目。

开始之前，请从 10:12 处开始观看视频。

视频

什么是 Unity 插件？

首先，我们先了解一些基础内容：Unity 插件以及如何在 ProtoPie Connect 中使用它。

ProtoPie Connect Unity 插件是一种无需编写代码的解决方案，可让 ProtoPie 与 Unity 图层进行交互。该插件可实现 ProtoPie 与 Unity 的深度集成，为创建复杂且可交互的原型提供无限可能。它尤其适用于汽车、游戏、VR 和医疗科技等行业，也可应用于许多其他领域。

Unity 插件是一种无需编写代码的解决方案，可让 ProtoPie 与 Unity 图层交互。

如何在 ProtoPie Connect 中使用 Unity 项目

在开始教程之前，我们还需要了解什么是自定义图层，以及如何利用它们将 Unity 项目引入 ProtoPie Connect。

ProtoPie Connect 的 Stage View 可让你将 ProtoPie 原型与各种自定义图层集成，包括网页内容、嵌入元素、实时摄像头和 Unity 项目。这种集成可增强用户测试体验，并让你的设计更具动态性。

通过 Unity 图层将 Unity 项目引入 ProtoPie。

现在，让我们开始本教程。

步骤 1. 设置 Unity 项目

1.1 下载汽车 HMI 模板

本教程使用的是 Unity Asset Store 中汽车 HMI 模板的修改版本。该版本仅包含演示所需的特定 3D 汽车元素。你可以从此链接下载原始文件。

下载汽车 HMI 模板并在 Unity 中打开它。

1.2 准备 Unity 场景

1. 启动 Unity 并加载已下载的汽车 HMI 模板。

2. 保存这个修改后的场景，它将作为我们项目的基础。

1.3 下载并导入 ProtoPie Unity 插件

1. 下载 ProtoPie Unity 插件。

2. 双击已下载的包，将其导入到你的 Unity 项目中。

💡 重要：请确认你的 Unity 场景中存在 "ProtoPie" 游戏对象。该对象对于处理所有消息映射和交互至关重要。

双击已下载的包，将其导入到你的 Unity 项目中。

步骤 2. 配置 ProtoPie 原型

现在我们已经安装了 Unity 插件，接下来配置 ProtoPie 原型。

2.1 下载 Pie

本教程使用一个基础的 ProtoPie 原型，包含多个按钮（Drivetrain、Interior、Doors、Battery、Trunk 和 Main View 按钮）。你可以在这里下载该 Pie：Stage - Unity Vehicle 3D Main。

2.2 设置 Send & Receive 功能

为 ProtoPie 原型中的每个按钮分配 Send 响应和 Receive 触发器。此设置可确保按钮被点击时，会向 ProtoPie Connect 发送特定消息，然后由其将这些消息映射到 Unity 中对应的操作。

• 例如，点击 "Engine" 按钮会发送 GoToEngineView 消息。

• 同样，点击 "Interior" 按钮会发送 GoToInteriorView 消息。

为所有按钮重复此配置。原型全部配置完成后，继续下一步。

通过设置 Send & Receive 功能来配置 Pie。

步骤 3. 配置消息映射

3.1 创建新的游戏对象

在 Unity 中创建一个新的游戏对象，并将其命名为 "ProtoPie"。该名称区分大小写，并且对设置至关重要。这个游戏对象将为你管理所有消息映射，无需逐个配置 Unity 游戏对象。

在 Unity 中创建一个新的游戏对象，并命名为 "ProtoPie"。

3.2 添加消息交互脚本

1. 选择 "ProtoPie" 游戏对象。

2. 点击 "Add Component" 并搜索 "Message Interaction"。

3. 将 "Message Interaction" 脚本添加到 "ProtoPie" 游戏对象。

现在插件已启用，我们可以开始进行映射了。

将 "Message Interaction" 脚本添加到 "ProtoPie" 游戏对象。

3.3 定义映射表

1. 在 Unity 插件中，创建一个映射表，以定义 ProtoPie 消息如何映射到 Unity 操作。例如，GoToEngineView 和 GoToInteriorView 等消息将包含在该表中。

2. 定义好映射表后，将其导入 Unity 中的 “Message Data” 字段。此步骤可为添加并执行映射做好准备。

我们来看一个如何映射 Main 视图的示例。

1. 从映射表中选择 "Main" 标签，该标签已定义 "Go to Main View" 消息。

2. 指定消息方向为来自 ProtoPie。这意味着当 ProtoPie 发送 GoToMainView 消息时，Unity 将执行相应操作。

3. 添加 Unity 在接收到 GoToMainView 消息时要执行的具体操作。这就是插件将 ProtoPie 消息映射到 Unity 操作的方式。

对其他按钮和消息重复此过程，例如 GoToEngineView 和 GoToInteriorView，将每条消息映射到 Unity 中对应的方法。所有映射完成后，你可以继续构建 Unity 项目，并将其与 ProtoPie Connect 集成以进行测试和优化。

在 Unity 内进行消息映射。

理解映射过程

在本教程中，Unity 场景中的一个交互对象包含预定义的游戏逻辑和多个脚本，例如 CurrentDirectionController 脚本和 IVInputController 脚本。这些脚本通常由 Unity 专家或工程师创建，用于处理游戏机制。

我们将使用这些方法来映射 ProtoPie 消息。例如，CarInteractionController 脚本包含多个控制汽车动画的方法，例如切换到电池或内饰视图。

💡 提示：目前，ProtoPie 映射表只能找到父对象中的 Invoke 代码，无法找到子对象中的代码。

步骤 4. 构建 Unity 项目

现在所有映射都已完成，让我们构建 Unity 项目。

1. 在 Unity 中，前往 File > Build Settings。

2. 选择 WebGL 作为构建平台；如果尚未选中，请点击 Switch Platform。

3. 确保已设置 WebGL 所需的全部配置。这包括调整 Player 设置以及项目所需的其他特定构建设置。

4. 点击 Add Open Scenes，将你希望包含在构建中的场景添加进去。

5. 点击 Build 并选择目录保存构建文件。Unity 将编译项目并创建一个包含 WebGL 构建所需全部文件的文件夹。

6. 构建完成后，找到构建文件夹并将其压缩为 zip。该压缩文件将用于将 Unity 项目导入 ProtoPie Connect。

构建 Unity 项目。

按照这些步骤，你将生成 Unity 项目的 WebGL 构建，然后可将其嵌入 ProtoPie Connect 进行交互和测试。

💡 提示：构建前，请确保在 Player Settings 中将 Compression Format 设置为 Disabled。

在 Player Settings 中将 Compression Format 设置为 "Disabled"。

步骤 5. 在 ProtoPie Connect 中测试交互

1. 下载下面这 3 个 Pie。

• Stage - Unity Vehicle 3D Main

• Stage - Bottom Bar

• Stage - Upper Bar

2. 启动 ProtoPie Connect，并在 Stage View 中打开这 3 个 Pie。

3. 在 Stage View 中插入一个新的 Unity 图层。这将是嵌入你的 Unity 构建的图层。

4. 按需重新排序图层，并配置 Unity 图层以确保正确交互。

5. 将 Unity 的 WebGL 构建导入 ProtoPie Connect 中新添加的图层。

在 ProtoPie Connect 的 Stage View 中导入你的 Unity 项目。

6. 切换到全屏模式，以获得更好的测试体验。

7. 点击 ProtoPie 中的各个按钮并观察其交互。每个按钮都应触发一条发送到 Unity 的对应消息。

• 例如，点击 "Drivetrain" 按钮应将 Unity 视图切换到 drivetrain 视图。

• 点击 "Main View" 按钮应将视图恢复到主界面。

• 测试其他按钮，如 "Interior"、"Doors"、"Battery" 和 "Trunk"，以确保它们能在 Unity 中正确切换视图。

8. 在 ProtoPie Connect 中监控发送和接收的消息。确保每条 ProtoPie 消息都对应正确的 Unity 方法。

监控 Unity 与 ProtoPie 之间发送和接收的消息。

💡 提示：如果动画在 Unity 中运行正常，但在 ProtoPie Connect 中无效，请回到 Unity，找到名为 Message interaction 的脚本，然后将代码 WebGLInput.captureAllKeyboardInput = false 改为 WebGLInput.captureAllKeyboardInput = true。

确保代码 WebGLInput.captureAllKeyboardInput 设置为 true。

Unity 与 ProtoPie 集成工作流

以下是我们推荐的 Unity 与 ProtoPie 集成工作流：

1. 清晰地梳理要从 ProtoPie 发送的消息，并将其映射到 Unity 中对应的事件。

2. 在 ProtoPie 中设置已定义的消息，并将其映射到 Unity 中的具体操作。

3. 将 Unity 项目导出为适合嵌入 ProtoPie Connect 的WebGL 格式。

4. 持续测试集成效果并优化设计，以确保交互流畅。

Unity 与 ProtoPie 集成工作流。

高效进行 Unity-ProtoPie 集成的技巧

1. 确保 ProtoPie 设计师与 Unity 专家（工程师或开发者）之间沟通清晰并设定预期。双方都有各自的工作流和项目，因此尽早讨论交互实现方式非常关键。

2. 注意一些特定配置，例如在 WebGL 设置中禁用压缩，以及确保 Unity 对象命名为 "ProtoPie"（区分大小写）。这些细节对于顺利集成至关重要。

高效进行 Unity-ProtoPie 集成的技巧。

使用 Unity 和 ProtoPie 构建并测试交互式原型

通过以上步骤，你可以使用 ProtoPie Connect Unity Plugin 创建一个复杂的 3D 汽车演示。该集成可实现动态且可交互的原型，提升你在多个领域（包括汽车界面、游戏、VR 和医疗技术）中的设计与开发流程。