软硬件交互

教程：使用ProtoPie Connect Unity插件进行3D车载HMI设计

跟随本教程，使用ProtoPie Connect Unity插件创建3D车载HMI体验。

Luke Han, Product Manager

February 27, 2025

3D Car HMI

概述

  • 什么是Unity插件？
  • 如何在ProtoPie Connect中使用Unity项目
  • 第一步：设置Unity项目
  • 第二步：配置ProtoPie原型
  • 第三步：配置消息映射
  • 第四步：构建Unity项目
  • 第五步：在ProtoPie Connect中测试交互
  • Unity与ProtoPie集成的工作流程
  • 有效的Unity-ProtoPie集成技巧
这篇详细的教程将引导您使用ProtoPie Connect Unity插件创建一个3D车载HMI体验。跟随教程了解Unity插件的工作原理，如何导入和测试Unity项目，以及如何通过ProtoPie Connect实现互动。

什么是Unity插件？

首先，让我们了解一下基础知识：Unity插件是什么，以及如何在ProtoPie Connect中使用它。
ProtoPie Connect的Unity插件是一种无代码解决方案，允许ProtoPie与Unity层进行互动。该插件实现了ProtoPie与Unity的深度集成，为创建复杂和互动的原型提供了无限的可能性。它特别适用于汽车、游戏、虚拟现实（VR）和医疗技术（MedTech）等行业，但也可以应用于许多其他领域。
ProtoPie Connect Unity 插件
Unity插件是一个无需代码的解决方案，使ProtoPie能够与Unity的层进行交互。

如何在ProtoPie Connect中使用Unity项目

在我们开始教程之前，让我们先了解一下什么是自定义层，以及如何利用它们将Unity项目导入到ProtoPie Connect中。
ProtoPie Connect的Stage View（舞台视图）允许你将ProtoPie原型与各种自定义层集成，包括网页内容、嵌入元素、实时摄像头和Unity项目。这种集成提升了用户测试体验，使你的设计更加动态。
通过Unity层将Unity项目引入ProtoPie。
通过Unity层将Unity项目引入ProtoPie。
现在，让我们开始教程。

步骤 1. 设置Unity项目

1.1 下载汽车HMI模板

我们将使用来自Unity Asset Store的修改版汽车HMI模板进行本教程。此版本仅包含演示所需的特定3D汽车元素。你可以通过此链接下载原始文件。
下载HMI模板并在Unity中打开它。
下载HMI模板并在Unity中打开它。

1.2 准备Unity场景

  • 启动Unity并加载下载的汽车HMI模板。
  • 保存这个修改过的场景，因为它将作为我们项目的基础。

1.3 下载并导入ProtoPie Unity插件

  • 下载ProtoPie Unity插件。
  • 双击下载的包，将其导入到你的Unity项目中。
  • 💡 注意：确保在Unity场景中存在“ProtoPie”游戏对象。这个对象对于处理所有消息映射和交互至关重要。
双击下载的包，将其导入到你的Unity项目中。
双击下载的包，将其导入到你的Unity项目中。

第2步：配置ProtoPie原型

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

2.1 下载ProtoPie原型

本教程使用一个基本的ProtoPie原型，包含多个按钮（如驱动系统、内饰、车门、电池、后备厢和主视图按钮）。你可以从这里下载原型：Stage - Unity Vehicle 3D Main。

2.2 设置发送与接收功能

为ProtoPie原型中的每个按钮分配发送响应和接收触发器。此配置确保当按钮被点击时，它会向ProtoPie Connect发送特定的消息，ProtoPie Connect再将这些消息映射到Unity中的相应动作。
  • 例如，点击“Engine”按钮会发送GoToEngineView消息。
  • 类似地，点击“Interior”按钮会发送GoToInteriorView消息。
对所有按钮重复此配置。完成原型配置后，继续执行下一步。
配置ProtoPie原型，设置发送与接收功能。
配置ProtoPie原型，设置发送与接收功能。

步骤 3. 配置消息映射

3.1 创建一个新游戏对象

在Unity中创建一个新游戏对象，并命名为 "ProtoPie"。这个名称区分大小写，非常关键。这个游戏对象将管理所有的消息映射，无需为每个Unity游戏对象单独配置。
在Unity中，创建一个新游戏对象并命名为“ProtoPie”。
在Unity中，创建一个新游戏对象并命名为“ProtoPie”。

3.2 添加消息交互脚本

  • 选择“ProtoPie”游戏对象。
  • 点击“添加组件”，并搜索“Message Interaction”。
  • 将“Message Interaction”脚本添加到“ProtoPie”游戏对象中。
现在插件已启用，我们可以开始进行映射配置了。
将“Message Interaction”脚本添加到“ProtoPie”游戏对象。
将“Message Interaction”脚本添加到“ProtoPie”游戏对象。

3.3 定义映射表

  • 在Unity插件中创建一个映射表，用于定义ProtoPie消息如何映射到Unity的动作。例如，GoToEngineView 和 GoToInteriorView 这样的消息将包含在映射表中。
  • 定义映射表后，将其导入到Unity中的“Message Data”字段。这一步骤为添加和执行映射做好准备。
让我们以映射“Main view”为例：
  • 从映射表中选择“Main”标签，该标签已经定义了“Go to Main View”消息。
  • 指定消息的方向是从ProtoPie发送。这意味着当ProtoPie发送GoToMainView消息时，Unity将执行相应的动作。
  • 添加Unity在接收到 GoToMainView 消息时将执行的具体动作。这就是插件将ProtoPie消息映射到Unity动作的方式。
对于其他按钮和消息（如 GoToEngineView 和 GoToInteriorView ），重复此过程，将每个消息映射到Unity中的相应方法。完成所有映射后，您可以继续构建Unity项目并将其与ProtoPie Connect集成，以进行测试和改进。
在 Unity 中映射消息
在 Unity 中映射消息

理解映射过程

在本教程中，Unity 场景中的交互对象包含预定义的游戏逻辑和多个脚本，例如 CurrentDirectionController 脚本和 IVInputController 脚本。这些脚本通常由 Unity 专家或工程师编写，用于处理游戏机制。
我们将使用这些方法来映射 ProtoPie 消息。例如，CarInteractionController 脚本有多个方法来控制汽车动画，比如切换到电池视图或内饰视图。
💡 提示：目前，ProtoPie 映射表只能找到父对象中的 Invoke 代码，而无法找到子对象中的 Invoke 代码。

第四步：构建 Unity 项目

现在所有的映射都完成了，让我们来构建 Unity 项目。
  • 在 Unity 中，点击 File > Build Settings。
  • 选择 WebGL 作为构建平台，如果未选中，请点击 Switch Platform 进行切换。
  • 确保已设置所有必要的 WebGL 配置，包括调整 Player 设置以及任何针对项目的特定构建设置。
  • 点击 Add Open Scenes，将你想要包含在构建中的场景添加到列表中。
  • 点击 Build 并选择一个目录来保存构建文件。Unity 会编译项目并创建一个包含 WebGL 构建所需文件的文件夹。
  • 构建完成后，定位到构建文件夹，并将其压缩为一个 ZIP 文件。这个压缩包将用于将 Unity 项目导入 ProtoPie Connect 中。
构建 Unity 项目
构建 Unity 项目
通过按照这些步骤，你将生成一个 WebGL 构建的 Unity 项目，这个构建文件可以嵌入到 ProtoPie Connect 中进行交互和测试。
💡 提示：在构建之前，请确保在 Player Settings 中将 Compression Format 设置为 Disabled。
在 Player Settings 中将 Compression Format 设置为 Disabled。
在 Player Settings 中将 Compression Format 设置为 Disabled。

Step 5. Test the interaction in ProtoPie Connect

  1. 下载以下 3 个 ProtoPie 文件：
  2. 启动 ProtoPie Connect 并在 Stage View 中打开这三个文件。
  3. 在 Stage View 中插入一个新的 Unity 层。这将是你将 Unity 构建嵌入的层。
  4. 根据需要重新排序层，并配置 Unity 层以确保正确的交互。
  5. 将从 Unity 中生成的 WebGL 构建 导入到 ProtoPie Connect 中新增的 Unity 层中。
将您的 Unity 项目导入到 ProtoPie Connect 的 Stage View 中。
将您的 Unity 项目导入到 ProtoPie Connect 的 Stage View 中。
  1. 切换到全屏模式，以获得更好的测试体验。
  2. 在 ProtoPie 中点击各种按钮并观察它们的互动。每个按钮应该触发一个相应的消息到 Unity。
  • 例如，点击 "Drivetrain" 按钮应该切换 Unity 视图到驱动系统视图。
  • 点击 "Main View" 按钮应该将视图恢复到主界面。
  • 测试其他按钮，如 "Interior"、"Doors"、"Battery" 和 "Trunk"，确保它们能正确切换 Unity 中的视图。
  1. 在 ProtoPie Connect 中，监控发送和接收的消息。确保每个 ProtoPie 消息都对应到 Unity 中的相应方法。
监控 Unity 和 ProtoPie 之间发送和接收的消息。
监控 Unity 和 ProtoPie 之间发送和接收的消息。
💡 提示：如果动画在 Unity 中正常工作，但在 ProtoPie Connect 中无法正常显示，请返回 Unity，找到名为 Message interaction 的脚本，然后将代码中的 WebGLInput.captureAllKeyboardInput = false 更改为 WebGLInput.captureAllKeyboardInput = true。
确保代码 WebGLInput.captureAllKeyboardInput 设置为 true。
确保代码 WebGLInput.captureAllKeyboardInput 设置为 true。

将 Unity 与 ProtoPie 集成的工作流程：

  • 明确从 ProtoPie 发送的消息，并将它们映射到 Unity 中的相应事件。
  • 在 ProtoPie 中设置定义的消息，并将它们映射到 Unity 中的特定动作。
  • 以适合在 ProtoPie Connect 中嵌入的 WebGL 格式导出你的 Unity 项目。
  • 持续进行集成测试并优化设计，确保交互流畅。
将 Unity 与 ProtoPie 集成的工作流程
将 Unity 与 ProtoPie 集成的工作流程

有效的 Unity-ProtoPie 集成提示：

  • 明确沟通和设定期望：确保 ProtoPie 设计师与 Unity 专家（工程师或开发者）之间有清晰的沟通。由于他们各自有不同的工作流程和项目，早期讨论互动需求和实现方式非常关键。
  • 注意特定配置：确保在 WebGL 设置中禁用压缩，并确保 Unity 中的对象命名为“ProtoPie”（区分大小写）。这些细节对顺利集成至关重要。
有效的Unity-ProtoPie集成提示
有效的Unity-ProtoPie集成提示

构建并测试与Unity和ProtoPie的互动原型

通过以下步骤，您可以使用ProtoPie Connect Unity插件创建一个复杂的3D汽车演示。这种集成使您能够打造动态且互动的原型，提升设计和开发过程，适用于多个领域，包括汽车界面、游戏、虚拟现实（VR）和医疗技术等应用。
免费使用ProtoPie 联系销售