フロントプレートを作成および管理する

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

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

メニューバーで、[シーン] > [シーンプレートエディタ]を選択します。
シーンプレートエディタの左側を右クリックし、[フロントプレートを作成]を選択します。
[プロパティ]の下の[名前]フィールドにフロントプレートの名前を入力し、[コンテンツのタイプ]でコンテンツが文字、Web、またはイメージのいずれであるのかを選択します。
- 文字のフロントプレートでは、希望の文字を入力するとともに、フォント、カラー、透明度などのプロパティを設定します。
- イメージのフロントプレートでは、フォルダアイコンをクリックして、必要なイメージを選択します。いずれかの時点でイメージが更新された場合は、 (復元)をクリックして最新バージョンをロードします。
サイズと位置の下で、必要な値を調整します。

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

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

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

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

メニューバーで、[シーン] > [シーンプレートエディタ]を選択してエディタを開きます。
シーンプレートエディタで、[作成] > [フロントプレートを作成] を選択してフロントプレートを作成します。
右側の[プロパティ]セクションで、[コンテンツのタイプ]を[Web]に設定します。
[幅]と[高さ]をレンダリングウィンドウのサイズに調整します。これにより、UI がレンダリングウィンドウ内に収まるようになります。

注: レンダリングウィンドウのサイズが変更されたら、手順 4 を繰り返します。
[クリックスルー]を 0.01 に設定して、円形メニューが透明な背景を使用するようにします。そうしないと、UI はユーザのインタラクションに応答しません。
円形メニューを含む HTML ファイルへの URL を設定します。サンプルファイルの場所:

C:\ProgramData\Autodesk\VREDPro-12.2\Examples\webengine-circular-menu-genesis\index.html

注: アイコン、スタイルシート、および適切な JavaScript ファイルなどのすべてのアセットが同じフォルダにあるか、同じ URL でアクセスできることが重要です。
正しいスケーリングを設定するために、[サイズおよび位置]セクションで、[サイズモード]を[相対] に、[サイズ] を「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 用に事前に設定されています。

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

シーンプレートエディタの左側を右クリックし、[スイッチを作成]を選択します。
リストからスイッチにフロントプレートをドラッグアンドドロップします。
チェックを追加して、スイッチ内のどのフロントプレートを表示するのかを選択します。

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

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

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

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

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

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