ステップ4 - Car ページのステートを作成する

このステップでは、Kanzi ステートマシンを使用して、アプリケーション内で車を異なる角度から表示し、それらの状態間の遷移をアニメーション化します。

車の影を作成する

このセクションでは、Page ノード Car で車の影に使用されるマテリアルを調整します。

車の影を作成するには、以下のようにします。

  1. Node Tree で Page ノード Car をダブルクリックして、新しい Preview タブで開きます。

    車のモデルの下に平面があります。これは、影のテクスチャをレンダリングするために使用されるマテリアルのアルファブレンディングモードが正しくないためです。

    ../../_images/composition-tab-car.png ../../_images/car-opaque-shadow.png

  2. Node Tree で、Car > Viewport 2D > Car > RootNode > Shadowplane ノードを選択し、Properties で Cluster Material プロパティの横にある go-to をクリックして、Shadow マテリアルのプロパティを開きます。

    ../../_images/shadowplane-in-the-project.png ../../_images/shadow-material.png

  3. Shadow マテリアル Properties で、Blend Mode を Alpha: Automatic に設定します。

    ../../_images/blend-mode-automatic.png ../../_images/car-alpha-shadow.png

ステートを作成する

このセクションでは、車のさまざまなステートを作成します。各ステートは車の異なる部分に焦点を合わせています。このステップの次のセクションでは、それらのステートに移動するためにクリックできるUIコントロールを作成します。

Kanzi では、ステートマネージャーはリッチなユーザーインターフェースを作成するための最も重要な機能の一つです。

ステートを作成するには、以下のようにします。

  1. Node Tree で、Car > Viewport 2D > Car > RootNode > Camera_Root ノードを選択します。

    ../../_images/car-camera_root-node.png

  2. State Tools ウィンドウで Create State Manager をクリックして、Camera_Root ノードにステートマネージャーを作成します。

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

    ../../_images/create-state-manager.png

    Kanzi Studio は新しいステートマネージャーを作成し、それを Camera_Root ノードに割り当てます。

    State Tools がアクティブな場合、Preview タブはオレンジ色になり、State Tools を使用してステートを作成できます。State Tools がアクティブな場合、Kanzi Studio はすべてのプロパティ値の変更を追跡し、State Tools を使用してこれらの値をステートに保存できます。

    ../../_images/state-tools-active.png

  3. State Tools で Create State をクリックしてステートを作成します。

    3つのステートを作成します。

    ../../_images/create-states.png

  4. 各ステートの名前をダブルクリックし、ステートに Brakes、Roof、Suspension と名前を付けます。

    ../../_images/states-with-names.png

  5. Node Tree で、Car > Viewport 2D > Car > RootNode > Camera_Root > Camera ノードを選択します。

    ../../_images/car-camera.png

  6. Preview で Camera tool カメラツール を選択し、set-position をクリックします。このオプションを有効にすると、Kanzi Studio はフリーカメラの現在の位置を、Camera tool ドロップダウンメニューで選択した Camera ノードに保存します。

    この場合、これは Node Tree で選択した Camera ノードです。

    ../../_images/camera-tool-store-current-position-on.png

  7. Node Tree で、Car > Viewport 2D > Car > RootNode > Car ノードを選択し、Preview Camera tool で カメラを持ってくる をクリックして、カメラを車に近づけます。

    ../../_images/car-node.png ../../_images/bring-camera-closer-to-car.png

  8. Preview Camera tool でオービットカメラ image0 を使用して車の位置を設定し、State Tools で image1 をクリックして、その状態に現在の値を保存します。

    例えば、位置に満足したら、Brakes ステートの State Tools で イメージ2 (image2) をクリックして、Camera ノードの現在の位置をそのステートに保存します。

    ../../_images/store-values-to-state.png

    Orbit Camera は移動を可能にします。

    • Node Tree で選択するノード。

    • カメラの Constraints > Look At プロパティで設定したノード。

    オービット (軌道) カメラを動かすには、以下のショートカットを使用します。

    操作

    ディスクリプション (Description)

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

    ロテート (Rotate)

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

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

    パン

    • マウスホイールを回します。

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

    ズーム

    Ctrl を押しながら、左マウスボタンをクリックします。

    3Dノードを選択または選択解除します。

  9. 前のステップを繰り返して、すべてのステートのポジションを作成します。

    ../../_images/state1.png ../../_images/state2.png ../../_images/state3.png

  10. Preview で image3 をクリックして Interact モードに入り、State Tools で各ステートをクリックすると、そのステートでアプリケーションがどのように見えるかを確認できます。この場合、各ステートに定義した位置に表示された車のシーンを見ることができます。

  11. State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。

    ../../_images/state-tools-off.png

ステート間で遷移させるコントロールを作成する

このセクションでは、前のセクションで作成したステート間の遷移コントロールを作成します。

ステート間の遷移コントロールを作成するには、以下のようにします。

  1. Node Tree Alt を押しながら右クリック の Car > Viewport 2D ノードで、Stack Layout 2D を選択し、CarControl と名付けます。

    ../../_images/car-page-stack-layout-2d.png

  2. Node Tree で CarControl ノードを選択し、Properties で Direction プロパティを Y に設定します。

    Direction プロパティを使用して、Stack Layout ノードが子ノードを積み重ねる軸を設定します。

    ../../_images/stack-layout-direction-y.png

  3. Prefabs で イメージ4 (image4) をクリックし、Button 2D プレハブを作成し、Button 2D で Image ノードを作成します。

    このプレハブを使用して、前の手順で作成したステートマネージャーをコントロールします。

    ../../_images/button-2d-prefab.png

  4. Prefabs で、Button 2D > Image ノードを選択し、Properties で追加して設定します。

    • Layout Width と Layout Height のプロパティを100ピクセルに設定します。

    • Vertical Margin プロパティ Top と Bottom プロパティフィールドを5に設定します。

    • Image プロパティの横にある イメージ5 (image5) をクリックします。

      これにより、プロジェクトでそのプレハブの各インスタンスに異なる画像を表示できます。

    ../../_images/button-2d-image-properties.png

  5. Prefabs ウィンドウから3つの Button 2D プレハブを Node Tree ウィンドウにドラッグし、Car > Viewport 2D > CarControl ノードにドロップします。

    Kanzi Studio は CarControl ノードで Button 2D プレハブをインスタンス化します。

    ../../_images/carcontrol-with-button-2d-prefabs.png

  6. 各 Button 2D プレハブインスタンスを選択し、F2 を押して、それらを Brakes、Roof、および Suspension にリネームします。

    ../../_images/renamed-carcontrol-nodes.png

  7. CarControl ノードの Node Tree で、インスタンス化された Button 2D プレハブの最初のものを選択します。

    1. Properties に FirstApplication.Button2D.Image プロパティを追加し、StateBrakes 画像に設定します。

      ../../_images/button2dimage-property.png

    2. Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Button > Click を選択します。

      ../../_images/create-button-click-trigger.png

    3. Node Components Alt を押しながら右クリック で Button: Click トリガーを使用し、Dispatch Message Action > State Manager > Go to State を選択し、State Manager: Go to State アクションセットで:

      • Target Item から Prefabs/Car/Car/RootNode/Camera_Root へ

      • State から Camera_Root State Manager/StateGroup/Brakes へ

      ../../_images/click-add-go-to-state-action.png ../../_images/button-2d-button-click-action-go-to-state-brakes.png

  8. 前の手順を繰り返して、残りの2つの Button 2D プレハブを設定します。StateRoof と StateSuspension の画像を使用し、Go to State アクションを Roof と Suspension のステートにポイントするように設定します。

    CarControl ノードのボタンをクリックすると、Kanzi Studio はデフォルトの線形トランジションを使用してその状態に移行します。トランジションは State Transition Editor を使用して調整できます。ステート遷移の使用 を参照してください。

    ../../_images/step-4-mid.gif

ボタンの位置を調整する

車のステートを制御するボタンの位置を調整します。

ボタンの位置を調整するには、以下のようにします。

  1. メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。

    ../../_images/screen-tab.png

  2. Pages ウィンドウで Car ノードを選択し、Preview で Node tool イメージ6 (image6) を使用して CarControl ノードを配置します。

    ヒント

    Node tool を持つノードを選択するには、Preview で選択したいノードをダブルクリックします。

    ../../_images/carcontrol-positioned.png

Previous step Next step

関連項目

ステートマネージャーの使用方法について詳しくは、ステートマネージャー (State Managers) を使用する場合 を参照してください。

トリガーやアクションの使用方法に関する詳細については、トリガー (Triggers) を参照してください。

Preview Camera tool の操作について詳しく知るには、Camera ノードを使用する を参照してください。