ステップ2 - ヘッドライトインジケーターを作成する¶

このチュートリアルのこのステップでは、ヘッドライトインジケーターを作成し、ステートマネージャーを使用して異なる状態でのヘッドライトインジケーターの外観を設定します。

../../_images/indicator-step2-completed-with-needle.gif

ヘッドライトインジケーターを作成する¶

このセクションでは、ヘッドライトインジケーターを作成します。

ヘッドライトインジケーターを作成するには、以下のようにします。

Node Tree で、FuelLevel ノードを右クリックし、Duplicate を選択し、F2 キーを押して、ノードの名前を Headlights に変更します。
Node Tree で Headlights ノードを選択し、Properties で両方のバインディングの横にあるをクリックして削除します。
Node Tree で Headlights ノードを選択し、Preview で Node tool を選択し、Headlights ノードを時計の右側にドラッグします。

ヒント

ノードを真の水平または垂直線で移動するには、Node tool を持つノードをドラッグする際に Shift キーを押し続けます。
Node Tree で Headlights ノードを選択し、Properties で SecondaryColor プロパティを右クリックして、Remove を選択します。
Node Tree で Headlights ノードを選択し、Properties で設定します。
- Layout Width を41に、Layout Height を31に
  
  この方法で、TileAtlas テクスチャから描画したいヘッドライトインジケーター画像のサイズを設定します。
- OffsetInTileAtlas プロパティフィールド:
  - X を 0 に
  - Y を 0 に
  この方法で、表示したいロービームヘッドライトインジケーター画像までの、TileAtlas テクスチャの左上隅からの距離をピクセル単位で設定します。
- PrimaryColor プロパティフィールド Hue (H) を95に設定します。
  
  このようにして、緑色を使用してヘッドライトインジケーターを描画します。

ヘッドライトインジケーターを制御する¶

このセクションでは、ステートマネージャーを使用して、異なる状態でヘッドライトインジケーターの外観を設定します。

ヘッドライトインジケーターを制御するには:

Node Tree で Headlights ノードを選択し、State Tools で Create State Manager をクリックします。

State Tools ウィンドウは Preview ウィンドウの下にあります。

Kanzi Studio はステートマネージャーを作成し、それを Headlights ノードに割り当てます。
State Tools で Create State を3回クリックして3つのステートを作成し、各ステートの名前をダブルクリックして、ステートの名前を Off、Low、High に変更します。

これらの状態を使用して、Headlights インジケーターの外観を設定します。
- ヘッドライトがオフのときの Off ステート
- Low ステートは、ロービームヘッドライトがオンのとき
- ハイビームヘッドライトがオンのときの High ステート
State Tools で <No Controller Property> をクリックし、+ Create Property Type を選択し、Create Property Type ウィンドウで設定します。
- Name から Indicator.Headlights へ
- Type から Enum へ
Library > Property Types > Indicator で、Kanzi Studio は、作成した状態の名前を持つ列挙キーを持つ Indicator.Headlights 列挙プロパティタイプを作成します。このカスタムプロパティタイプを使用して、Headlights インジケーターを Off、Low、および High 状態の間で切り替えます。
Node Tree で Headlights ノードを選択し、Properties で右クリックして、Add Property > Node > Visible を選択します。

Visible プロパティを使用して、ノードの可視性を制御できます。
Off ステートの State Tools で、をクリックして、Visible プロパティの現在の値をそのステートに保存します。

Visible プロパティが Off ステートで無効になっているため、Headlights ノードはそのステートでは表示されません。
Properties で Visible プロパティを有効にし、Low ステートの State Tools でをクリックして、Visible プロパティの現在の値をそのステートに保存します。

Low ステートで Visible プロパティを有効にすることにより、そのステートで Headlights ノードが表示されます。
Properties セット内で：
- OffsetInTileAtlas プロパティフィールド Y を31に設定
- PrimaryColor プロパティフィールド Hue (H) を163に設定します。
High ステートの State Tools で、をクリックして、プロパティの現在の値を High ステートに保存します。
State Tools でをクリックして、State Tools を非アクティブ化します。
Node Tree で Headlights ノードを選択し、Properties で右クリックして、Add Property > Controller Properties > Indicator.Headlights を選択します。

Node Tree で、Headlights ノードを選択し、Properties で Indicator.Headlights プロパティを次のように設定します:

ヘッドライトインジケーターをオフにするための Off
Low を使用してロービームヘッドライトのインジケーターを表示する
ハイビームヘッドライトインジケーターを表示する High

前のステップ

次の作業¶

このチュートリアルでは、クラスターインジケーターの作成方法を学びました。タイルアトラスの使用方法や、バインディングとステートマネージャーを使用してインジケーターを制御する方法を学びました。このチュートリアルで学んだアプローチを使用して、TileAtlas テクスチャから他のインジケーターをクラスターに追加することができます。以下は、TileAtlas テクスチャ内の各インジケーターのサイズと位置を設定するプロパティ値です。

プロパティ (Property)
OffsetInTileAtlas X	74	40	77
OffsetInTileAtlas Y	0	33	33
Layout Width	38	30	30
Layout Height	33	30	30

各インジケーターの表示を制御するには、次のいずれかを行うことができます。

各インジケーターのノードに Visible プロパティを追加して使用します。
独自のプロパティタイプを作成し、各インジケーターのノードの Visible プロパティの値を設定するためにバインディングを使用します。

また、以下も行えます。

カスタムプロパティを使ってゲージポインタの位置を制御する方法を学習する。チュートリアル: ゲージを作成するを参照してください。
Kanzi Data Sources を使用して、ユーザーインターフェースをアプリケーションデータから分離する方法を学びます。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。
Kanzi Engine API を使用してプロパティの値を設定する方法については、チュートリアル: Hello world! とチュートリアル: Kanzi Engine API の高度な使用法を参照してください。

ステップ2 - ヘッドライトインジケーターを作成する¶

ヘッドライトインジケーターを作成する¶

ヘッドライトインジケーターを制御する¶

次の作業¶

関連項目¶