ステップ2 - 車のバリアント用のテーマを作成する¶
このチュートリアルのこのステップでは、1つの Kanzi Studio プロジェクトを使用して、製品の2つのバリアントを扱う方法を学びます。前のステップでは、車のガソリンバリアント用に2つのテーマ (Classic と Modern) を作成しました。このステップでは、そのプロジェクトを修正し、車のハイブリッドバリアント用のテーマを作成します。
クラスター構造をテーマ化する¶
このセクションでは、各車両バリアントに対して、クラスターバックグラウンドのビジュアル外観、主要ゲージ間に表示される車両モデル、およびRPMゲージの中央に表示される車両バリアント名を設定します。
クラスター構造をテーマ化するには:
Library Alt を押しながら右クリック Themes で、Theme Group を選択し、Car variant と名付けます。
Theme Editor で Car variant テーマグループを開き、Gasoline と Hybrid の2つのテーマを作成します。
Prefabs で右クリックして Primary gauges Classic > Background を選択し、Add Resources to a Theme Group を選択します。
ここで、Car variant テーマグループにクラスター背景のリソースを追加します。
Add Resources to a Theme Group ウィンドウで：
Theme Group を Car variant に設定します。
リソースIDをリネームします:
Cluster frame inner.Model3D.Mesh から Cluster frame inner へ
Cluster frame outer.Model3D.Mesh から Cluster frame outer へ
Add をクリックします。
ヒント
プロジェクトのコンテキストで意味のあるリソースID名を使用すると、テーマ設定やメンテナンスが容易なプロジェクトを作成できます。テーマグループにリソースIDを追加する際に適切な名前を選べない場合は、Theme Editor でリソースIDの名前を変更できます。
Car variant テーマグループの Theme Editor で、リソースIDを設定します。
Gasoline テーマセットの場合:
Cluster frame outer Gasoline メッシュを指す Cluster frame outer リソースID
Cluster frame inner Gasoline メッシュを指す Cluster frame inner リソースID
Hybrid テーマセットの場合:
Cluster frame outer Hybrid メッシュを指す Cluster frame outer リソースID
Cluster frame inner Hybrid メッシュを指す Cluster frame inner リソースID
Prefabs で右クリックし、Primary gauges Classic > Car を選択し、Add Resources to a Theme Group を選択します。
ここで、Car variant テーマグループに、主要なゲージの間に表示される車のモデルのリソースを追加します。
Add Resources to a Theme Group ウィンドウで：
Theme Group を Car variant に設定します。
Car.PrefabViewConcept.Prefab リソースIDを Car にリネームします。
Add をクリックします。
ヒント
誤ってリソースIDを間違ったテーマグループに追加した場合、Dictionaries で移動したいリソースIDの隣にある
をクリックし、使用したいテーマグループにリソースIDをドロップしてください。Car variant テーマグループの Theme Editor で、Car リソースIDを設定します。
Gasoline テーマのリソースIDを Car Gasoline プレハブに設定します。
Hybrid テーマのリソースIDを Car Hybrid プレハブを指すように設定します。
Prefabs で右クリックし、Primary gauges Classic > Primary gauges grid Classic > Table RPM を選択し、Add Resources to a Theme Group を選択します。
ここで、Car variant に、RPMゲージの中央に表示される車のバリアント名のリソースを追加します。
Add Resources to a Theme Group ウィンドウで：
Theme Group を Car variant に設定します。
Text Block ノードの表示を有効にするには、
をクリックします。ウィンドウの右上部分で、ウィンドウに表示したいリソースの種類を選択できます。
G A S O L I N E リソースIDを選択して、Variant に名前を変更します。
Add をクリックします。
Car variant テーマグループの Theme Editor で、各テーマのセルをダブルクリックし、Variant リソースIDのテキストを入力します。
Gasoline テーマには G A S O L I N E を入力します。
Hybrid テーマには H Y B R I D を入力します。
Dictionaries で Car variant テーマグループのテーマを選択すると、Preview にこれまでに定義した2つの車のバリアントのリソースが表示されます。
プライマリゲージの色をテーマ化する¶
このセクションでは、各車種のプライマリゲージの色を設定します。
プライマリゲージの色をテーマ化するには、
Prefabs で右クリックして Primary gauges Classic > Gauges を選択し、Add Resources to a Theme Group を選択します。
Add Resources to a Theme Group ウィンドウで：
Theme Group を Car variant に設定します。
Gauge.Node.Style リソースIDを選択して、Primary gauges color Classic に名前を変更します。
Add をクリックします。
Car variant テーマグループの Theme Editor で、Primary gauges color Classic リソースIDを設定します。
Gasoline テーマのリソースIDを Primary gauges color Classic Gasoline スタイルにポイントするように設定します。
Hybrid テーマのリソースIDを Primary gauges color Classic Hybrid スタイルに設定します。
これらのスタイルは、両方のプライマリゲージを定義する Gauge Model ノードが使用するマテリアルの Emissive Color プロパティを設定します。
Dictionaries で Car variant テーマグループのテーマを選択すると、Preview にこれまでに定義した2つの車のバリアントのリソースが表示されます。
セカンダリーゲージをテーマ化する¶
このセクションでは、各車両バリアントの視覚的外観を設定し、次の変更を可能にします:
ゲージの色
左側ゲージのアイコン
値のソース、ゲージスケール、および左側のセカンダリーゲージの単位
セカンダリゲージをテーマ化するには:
Prefabs で、Secondary gauges > Secondary gauges grid > Left gauge info > Value を選択し、Properties で Style プロパティを追加し、Secondary gauges Left gauge value Gasoline スタイルに設定します。
Secondary gauges Left gauge value Gasoline スタイルは Text Block 2D ノードのみを対象とし、RootPage ノードの Temperature プロパティからエンジン温度計の値を取得するためにバインディングを使用します。
Properties > Bindings で、Text プロパティの値を設定するバインディングの隣にある
をクリックして、そのバインディングを削除します。バインディングを削除するのは、Secondary gauges Left gauge value Gasoline スタイルを使用してバインディングを設定するためです。
Prefabs で Secondary gauges を右クリックし、Add Resources to a Theme Group を選択し、Add Resources to a Theme Group ウィンドウで:
Theme Group を Car variant に設定します。
Text Block ノードの表示を有効にするには、
をクリックします。これらのリソースIDを選択して名前を変更します:
Gauge.Node.Style から Secondary gauges Right へ
Gauge.Node.Style_1 から Secondary gauges Left へ
130 から Secondary gauges scale max Left へ
50 から Secondary gauges scale min Left へ
Left gauge icon.Image2D.Image から Secondary gauges icon Left へ
Value.Node.Style から Secondary gauges value Left へ
° を Secondary gauges unit Left に
Add をクリックします。
Car variant テーマグループの Theme Editor で、前のステップで追加したリソースIDを設定します。
Gasoline テーマセットの場合:
Secondary gauges Right を Secondary gauge right Gasoline スタイルにポイントする
このスタイルは、右側のセカンダリーゲージを定義する Gauge Model ノードが使用するマテリアルの Emissive Color プロパティを設定します。
Secondary gauges Left を Secondary gauge left Gasoline スタイルにポイントする
このスタイルは、RootPage ノードの Temperature プロパティからエンジン温度ゲージの値を取得するためのバインディングを設定し、左側のセカンダリーゲージが使用する Gauge Model ノードのマテリアルに対して Emissive Color プロパティを設定します。Secondary gauges > Gauges > Scene > Left gauge > Gauge Model ノードは、バインディングからの値を使用してゲージバーの位置を設定します。
Secondary gauges scale max Left から 130 へ
Secondary gauges scale min Left から 50 へ
Secondary gauges icon Left を Temp_Icon テクスチャに
Secondary gauges value Left を Secondary gauges Left gauge value Gasoline スタイルに
このスタイルは、RootPage ノードの Temperature プロパティからエンジン温度計の値を取得するためのバインディングを設定します。この値は、Secondary gauges > Secondary gauges grid > Left gauge info > Value Text Block 2D ノードに表示されます。
Secondary gauges unit Left を°に
Hybrid テーマセットの場合:
Secondary gauges Right を Secondary gauge right Hybrid スタイルにポイントする
Secondary gauges Left を Secondary gauge left Hybrid スタイルにポイントする
Secondary gauges scale max Left から 100 へ
Secondary gauges scale min Left から 0 へ
Secondary gauges icon Left を Battery_Icon テクスチャに
Secondary gauges value Left を Secondary gauges Left gauge value Hybrid スタイルに
Secondary gauges unit Left から % へ
Dictionaries で Car variant テーマグループのテーマを選択すると、Preview にこれまでに定義した2つの車のバリアントのリソースが表示されます。
Primary gauges Modern プレハブを変更する¶
このセクションでは、Primary gauges Modern プレハブを変更して、Gasoline と Hybrid の両方の車のバリアントテーマに同じプレハブを使用できるようにします。
Primary gauges Modern プレハブを変更するには、
（オプション） で、Dictionaries において Cluster theme を Modern に設定し、Preview で Primary gauges Modern プレハブに対する変更を確認できるようにします。
Primary gauges Modern プレハブで、リソースをリソースIDに置き換えます。
このチュートリアルステップの最初のセクションで Primary gauges Classic プレハブにテーマを適用した際に、これらのリソースIDを作成し、Car variant テーマグループに追加しました。
Prefabs で、Primary gauges Modern > Gauges > Scene > Cluster frame outer を選択し、Properties で Mesh プロパティを <ResourceID> に設定し、Cluster frame outer リソースIDを使用します。
Prefabs で、Primary gauges Modern > Gauges > Scene > Cluster frame inner を選択し、Properties で Mesh プロパティを <ResourceID> に設定し、Cluster frame inner リソースIDを使用します。
Prefabs で、Primary gauges Modern > Primary gauges grid Modern > Table RPM を選択し、Properties で Theming.TableRPMVariant プロパティを <ResourceID> に設定し、Variant リソースIDを使用します。
Primary gauges Modern > Gauges > Scene > Right gauge および Left gauge ノードで、Render Transformation プロパティをスタイルに置き換えます。
Prefabs で Primary gauges Modern > Gauges > Scene > Right gauge を選択し、Properties で Style プロパティを追加し、Primary gauges right position Modern Gasoline スタイルに設定します。
このスタイルは、Render Transformation プロパティの値を設定します。
Right gauge ノードから Render Transformation プロパティを削除します。
このプロパティの値を設定するために Primary gauges right position Modern Gasoline スタイルを使用するため、このプロパティを削除します。
前の2つのステップを Primary gauges Modern > Gauges > Scene > Left gauge ノードに対して繰り返しますが、Primary gauges left position Modern Gasoline スタイルを使用します。
Prefabs で Primary gauges Modern を右クリックし、Add Resources to a Theme Group を選択し、Add Resources to a Theme Group ウィンドウで：
Theme Group を Car variant に設定します。
これらのリソースIDを選択して名前を変更します:
Right gauge.Node.Style から Primary gauges Modern Right gauge へ
Gauge top.Node.Style から Primary gauges Modern Top へ
Left gauge.Node.Style から Primary gauges Modern Left gauge へ
Speed value trajectory.Node.Style から Primary gauges Modern Value へ
Add をクリックします。
Car variant テーマグループの Theme Editor で、前のステップで追加したリソースIDを設定します。
Gasoline テーマセットの場合:
Primary gauges Modern Right gauge を Primary gauges right position Modern Gasoline スタイルにポイントする
このスタイルは、Render Transformation プロパティを使用して右側のプライマリゲージの位置を設定します。
Primary gauges Modern Top を Primary gauges color Modern Gasoline スタイルにポイントする
このスタイルは、両方のゲージの最上層を定義する Gauge top Model ノードが使用するマテリアルの Ambient Color プロパティを設定します。
Primary gauges Modern Left gauge を Primary gauges left position Modern Gasoline スタイルにポイントする
このスタイルは、Render Transformation プロパティを使用して左側のプライマリゲージの位置を設定します。
Primary gauges Modern Value を Primary gauges value Modern Gasoline スタイルにポイントする
このスタイルは、Speed value trajectory および RPM value trajectory Trajectory Layout ノードの位置を Vertical Margin プロパティを使用して設定します。主要なゲージの速度とRPMの値は、これらの Trajectory Layout ノードに沿って移動します。
Hybrid テーマセットの場合:
Primary gauges Modern Right gauge を Primary gauges right position Modern Hybrid スタイルにポイントする
Primary gauges Modern Top を Primary gauges color Modern Hybrid スタイルにポイントする
Primary gauges Modern Left gauge を Primary gauges left position Modern Hybrid スタイルにポイントする
Primary gauges Modern Value を Primary gauges value Modern Hybrid スタイルにポイントする
Dictionaries Modern テーマで選択し、Cluster theme テーマグループでテーマを変更すると、Car variant テーマグループで、Preview が Modern テーマの2つの車のバリアントのリソースを表示します。