ステップ 6 - アプリケーションステートを追加

このステップでは、アプリケーションのステートを作成し、使用する方法を学習します。

ステートを作成する

Kanzi アプリケーションで異なる状態を作成するには、State Manager を使用します。

State Tools ウィンドウには、Node Tree ウィンドウまたは Prefabs ウィンドウで選択したノードの State Manager が表示されます。

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

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

このセクションでは、Kanzi Studio の State Tools を使用してステートマネージャーを作成し、アプリケーションのステートを定義します。

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

  1. Activity Browser ウィンドウで、Settings アクティビティの横にある アクティベート をクリックして、そのアクティビティをアクティブ化します。

    ../../_images/activity-browser-car.png

  2. Prefabs ウィンドウで、CarScene プレハブを選択します。

    ../../_images/project-car-node.png

  3. State Tools ウィンドウで、Create State Manager をクリックします。

    Create State Manager をクリックすると、Kanzi Studio は次の処理を行います。

    1. ステートマネージャーを作成します

    2. 選択したノードにステートマネージャーを割り当てます

    3. State Tools ウィンドウを Edit モードに設定します。

      State Tools ウィンドウが Edit モードの場合、Preview ウィンドウのタブと境界がオレンジ色に変わります。

    ヒント

    State Tools ウィンドウが Edit モードにあるとき、Kanzi Studio は選択したノードとそのツリー内のプロパティ値に対するすべての変更を追跡します。アプリケーション内のステートの定義を変更しない場合は、State Tools の編集モードをオフにしてください。

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

  4. State Tools で、Create State を2回クリックして2つのステートを作成します。各ステートの名前をダブルクリックして、ステートの名前を変更します。

    例えば、1つのステートを Side、もう1つを Front と名付けます。

    ../../_images/state-tools-two-states-renamed.png

  5. State Tools を使用して、その状態でアプリケーションがどのように見えるかを設定します。

    1. Prefabs ウィンドウで、CarScene > RootNode > CameraRoot ノードを選択します。Properties ウィンドウで Render Transformation プロパティを追加し、その Rotation Y プロパティフィールドを 20 に設定します。

      この設定では、Camera ノードを含むノードを回転することで、車のモデルを別のアングルから表示できます。

      ../../_images/project-car-camera_root.png ../../_images/properties-camera_root-rotation-y-side.png

    2. State Tools ウィンドウで、Side ステートの set-current-state をクリックします。

      set-current-state をクリックすると、変更したプロパティの値が Kanzi Studio によってそのステートに保存されます。

      ../../_images/state-tools-side-set.png

  6. 前の手順を繰り返しますが、Render Transformation Rotation Y プロパティフィールドを -20 に設定し、変更を Front ステートに保存します。

    ../../_images/properties-camera_root-rotation-y-front.png ../../_images/state-tools-front-set.png

    ヒント

    State Tools ウィンドウが Edit モードのとき、その State Manager 内の任意のステートをクリックすると、そのステートでアプリケーションがどのように見えるかを確認できます。

  7. Edit State Manager をクリックして、State Tools Edit モードを終了します。

    ../../_images/state-tools-off1.png

アプリケーションのステートを設定する

このセクションでは、前のセクションで作成したステートをアプリケーションのユーザーが切り替えられるようにするボタンを Kanzi アプリケーションに作成します。

アプリケーションのステートを設定するには、以下のようにします。

  1. Prefabs ウィンドウで、Car プレハブを Alt を押しながら右クリック し、Button 2D を選択します。

    ../../_images/car-create-button.png

  2. Properties ウィンドウで、Horizontal Alignment プロパティと Vertical Alignment プロパティを追加し、両方を Stretch に設定します。

    この設定により、Button 2D ノードのサイズを、スクリーン全体である Viewport 2D と同じサイズにします。これにより、アプリケーションのユーザーは Car アクティビティの任意の場所をクリックしてボタンを操作できるようになります。

    ../../_images/button-alignment-stretch.png

  3. Node Components で、Button: Click トリガーを Alt を押しながら右クリック し、Dispatch Message Action > State Manager > Next State を選択します。

    このアクションで設定したステートマネージャーのステートグループ内の次のステートに進むには、Next State アクションを使用します。

    ../../_images/add-next-state-action.png

  4. Next State アクションで、以下を設定します。

    • Target Item から Prefabs/CarScene/CarScene へ

    • State Group から StateGroup へ

    ../../_images/next-state-action-settings.png

Preview ウィンドウで、Next ボタンと Previous ボタンを除く Car アクティビティの任意の場所をクリックすると、アプリケーションのステートが Side と Front の間で切り替わります。

../../_images/getting-started-step-6.gif

前のステップ

次の作業

このチュートリアルでは、簡単な Kanzi アプリケーションを作成しながら Kanzi Studio の機能について学習しました。次は、Kanzi の使い方を学習しましょう。

  • その他のチュートリアルを行う。チュートリアル を参照してください。

  • Kanzi を動かす基本的な概念についてお読みください。Kanzi の基本事項 をご覧ください。

  • Kanzi の機能の詳細を探る。...を使用する を参照してください。

  • Kanzi アプリケーションのパフォーマンスが最適であることを確認してください。ベストプラクティス を参照してください。

ヘルプを利用する

Kanzi Studio で Kanzi のドキュメントを開くには、F1 を押してください。

Kanzi Studio はデフォルトのブラウザで Kanzi ドキュメントを開きます。

../../_images/kanzi-documentation.png

関連項目

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