ステップ 1 - 燃料レベルインジケーターを作成する¶

このチュートリアルのこのステップでは、低燃料レベルと空の燃料タンクの警告を表示する燃料レベルインジケーターを作成します。

../../_images/indicator-step1-completed.gif

チュートリアルを入手する¶

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Indicator チュートリアルの横にあるダウンロードをクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

<KanziWorkspace>/Tutorials/Indicator/Start ディレクトリ内のチュートリアルの開始地点プロジェクト。
<KanziWorkspace>/Tutorials/Indicator/Completed ディレクトリ内の完成したチュートリアル。

開始プロジェクトの内容¶

スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。

TileAtlas テクスチャは、クラスターインジケーターの画像を含むタイルアトラスを示しています。
TileAtlasMaterial は、特定の色を使用してタイルアトラスの一部を表示することを可能にします。

低燃料インジケーターを作成する¶

このセクションでは、燃料の量が25未満のときに表示される低燃料レベルインジケーターを作成します。

低燃料インジケーターを作成するには、以下のようにします。

Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Indicator チュートリアルの横にある Open をクリックし、Start project を選択します。

このプロジェクトには、作動する速度、燃料、バッテリーのゲージポインタ (針) を備えた2Dクラスターが含まれます。

ヒント

Preview で3つのゲージすべてが見えない場合は、Preview の右上隅にある Preview のズームレベルを調整できます。
Node Tree Alt を押しながら右クリック Gauges で、Empty Node 2D を選択し、ノードに Indicators と名前を付けます。
Node Tree Alt を押しながら右クリック Indicators で、Empty Node 2D を選択し、ノードに FuelLevel という名前を付けます。
タイルアトラスからインジケーター画像を描画するために使用するブラシを作成します。
1. Library Alt を押しながら右クリック Materials and Textures で、Material Brush を選択し、Tile Atlas Material Brush と名付けます。
2. Library で Tile Atlas Material Brush を選択し、Properties で Material プロパティを TileAtlasMaterial マテリアルに設定します。
  
  TileAtlasMaterial を使用すると、テクスチャの一部のみを描画できます。このマテリアルを Material Brush で使用する場合、タイルアトラステクスチャから選択した画像のみを描画できます。
Node Tree で FuelLevel ノードを選択し、Properties で Foreground Brush プロパティを追加し、それを Tile Atlas Material Brush に設定します。

Tile Atlas Material Brush を使用して、タイルアトラスから低燃料レベル警告を描画します。
Library > Materials and Textures > Materials で TileAtlasMaterial マテリアルを選択し、Properties で Blend Mode プロパティを Alpha: Premultiplied に設定します。

このマテリアルタイプのフラグメントシェーダーは、ソースフラグメントをデスティネーションフレームバッファとブレンドできるように、プレマルチプライドアルファを期待しています。
Properties からこれらの TileAtlasMaterial マテリアルプロパティを FuelLevel ノードにドラッグします。
- Texture
- OffsetInTileAtlas
- PrimaryColor
- TileAtlasSize
この方法で、マテリアルのプロパティをノードに追加し、そのノードからそれらのプロパティを制御します。
Node Tree で FuelLevel ノードを選択し、Properties で追加して設定します。
- Texture から TileAtlas へ
  
  この方法で、使用したいタイルアトラスを含むテクスチャを設定します。
- TileAtlasSize プロパティフィールド:
  - X を112に
  - Y から 64 まで
- Layout Width を32に、Layout Height を33に
  
  この方法で、TileAtlas テクスチャから描画したい燃料レベルインジケーター画像のサイズを設定します。
- OffsetInTileAtlas プロパティフィールド:
  - X を42に
  - Y を 0 に
  この方法で、表示したい燃料レベルインジケーター画像までの、TileAtlas テクスチャの左上隅からの距離をピクセル単位で設定します。
- PrimaryColor プロパティフィールド:
  - Hue (H) から41まで
  - Saturation (S) を235に
  この方法で、燃料レベルが低いことを示すために黄色で画像を描画します。
Preview では、左上隅に燃料レベルインジケーターが表示されます。
Preview で Node tool を選択し、クリックします。
- を使用してノードやガイドへのスナップを無効にする
- を選択し、ターゲット変換のために Render Transformation を選択します。
  
  以下の方法で変換を適用することができます。
  - レイアウト変換では、レイアウトパスの適用前にアイテムを変換します。
  - レンダー変換では、レイアウトパス適用後、アイテムをレンダリングする前に、アイテムを変換します。
  Render Transformation を常に使用してください。ただし、レイアウトを再計算する必要があるとわかっている場合を除きます。
Node Tree で FuelLevel ノードを選択し、Preview で FuelLevel ノードを時計の左側にドラッグします。
Node Tree で FuelLevel ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から Visible へ
- Expression へ
```
{@../../Indicator.Fuel} < 25
```
Save をクリックします。

このバインディングを使用すると、FuelLevel ノードと低燃料レベル警告を、Gauges ノード内の Fuel プロパティの値が25未満の場合にのみ表示するように設定します。

Node Tree で Gauges ノードを選択し、Properties で Fuel プロパティの値を変更します。Preview では、Fuel プロパティの値が25未満の場合に低燃料レベルの警告が表示されます。

../../_images/indicator-step1-low-fuel-binding.gif

エンプティ燃料タンクインジケーターを作成する¶

このセクションでは、Gauges ノードの Fuel プロパティの値が10未満の場合に、燃料レベルインジケーターを変更して燃料タンクが空である警告を表示します。

空の燃料タンクインジケーターを作成するには、以下のようにします。

Library > Materials and Textures > Materials で TileAtlasMaterial マテリアルを選択し、Properties から SecondaryColor プロパティを FuelLevel ノードにドラッグします。
Node Tree で FuelLevel ノードを選択し、Properties で SecondaryColor プロパティフィールド Saturation (S) を195に設定します。

この方法で、UseSecondaryColor プロパティが有効になっている場合、FuelLevel ノードを赤色で燃料レベルインジケーターを表示するように設定します。
Node Tree で FuelLevel ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から UseSecondaryColor へ
- Expression へ
```
{@../../Indicator.Fuel} < 10
```
Save をクリックします。

このバインディングを使用して、Gauges ノード内の Fuel プロパティの値が10未満の場合に、UseSecondaryColor プロパティを有効に設定します。これにより、タンク内の燃料の残量が10未満の場合に、空の燃料タンク警告を赤色で表示します。