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

このステップでは、State Tools ウィンドウを使用してアプリケーションの状態を作成および使用する方法を学びます。

State Tools ウィンドウでステートを作成する

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

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

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

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

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

State Tools ウィンドウでステートを作成するには：

  1. Pages ウィンドウで Car ノードをクリックして、その Page ノードに移動します。

    ../../_images/pages-car-page-step-6.png

  2. Car > Car Viewport 2D ノードの Node Tree ウィンドウで、CarScene ノードを選択します。

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

  3. State Tools ウィンドウで Create State Manager をクリックします。Kanzi Studio は新しいステートマネージャーを作成し、それを CarScene ノードに割り当て、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. Node Tree ウィンドウで 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. Side ステートの State Tools ウィンドウで image0 をクリックします。

      image1 をクリックすると、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. Node Tree ウィンドウで Alt を押しながら右クリック、Car Page ノードを選択し、Button 2D を選択します。

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

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

    この設定により、Button 2D ノードのサイズを親ノードである Car Page ノードと同じサイズに設定します。これにより、アプリケーションのユーザーは Car Page ノードのどこでもクリックしてボタンをアクティブにすることができます。

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

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

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

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

  4. Next State アクションセット内で：

    • State Group から StateGroup へ

    • Target Item から Prefabs/CarScene/CarScene へ

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

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

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

Previous step

次の作業

このチュートリアルでは、Kanzi Studio 機能について、シンプルな Kanzi アプリケーションを作成することで学びました。これで、Kanzi の使い方を学び始めることができます。

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

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

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

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

ヘルプを利用する

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

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

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

関連項目

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