フロントプレート(従来の「オーバーレイ」)を使用して、車のバリアントの作成、製品のライフ サイクル状態の指定、あるいはウォーターマーク、商標、または法的情報の追加を行います。会議のプレゼンテーションなどに使用する場合は、会社のロゴなどのイメージや日付などの文字をオーバーレイすることができます。

フロントプレートを作成する方法

1. メニュー バーで、[シーン] > [シーンプレート エディタ]を選択します。

2. シーンプレート エディタの左側を右クリックし、[フロントプレートを作成]を選択します。

3. [プロパティ]の下の[名前]フィールドにフロントプレートの名前を入力し、[コンテンツのタイプ]でコンテンツが文字、Web、またはイメージのいずれであるのかを選択します。

   • 文字のフロントプレートでは、希望の文字を入力するとともに、フォント、カラー、透明度などのプロパティを設定します。
   • イメージのフロントプレートでは、フォルダ アイコンをクリックして、必要なイメージを選択します。いずれかの時点でイメージが更新された場合は、 (復元)をクリックして最新バージョンをロードします。

4. サイズと位置の下で、必要な値を調整します。

   絶対スケールでは、ピクセルが使用されます。相対スケールでは、パーセンテージが使用されます。

円形のオーバーレイ メニューを作成する方法

円形メニュー シーンプレート アセットは既に提供されており、VREDAssets インストーラに含まれています。アセットをシーンにドラッグすれば使用できます。

ただし、作成方法を理解するには、次の手順に従い、シーンプレート エディタを使用してフロントプレートに円形メニュー UI をロードします。

1. メニュー バーで、[シーン] > [シーンプレート エディタ]を選択してエディタを開きます。

2. シーンプレート エディタで、[作成] > [フロントプレートを作成] を選択してフロントプレートを作成します。

   

3. 右側の[プロパティ]セクションで、[コンテンツのタイプ]を[Web]に設定します。

4. [幅]と[高さ]をレンダリング ウィンドウのサイズに調整します。これにより、UI がレンダリング ウィンドウ内に収まるようになります。

   注:

   レンダリング ウィンドウのサイズが変更されたら、手順 4 を繰り返します。

5. [クリック スルー]を 0.01 に設定して、円形メニューが透明な背景を使用するようにします。そうしないと、UI はユーザのインタラクションに応答しません。

6. 円形メニューを含む HTML ファイルへの URL を設定します。サンプル ファイルの場所:

   C:\ProgramData\Autodesk\VREDPro-12.2\Examples\webengine-circular-menu-genesis\index_html

   注:

   アイコン、スタイルシート、および適切な JavaScript ファイルなどのすべてのアセットが同じフォルダにあるか、同じ URL でアクセスできることが重要です。

7. 正しいスケーリングを設定するために、[サイズおよび位置]セクションで、[サイズ モード]を[相対] に、[サイズ] を「1.00」に設定します。

   

メニューを設定する

円形メニューを作成したら、次にその設定を行います。設定は HTML ファイルの script タグ内で、JSON オブジェクトとして保存されます。設定は、menu と呼ばれるルート プロパティで始まります。下記の「メニューのプロパティ」と「アイテムのプロパティ」の一覧に示す内容を使用できます。

メニューのプロパティ

名前	タイプ	説明
animationDuration	数値	アニメーションを再生するアイテムがアクティブとして表示されるミリ秒単位の期間。
buttonSizeMultiplicator	数値	アイコンのサイズに関連してボタンのサイズを指定する乗法子。
colorIconActive	文字列	色プロパティを持つアクティブなアイテムに表示されるアイコンの相対パス。
iconPath	文字列	アイテムのアイコンの相対パス。
iconSizes	配列[数値]	各アイテム レベルのピクセル単位のアイコン サイズを含む配列。
imagePath	文字列	静止フレーム イメージの相対パス。
items	配列[オブジェクト]	すべてのアイテムのプロパティの詳細な説明は、下記を参照してください。
position	数値	メニューの位置。可能な値は top-left、top、top-right、right、bottom-right、bottom、bottom-left、left、center です。
sizes	数値	各メニュー レベルの直径(ピクセル単位)。
type	文字列	常に circular でなければなりません。

アイテムのプロパティ

名前	タイプ	説明
animation	文字列	クリック時に再生されるアニメーションの名前。
animationDuration	数値	アニメーションを再生するときにこのアイテムがアクティブとして表示されるミリ秒単位の期間。これによって、メニュー全体のアニメーション期間の値が上書きされます。
children	配列[アイテム]	そのアイテムが選択された場合に次のメニュー レベルで表示されるネストされたアイテムの配列。
classNames	配列[文字列]	高度なカスタマイズのためにアイテムに適用される CSS クラス名の配列。
color	文字列	アイコンの色付けに使用される RGB カラー 16 進コード。これは、色や車の塗装のバリアントを切り替えるアイテムに役立ちます。
icon	文字列	アイコン パスに対して相対的なアイコン ファイルのパス。
image	文字列	イメージ パスに対して相対的なイメージ ファイルのパス。指定すると、クリック時に背景イメージが設定されます。
isActive	ブール値	true に設定すると、アイテムはアクティブとしてマークされ、バリアント、ビューポイント、アニメーションなどの割り当てられた各コマンド プロパティがメニューの読み込み時に設定されます。
name	文字列	記述名ですが、必須ではありません。
type	文字列	タイプ toggle は、最初のアイテムにのみ指定する必要があります。他のすべてのアイテムの動作は、アイテムのプロパティによって定義されます。
variant	文字列	クリック時に設定されるバリアントの名前。
viewpoint	文字列	クリック時にカメラがジャンプするビューポイントの名前。

例

円形メニューの例は、デモ シーン Automotive_Genesis.vpb 用に事前に設定されています。

フロントプレート スイッチを作成する方法

1. シーンプレート エディタの左側を右クリックし、[スイッチを作成]を選択します。

2. リストからスイッチにフロントプレートをドラッグ アンド ドロップします。

3. チェックを追加して、スイッチ内のどのフロントプレートを表示するのかを選択します。

   注:

   スイッチの子をオンにして表示されるようにした場合は、他のスイッチが自動的にオフになって、非表示になります。

シーンプレート エディタでフロントプレートを管理する方法

フロントプレートの選択を複製するには、選択項目を右クリックし、次のいずれかを実行します。

• 左側を右クリックし、[編集] > [複製]を選択します。
• エディタの下部にある ([複製]アイコン)をクリックします。

この後に変更を加えるには、次の操作を行います。

• シーンに表示するフロントプレートの順序を変更するには、リスト内でフロントプレートをドラッグ アンド ドロップして再配置します。
• フロントプレートの選択を一緒にグループ化するには、選択項目を右クリックし、[グループを作成]を選択します。
• フロントプレートを表示または非表示にするには、[シーンプレート エディタ]リストで目的のフロントプレートをオンまたはオフにします。