ステップ2 - 燃料とバッテリーの針を作成する

ステップ 2 では、前のステップと同じ方法に従い、燃料とバッテリーのポインタ (針) を作成します。

燃料ポインタを作成する

このセクションでは、燃料ポインタを作成します。

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

  1. Assets から FuelBatteryNeedle 画像をドラッグし、Preview の Gauges にドロップします。

    ../../_images/drag-fuelbatteryneedle.png

  2. Node Tree で FuelBatteryNeedle ノードを選択し、F2 を押して、FuelNeedle に名前を変更します。

    ../../_images/fuelneedle-in-project.png

  3. FuelNeedle ノードの位置を、Preview ツールとノードのプロパティを使用して調整します。これは、前のステップで SpeedNeedle に対して行ったのと同様です。位置を調整する際は、次のガイドラインに従ってください。

    1. Guides ノードのガイドと Render Transformation プロパティを使用して、FuelNeedle をスピードゲージの左側にあるゲージに配置します。

      ヒント

      右上隅にある Preview ズームスライダーを使用して、Preview 内のコンテンツの拡大レベルを調整します。

      ../../_images/preview-zoom-slider.png

      ヒント

      Preview でパンするには、

      • マウスの中央ボタンをクリックしてドラッグします。

      • Space キーを押し、左マウスボタンをクリックしてドラッグします。

    2. Render Transformation Origin プロパティを使用して、ノードの原点をノードの上部中央に設定します。X 属性を 0,5 に設定するだけで済みます。

    ../../_images/fuelneedle-in-preview.png

  4. Library Alt を押しながら右クリック Property Types で、Property Type を選択し、Property Type Editor セットで:

    • Name から Gauges.Fuel へ

    • Display Name から Fuel へ

    • Category から Gauges へ

    • Data Type から Integer へ

    • Lower Bound を 0 に

    • Upper Bound から 100 まで

    Save をクリックして、定義したプロパティを持つプロパティタイプを作成します。

    このカスタムプロパティタイプを使用して、Gauges 内の FuelNeedle の位置を制御します。

    ../../_images/create-fuel-property.png

  5. Node Tree で Gauges ノードを選択し、Properties で Fuel プロパティを追加します。

    ヒント

    Library > Property Types からプロパティタイプをドラッグし、Node Tree のノードにドロップすることで、ノードにカスタムプロパティタイプを追加できます。

    ../../_images/add-fuel-property.png

  6. Node Tree で FuelNeedle ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

    • Property から Render Transformation へ

    • Property Field から Rotation Z へ

    • Expression へ

      {@../Gauges/Gauges.Fuel} - 39

      Fuel プロパティの値が0のとき、針をゲージの値0に正しく配置するには、プロパティの値から39を引く必要があります。

    Save をクリックします。このバインディングにより、Gauges ノードに前のステップで追加した Fuel プロパティを使用して、FuelNeedle ノードの z 軸周りの回転を制御します。

    ../../_images/fuelneedle-binding.png

  7. Node Tree で FuelNeedle ノードをドラッグし、Gauges ノードの上にドロップします。

    Gauges ノードには、Fuel や Battery のゲージのための透明な開口部があり、針の位置を見ることができます。Node Tree ウィンドウ内のノードの位置は、ノードのレンダリング順序を定義します。ノードツリーの一番上のノードが最初にレンダリングされ、ノードツリーの一番下のノードが最後にレンダリングされます。FuelNeedle ノードを Gauges ノードの上に配置することで、Kanzi は最初に FuelNeedle ノードをレンダリングし、その上に Gauges ノードをレンダリングします。これにより、FuelNeedle のわずかな部分だけが表示され、エレガントな燃料インジケーターを作成します。

    ../../_images/fuelneedle-final-position.png ../../_images/fuelneedle-final-in-preview.png

バッテリーポインタを作成する

このセクションでは、バッテリーポインタを作成します。

バッテリーポインタを作成するには、以下のようにします。

  1. Assets から FuelBatteryNeedle 画像をドラッグし、Preview の Gauges にドロップして、BatteryNeedle に名前を変更します。

    ../../_images/batteryneedle-in-project.png

  2. BatteryNeedle ノードの位置と Render Transformation Origin を、Preview ツールとノードのプロパティを使用して調整します。これは、FuelNeedle に対して行ったのと同様です。ただし、BatteryNeedle をスピードゲージの右側に配置してください。

    ../../_images/batteryneedle-in-preview.png

  3. プロパティタイプを作成し、Property Type Editor に設定します。

    • Name から Gauges.Battery へ

    • Display Name から Battery へ

    • Category から Gauges へ

    • Data Type から Integer へ

    • Lower Bound を 0 に

    • Upper Bound から 100 まで

    Save をクリックして、定義したプロパティを持つプロパティタイプを作成します。

    このカスタムプロパティタイプを使用して、Gauges 内の BatteryNeedle の位置を制御します。

    ヒント

    Battery プロパティタイプと Fuel プロパティタイプの違いは名前だけなので、Library で Fuel プロパティを右クリックし、Duplicate を選択して、複製を Gauges.Battery にリネームし、Properties で Display Name プロパティを Battery に設定します。

  4. Node Tree で Gauges ノードを選択し、Battery プロパティを追加します。

    ../../_images/gauges-all-custom-properties.png

  5. Node Tree で BatteryNeedle ノードを選択し、バインディングを追加して、Binding Editor で設定します。

    • Property から Render Transformation へ

    • Property Field から Rotation Z へ

    • Expression へ

      -{@../Gauges/Gauges.Battery} + 39

      プロパティの値が増加したときに針を反時計回りに回転させるには、負の値を使用する必要があります。Battery プロパティの値が0のときにゲージの値0で針を正しく配置するには、プロパティの値に39を加える必要があります。

    Save をクリックします。

    このバインディングを使用して、Gauges ノードに前のステップで追加した Battery プロパティで、BatteryNeedle ノードの z 軸周りの回転を制御します。

    ../../_images/batteryneedle-binding.png

  6. Node Tree で BatteryNeedle ノードをドラッグし、Gauges ノードの上にドロップします。

    FuelNeedle ノードと同様に、BatteryNeedle ノードを Gauges の上に配置することで、Kanzi はまず BatteryNeedle ノードをレンダリングし、その上に Gauges ノードをレンダリングします。これにより、BatteryNeedle のわずかな部分だけが表示され、エレガントなバッテリーインジケーターが作成されます。

    ../../_images/batteryneedle-final-position.png ../../_images/batteryneedle-final-in-preview.png

Gauges ノードの Speed、Fuel、および Battery プロパティで、速度、燃料、バッテリーのゲージ針を制御できるようになりました。

前のステップ

次の作業

このチュートリアルでは、バインディングを使用して、プロパティで制御できるポインタ付きゲージの作成方法を学習しました。今では、あなたは次のことができます:

関連項目

バインディングを使用して行えることの詳細については、バインディングの使用 を参照してください。

Preview と Preview で利用可能なツールについて詳しく知るには、プレビュー (Preview) をご覧ください。

Kanzi プロパティの基本原則について学ぶには、プロパティシステム を参照してください。

Kanzi の基本原則について学ぶには、Kanzi の基本事項 を参照してください。

Kanzi アプリケーションの作成について詳しくは、チュートリアル を参照してください。

Kanzi Studio の機能について詳しく知るには、...を使用する をご覧ください。