Product Configurator テンプレート

Product Configurator テンプレートのカスタマイズおよび使用方法を説明します。

Choose your operating system:

Windows

macOS

Linux

The guitar sample from the Product Configurator

Unreal Engine 4 (UE4) Product Configurator (製品コンフィギュレータ) テンプレートは、カスタマイズ可能な製品コンフィギュレータとユーザー インターフェースの作成開始地点を 3D ビジュアリゼーション アーティストに提供します。このテンプレートでは Level Variant Sets、カスタムの UMG インターフェース要素、および次の機能を備えた専用のコンフィギュレーション ブループリントを利用します。

  • アクタの切替を使用したジオメトリのバリエーション。

  • マテリアル オプションとビジビリティ オプション。

  • カメラの位置および設定のバリエーション。

  • ライティングおよび環境のバリエーション。

  • ユーザーにオプションを提示するプロシージャルに生成されたインターフェース。

  • ブループリント コードを使用せずに新しいバリエーションを追加する機能。

概要

Variant Manager を使用すると、 LevelVariantSet アクタ内の アクタ バリアント バリアント セット を定義することができます。それにより、情報が BP_Configurator ブループリントに渡されます。この情報を使用してユーザー インターフェースを動的に作成し、すべてのバリアント オプションをユーザー定義のサムネイル画像とともに表示します。

Example configurator showing the upholstery options for a car seat

テンプレートを制御する

コントロール

説明

Alt + マウスの左ボタンをクリック

製品の周囲をカメラが回転します

Alt + マウスの右ボタンをクリック

ズームイン / ズームアウトします

G

インターフェースを表示 / 非表示にします

Escape

コンフィギュレータを終了します

テンプレートの特徴

テンプレートは Variant Manager を使用します。これは、レベル内のアクタについてプロパティのさまざまな設定を整理し、LevelVariantSet アクタに格納する特別な UI です。

PC_VariantManager.png

番号

説明

1

バリアント

2

アクタ

3

プロパティ

4

5

自動キャプチャプロパティを有効にします

6

このプロパティの値を記録します

バリアント列にはバリアントと呼ばれるアクタ構成がすべて含まれ、バリアント セットとしてまとめられています。各バリアントはコンフィギュレータのオプションを表し、さまざまなプロパティ変更を持つ 1 つ以上のアクタを含めることができます。これらはユーザーが設定したサムネイル画像で表示されます。すべてのバリアントは、ランタイム時に BP_Configurator を介してインターフェースのボタンに変換されます。

Variant Manger の使用に関する詳細は、「 Variant Manager 」のドキュメントを参照してください。

BP_Configurator を使用する

BP_Configurator のブループリントは、指定した Level Variant Set からデータを取得し、コンフィギュレータのユーザー インターフェースを動的に作成します。

  1. BP_Configurator は指定した Level Variant Set からデータを取得します。

  2. 各バリアント セットは メインの UI ツールバーのアイコンに変換されます。

  3. 各バリアントは、そのバリアント セットのサブメニューのオプションになります。

  4. バリアントは、Variant Manager で設定されたサムネイルで視覚的に表示されます。

  5. バリアント セットは、現在有効なバリアントのアイコンで表示されます。

データのインポート方法

「Product Configurator」テンプレートのカスタマイズは、3D アートワークとテクスチャのインポートから開始します。Unreal Engine 4 では Datasmith に加え、Maya、3ds Max、Blender など使い慣れた 3D アプリケーションからのインポート用に FBX コンテンツ パイプライン もサポートしています。

コンテンツ ブラウザ に 3D および 2D アセットをインポートした後は、レベルからサンプルのギターを削除し、Variant Manager を使用してバリアントおよびバリアント セットをビルドする必要があります。最後にレベルのバリアント セットを BP_Configurator に接続して、ランタイム時にカスタムのユーザー インターフェースを作成します。

アートワークをメイン レベルに追加する

アセットを UE4 にインポートしてコンテンツ ブラウザでセットアップした後、サンプルのギターを削除して新しいアートをレベルに追加する必要があります。

PC_Guitar.png

Product Configurator では 1 つ以上のルート アクタを使用してスタティック メッシュの標準配置を提供します。

サンプル モデルを削除するには、GuitarRoot オブジェクトとその子オブジェクトをすべて削除します。

次に、新しい空のアクタをレベルに設置して新しいルート オブジェクトにします。レベルの原点 (X=0, Y=0, Z=0) を中心に配置します。

PC_EmptySceneObject.png

これにより、既存のカメラ設定の前に製品が配置されます。

次に、レベルに製品の要素をルート オブジェクトの子として配置します。

PC_ChildObjects.png

Variant Manager でバリアントを作成する

レベルにアートワークを設定したら、バリアントとバリアント セットを LevelVariantSet アクタと Variant Manager を使用して作成します。

BP_Configurator で作成した動的 UI が機能するためには、最初の 2 つのバリアント セットを環境とカメラに設定する 必要があります

LevelVariantSet アクタは、コンテンツ ブラウザで右クリックして [Miscellaneous (その他)] サブメニューに移動し、[Level Variant Sets] オプションを選択して作成します。

PC_LevelVariantSet.png

一意の名前を付けてダブルクリックし、Variant Manager で開きます。

まず、カスタムのバリアント セットを作成します。 [+Variant Set] ボタンをクリックして新しいセットに名前を付けます。

バリアント セットを作成したら、名前の横にある [+] ボタンをクリックしてバリアントを作成します。これは、ユーザーがこのプリセットを選択した場合に変更するアクタとプロパティです。

新しいバリアントをクリックしてハイライト表示し、次に [Actors] 列の [+] ボタンをクリックします。新しいウィンドウが開き、シーン内のすべてのアクタがリスト表示されます。ユーザーがこのバリアントを選択した時に変更するアクタを選択します。このプリセットに含めるアクタごとに、この作業を繰り返します。

次に、作業するアクタをハイライト表示して [Properties (プロパティ)] 列の [Add (+)] ボタンをクリックします。これにより、バリアントの一部として変更することができるすべてのアクタのプロパティが新しいウィンドウにリスト表示されます。バリアントが選択された場合に変更されるプロパティのチェックボックスをオンにします。

このリストには、デフォルトのプロパティとユーザーが定義したプロパティの両方が含まれます。上の画像では、[Env Map] プロパティが選択されています。このプロパティを変更すると、実行時に製品コンフィギュレータの環境を変更することができます。

最後に、プロパティの値を設定します。これは、2つの方法のいずれかで完了することができます。1 つ目は [Values (値)] 列を使用して値を手動で設定する方法です。

PC_RecordCurrent.png ボタンを使用してバリアントの現在の値を記録することで、レベルに設定されている値を使用してプロパティを設定することもできます。

もう 1 つは、 PC_AutoRecord.png ボタンを押してプロパティの自動キャプチャを有効にする方法です。このオプションを有効にすると、Variant Manager がレベル内のアクタに加えられた変更をリッスンし、選択したバリアントにそれを記録するようになります。変更されたアクタが選択しているバリアントにバインドされていない場合は、自動的にバインドされます。

バリアント セットの各バリアントにはサムネイルも必要です。これらのサムネイルはユーザー インターフェースのボタン アイコンとして使用されます。また、エンジンにインポートされたり UE4 ビューポートからキャプチャされるテクスチャ画像にもなります。バリアントを右クリックしてメニューを開きます。

すべてのバリアントとバリアント セットに対してこの作業を繰り返します。

次の画像は、車のシートの装飾オプションを表示するようにビルドされているコンフィギュレータです。

BP_Configurator に接続する

テンプレートのカスタマイズ処理を完了するには、作成した Level Variant Set を BP_Configurator に接続する必要があります。まず、既存の LevelVariantSet アクタをレベルから削除し、自分で作成したものに置き換えます。アクタは BP_Configurator から確認できるようにレベル内に配置する必要があります。

[Details (詳細)] パネルでメニューの [Default (デフォルト)] セクションにある [LVSActor] オプションを選択し、ドロップダウンメニューを使用して設定を作成した Level Variant Set に変更します。

最後にコンフィギュレータをテストします。

PC_Final.png

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル