3D Car HMI Tutorial with ProtoPie Connect Unity Plugin

概要

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、MedTechなどの業界で役立ちますが、ほかの多くの分野にも応用できます。

Unityプラグインは、ProtoPieがUnityレイヤーとインタラクションできるノーコードソリューションです。

ProtoPie ConnectでUnityプロジェクトを使う方法

チュートリアルを始める前に、カスタムレイヤーとは何か、そしてUnityプロジェクトをProtoPie Connectに組み込むためにそれをどのように使うのかも確認しましょう。

ProtoPie ConnectのStage Viewでは、ProtoPieのプロトタイプをWebコンテンツ、埋め込み要素、ライブカメラ、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をダウンロードする

このチュートリアルでは、さまざまなボタン（Drivetrain、Interior、Doors、Battery、Trunk、Main Viewボタン）を備えた基本的なProtoPieプロトタイプを使用します。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. すでに「Go to Main View」メッセージが定義されているマッピングテーブルから「Main」ラベルを選択します。

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化します。この圧縮ファイルをProtoPie ConnectにUnityプロジェクトをインポートする際に使用します。

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を起動し、3つすべてのPieをStage Viewで開きます。

3. Stage Viewに新しいUnityレイヤーを挿入します。これがUnityビルドを埋め込むレイヤーになります。

4. 必要に応じてレイヤーの順序を並べ替え、適切にインタラクションできるようにUnityレイヤーを設定します。

5. UnityからのWebGLビルドを、ProtoPie Connectで新しく追加したレイヤーにインポートします。

ProtoPie ConnectのStage ViewにUnityプロジェクトをインポートします。

6. より快適にテストできるよう、フルスクリーンモードに切り替えます。

7. ProtoPieのさまざまなボタンをクリックし、その動作を確認します。各ボタンはUnityに対応するメッセージをトリガーするはずです。

• たとえば、「Drivetrain」ボタンをクリックすると、Unityの表示が駆動系ビューに切り替わります。

• 「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. ProtoPie Connectに埋め込めるよう、UnityプロジェクトをWebGL形式でエクスポートします。

4. 統合を継続的にテストし、スムーズなインタラクションを確保するためにデザインを調整します。

UnityとProtoPieを統合するためのワークフロー。

効果的なUnityとProtoPieの統合のためのヒント

1. ProtoPieのデザイナーとUnityの専門家（エンジニアや開発者）との間で、明確なコミュニケーションと期待値の共有を行ってください。それぞれに独自のワークフローとプロジェクトがあるため、インタラクションの実現方法について早い段階で話し合うことが重要です。

2. WebGL設定での圧縮無効化や、Unityオブジェクト名を「ProtoPie」にすること（大文字小文字を区別）など、特定の設定に注意してください。これらの詳細は、スムーズな統合に不可欠です。

効果的なUnityとProtoPieの統合のためのヒント。

UnityとProtoPieでインタラクティブなプロトタイプを構築してテストする

これらの手順に従うことで、ProtoPie Connect Unityプラグインを使った高度な3Dカーのデモを作成できます。この統合により、ダイナミックでインタラクティブなプロトタイプを実現し、自動車インターフェース、ゲーム、VR、医療技術など、さまざまな分野のアプリケーションにおけるデザインと開発プロセスを向上できます。