ステートマネージャー (State Managers) を使用する場合

異なる状態で Kanzi アプリケーションの外観と動作を定義するために、ステートを使用します。例えば、ステートを使用して以下を行うことができます。

  • レイアウト内のアイテムのサイズを設定して、アイテムが選択されたときに強調します。

  • アプリケーションが特定の状態にあるときに、ユーザーインターフェースの一部を表示または非表示にします。

  • アプリケーションの状態に基づいて、アプリケーション内のボタンなどのコントロールを有効または無効にします。

  • アプリケーションをアニメーション化します。

ステートで設定されたプロパティは、デフォルト、継承、およびローカルのプロパティ値を上書きします。プロパティの優先順位 を参照してください。

これらの方法で状態間の変更を定義できます。

  • コントローラープロパティをステートグループに設定し、各ステートに対してそのプロパティの値を設定します。これらは、Button ノードの Is Down プロパティのような暗黙のプロパティである場合があります。ステートは、ノードの固有のロジックの一部として、または指定された Set Property アクションやアニメーションとしてプロパティが変更されると変化します。コントローラープロパティを使用してステートを設定する を参照してください。

  • State Manager アクション Go to State、Next State、および Previous State を使用します。State Manager アクションとコントローラープロパティを使用する場合、コントローラープロパティが変更されると、以前に設定された状態が上書きされることに注意してください。ステートマネージャーアクションを使用してステートを設定する を参照してください。

これらのチュートリアルのいずれかを完了して、ステートマネージャー (State Managers) の使用方法を学びましょう。

ステートマネージャーの作成

Kanzi アプリケーションでステートマネージャーを使用して、ノードの状態を制御します。

例えば、ステートマネージャーはトグルボタンの状態を定義できます。ステートマネージャーは、トグルボタンがオンとオフのときにどのように見えるかを設定します。

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

  1. Node Tree で Toggle Button 2D ノードを選択し、State Tools で Create State Manager をクリックします。

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

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

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

    例えば、1つの状態を On、もう1つを Off と名付けます。

    On ステートは、トグルボタンがオンになっているときのアプリケーションの状態を定義し、Off ステートは、トグルボタンがオフになっているときの状態を定義します。

    ステートを削除するには、ステートを右クリックして Delete を選択します。

    ../../_images/rename-states.png
  3. State Tools を使用して、トグルボタンのインジケーターがオンとオフの状態でどの位置にあるかを定義します。

    1. トグルボタンインジケーターを配置し、State Tools の image0 をクリックして、インジケーターの現在の位置をその On ステートに保存します。

      例えば、Preview では、インジケーターを配置するために Node tool を使用します。

      ../../_images/indicator-positioned.png ../../_images/add-indicator-to-on-state.png
    2. 前のステップを Off ステートに対して繰り返し、State Tools ではトグルボタンインジケーターの現在の位置をそのステートに保存します。

      ../../_images/indicatoroff-image.png ../../_images/add-indicator-to-off-state.png

コントローラープロパティを使用してステートを設定する

ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。

ステートマネージャーの各ステートグループは、異なるコントローラープロパティを使用できます。

カスタムプロパティタイプをステートグループのコントローラープロパティとして使用することもできます。チュートリアル: クラスターインジケーターを作成する を参照してください。

コントローラープロパティを使用するには:

  1. ステートマネージャーを作成し、そのステートマネージャーを使用するようにノードを設定します。ステートマネージャーの作成 を参照してください。

    例えば、2つの状態でトグルボタンの外観を設定するステートマネージャーを作成します。

  2. State Tools で <No Controller Property> ドロップダウンメニューをクリックし、プロパティを選択します。カスタムコントローラープロパティを作成するには、<No Controller Property> ドロップダウンメニューをクリックし、+ Create Property Type を選択します。

    例えば、Toggle Button > Toggle State プロパティを選択します。トグルボタンの状態を制御するステートマネージャーのコントローラープロパティとして Toggle State を設定すると、ステートマネージャーはそのプロパティの値に基づいて状態に遷移します。

    ../../_images/add-controller-property.png
  3. State Tools で、各ステートのコントローラープロパティの値を設定します。

    例:

    • On ステートの値を 1 に設定します。

    • Off ステートでは、値を 0 に設定したままにしてください。

    ../../_images/set-controller-property.png
  4. State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。

    ../../_images/deactivate-state-tools.png

Preview でトグルボタンをクリックすると、Toggle Button 2D ノードで作成したステートマネージャーで定義した On と Off の状態を切り替えます。

ステートマネージャーアクションを使用してステートを設定する

State Manager アクションを使用して、Kanzi アプリケーションを異なる状態に設定します。

ステートマネージャーで状態を設定するには、次のアクションを使用できます:

特定の状態にステートマネージャーを設定する

Go to State アクションを使用して、ステートマネージャーを特定の状態に設定します。

特定の状態にステートマネージャーを設定するには:

  1. 異なる状態で定義したい外観や動作のコンテンツを作成します。

    例えば、Factory Content から Car を使用します。

    Factory Content アセットを使用する を参照してください。

    ../../_images/factory-content-car-in-project.png ../../_images/factory-content-car-red.png
  2. ステートマネージャーを作成し、前のステップで作成したコンテンツの外観と動作を設定するステートを作成します。ステートマネージャーの作成 を参照してください。

    例えば、CameraRoot ノードに対して、Brakes、Roof、Suspension という名前の3つの状態を持つステートマネージャーを作成し、それぞれが異なる角度から車を表示します。Camera ノードを使用する を参照してください。

    ../../_images/factory-car-camera_root-node.png ../../_images/camera-root-states.png ../../_images/brakes-preview.png ../../_images/roof-preview.png ../../_images/suspension-preview.png
  3. ステートマネージャーを特定の状態に設定します:

    1. ステートマネージャーでアプリケーションを特定の状態に設定するために使用したいノードを作成または選択し、そのノードに状態を変更するために使用したいトリガーを追加します。

      例えば、Button ノードを作成し、Button: Click トリガーを追加します。トリガーの使用 を参照してください。

      ../../_images/brakes-button-in-project.png ../../_images/button-click-trigger.png ../../_images/brakes-button-and-car-in-preview.png
    2. Node Components > Triggers Alt を押しながら右クリック で、ステートマネージャーを特定の状態に設定するために使用したいトリガーを選択し、Dispatch Message Action > State Manager > Go to State を選択し、Go to State アクションセットで:

      • Target Item を、ステートマネージャーを使用して遷移したいステートのノードにします。

      • ノードを遷移させたいステートに State します。

      ../../_images/click-add-go-to-state-action.png ../../_images/go-to-state-settings.png
  4. この手順で以前に作成したすべてのステートに対して、前のステップを繰り返します。

    例えば、各ステートに対して Button ノードを作成し、各ボタンの Button: Click トリガーに Go to State アクションを追加します。

    ../../_images/roof-and-suspension-in-project.png ../../_images/roof-with-go-to-state-action.png ../../_images/suspension-with-go-to-state-action.png ../../_images/car-and-buttons-in-preview.png

作成したボタンのいずれかをクリックすると、アクションを実行するトリガーが発動し、アクションで設定したステートにステートマネージャーが移行するように指示します。

../../_images/go-to-state-action.gif

ステートマネージャーを次または前の状態に設定する

Next State と Previous State アクションを使用して、ステートグループ内の次または前の状態にステートマネージャーを設定します。ステートグループの使用 を参照してください。

ステートマネージャーを次または前の状態に設定するには:

  1. 異なる状態で定義したい外観や動作のコンテンツを作成します。

    例えば、Factory Content から Car を使用します。

    Factory Content アセットを使用する を参照してください。

    ../../_images/factory-content-car-in-project.png ../../_images/factory-content-car-red.png
  2. ステートマネージャーを作成し、前のステップで作成したコンテンツの外観と動作を設定するステートを作成します。ステートマネージャーの作成 を参照してください。

    例えば、CameraRoot ノードに対して、Brakes、Roof、Suspension という名前の3つの状態を持つステートマネージャーを作成し、それぞれが異なる角度から車を表示します。Camera ノードを使用する を参照してください。

    ../../_images/factory-car-camera_root-node.png ../../_images/camera-root-states.png ../../_images/brakes-preview.png ../../_images/roof-preview.png ../../_images/suspension-preview.png
  3. アプリケーションを次または前の状態に設定するために使用したいノードを作成または選択し、そのノードに状態を変更するために使用したいトリガーを追加します。

    例えば、Button ノードを作成し、Button: Click トリガーを追加します。トリガーの使用 を参照してください。

    ../../_images/next-button-in-project.png ../../_images/button-click-trigger.png
  4. 次または前の状態に変更するために使用したいトリガーに、Next State または Previous State アクションを追加して設定します。

    例えば、Node Components > Triggers Alt を押しながら右クリック の Button: Click トリガーで、Dispatch Message Action > State Manager > Next State を選択し、Next State アクションセットで:

    • ステートを変更したいステートマネージャーを持つノードに Target Item します。

    • 遷移したいステートを含むステートグループ State Group へ

    • (オプション) Loop State を有効にして、ステートマネージャーが最後の状態に達した後、最初の状態に戻るようにします。

    • (オプション) Immediate を無効にして、ステートマネージャーがステート間の遷移に使用するアニメーションを設定します。このプロパティを有効にすると、ステートマネージャーは遷移アニメーションを再生せずに、即座にステートを変更します。ステート遷移の使用 を参照してください。

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

ボタンをクリックすると、アクションを実行するトリガーが発動し、アクションで設定したステートにステートマネージャーが移行するよう指示します。

../../_images/next-state-action.gif

ノードがステートに入るまたは離れるときに反応する

ノードが状態間を遷移する際、Kanzi:

  1. ノードが離れるステートを解除し、そのステートのトリガーをデタッチします。

  2. StateManager::LeftStateMessage メッセージを送信します。

  3. ノードが入る状態を適用し、その状態のトリガーをアタッチします。

  4. StateManager::EnteredStateMessage メッセージを送信します。

../../_images/state-manager-triggers.svg

ノードがステートに入るときに反応するには、ノード内の Entered State メッセージトリガーまたはノードが入るステート内の On Attached トリガーを使用できます。ノードがステートを離れるときに反応するには、そのノード内の Left State メッセージトリガーを使用します。

ノードがステートに入るまたは離れるときに反応するには:

  1. Node Tree で、ステートの進入または退出に反応したいノードを選択し、Node Components > Triggers で次のいずれかを追加します。

    • Entered State メッセージトリガーは、ノードがステートに入るときに反応します。

    • Left State メッセージトリガーは、ノードがステートを離れるときに反応します。

    例:

    1. Node Tree で、State A と State B の2つの状態を持つステートマネージャーを使用する Text Block 3D ノードを選択します。

      ../../_images/text-block-3d-in-project.png
    2. Node Components Alt を押しながら右クリック Triggers で、Message Trigger > State Manager > Left State を選択します。

      Left State トリガーを使用して、Text Block 3D ノードが State A を離れるときに反応します。

      ../../_images/add-left-state-trigger.png
  2. Node Components > Triggers Alt を押しながら右クリック で、前のステップで追加したトリガーを選択し、アクションを選択します。

    例えば、Write Log アクションを選択し、トリガーが発動されたときに Log ウィンドウに書き込みたいメッセージを Log Text に設定します。Write Log アクションは、ノードが入力を受け取ったことを確認したい場合に便利です。

    Write Log アクションについて詳しく知るには、Write Log アクションを使用する を参照してください。

    ../../_images/left-state-trigger-add-write-log-action.png ../../_images/left-state-write-log-message.png
  3. 最初のステップで作成したトリガー内の Node Components > Triggers で、Conditions を右クリックし、Trigger Condition を選択して、そのトリガーに使用したい条件を設定します。メッセージからの値を使用して条件を作成する を参照してください。

    例えば、トリガー条件セット内の Left State トリガーの場合:

    • A

      • Type of A から Message argument へ

      • Message Argument から State へ

    • Operation から = へ

    • B

      • Type of B から Fixed へ

      • トリガーが反応するステートの名前に Fixed Value を設定します。

        たとえば、それを State A に設定します。

    ../../_images/left-state-trigger-add-condition.png ../../_images/left-state-trigger-condition.png

トリガー条件で指定したステートをノードが離れると、Kanzi は Log ウィンドウに Write Log アクションで入力したメッセージを出力します。

Log ウィンドウを開くには、メインメニューで Window > Log を選択します。

../../_images/log-window-left-state-message.png

ステートグループの使用

ステートグループは、ステートを含み、コントローラープロパティを定義し、ステートグループ内のステート間の遷移を定義します。ステートグループを使用して、アプリケーション内のステートと遷移をスムーズに制御します。例えば、ボタンのステートマネージャーは、ボタンが押された、ボタンがリリースされた、ボタンにホバーした、の3つのステートグループを含むことができます。各ステートグループ内でステートを作成し、ステートオブジェクトを使用して各ステートでボタンがどのように動作するかを定義します。

ステートグループを使用するには:

  1. State Tools で + Create State Group をクリックしてステートグループを作成し、作成したステートグループの名前を入力します。

  2. State Tools で、マウスポインターをステートグループの上に移動させ、このステートグループが記録するプロパティを設定します。異なるプロパティ値の変更を記録するために、異なるステートグループを設定します。すべてのプロパティを選択または選択解除するには、All を使用します。

    ステートグループを複製または削除するには、ステートグループにカーソルを合わせて、Duplicate または Remove を選択します。

    ../../_images/hover-over-state-group.png

APIでのステートマネージャーの使用

詳細については、StateManager クラスを参照してください。

関連項目

チュートリアル: ボタンを作成する

チュートリアル: トグルボタンの作成

チュートリアル: クラスターインジケーターを作成する

ステートマネージャー (State Manager)

ステート遷移の使用

Button ノードを使用する

Toggle Button ノードを使用する

プロパティシステム

プロパティタイプ (Property Types)

トリガーの使用