ステップ 4：Car スクリーンのステートの作成

このステップでは、Kanzi のステートマシンを使用して、アプリケーション内の車をさまざまなアングルから表示し、それらのステート間のトランジションをアニメーション化します。

車の影を作成する

このセクションでは、Car Settings アクティビティで、車の影に使用するマテリアルを調整します。

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

  1. Activity Browser の Car Settings アクティビティで、アクティベート をクリックします。

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

    ../../_images/activity-browser-car-settings-active.png ../../_images/preview-car-settings.png

  2. Prefabs で 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 つです。

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

  1. Prefabs で Car Settings アクティビティをダブルクリックして、新しい Preview タブで開きます。

    Preview で Car Settings を単独で開くと、デフォルトではアクティビティの背景が設定されていないため、背景は黒になります。このチュートリアルでは、アクティビティには Screen > RootNode の背景が表示されます。

    ../../_images/node-tree-car-settings-tab.png ../../_images/preview-tab-car-settings.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. Preview で Camera tool カメラツール を選択し、set-position をクリックします。

    このオプションを有効にすると、Kanzi Studio は Camera tool のドロップダウンメニューで選択した Camera ノードにフリーカメラの現在のポジションを保存します。

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

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

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

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

  9. 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 キーを押し、左マウスボタンをクリックしてドラッグします。

    ズーム

    Alt を押したままマウスの左ボタンをクリックします。

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

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

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

  11. Preview で image3 をクリックして Interact モードに入ります。State Tools で各ステートをクリックして、そのステートでアプリケーションがどのように表示されるかを確認します。

    ../../_images/first-tutorial-step-4-car-states.gif

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

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

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

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

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

  1. Node Tree で、Car Settings > Viewport 2D ノードを Alt を押しながら右クリック し、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 に

    • Layout.Item > Vertical Margin プロパティの Top プロパティフィールドと Bottom プロパティフィールドを 5 に

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

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

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

    ヒント

    プロパティを追加するには、Properties で右クリックし、Add Property を選択して、追加するプロパティを選択します。

    ../../_images/properties-right-click-to-add-vertical-margin.png

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

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

    ../../_images/carcontrol-with-button-2d-prefabs.png ../../_images/preview-carcontrol-buttons-start.png

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

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

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

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

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

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

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

    3. Node Components で Button: Click トリガーを Alt を押しながら右クリック し、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 ステートを指すように設定します。

    ヒント

    同様の設定のトリガーを追加するには、Node Components で以下のようにします。

    1. トリガーを右クリックし、Copy を選択します。

    2. トリガーを追加するノードを選択し、Node Components で Triggers を右クリックして、Paste を選択します。

    3. トリガーとそのアクションを編集します。

    ../../_images/node-components-copy-trigger.png ../../_images/node-components-paste-trigger.png

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

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

ボタンの位置を調整する

このセクションでは、車のステートを制御するボタンの位置を調整します。

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

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

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

  2. Activity Browser で Car Settings アクティビティをアクティブにします。Prefabs で、Car Settings > Viewport 2D > CarControl ノードを選択します。Properties で、Transform 2D > Render Transformation プロパティを追加し、以下を設定します。

    • Translation X を 20 に

    • Translation Y を 75 に

    ../../_images/prefabs-carcontrol.png ../../_images/properties-carcontrol.png ../../_images/carcontrol-positioned.png

前のステップ 次のステップ

関連項目

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

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

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