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

このチュートリアルでは、ボタンの作成方法を学びます。Kanzi を使用すると、トリガーとアクションだけでボタンを作成できます。しかし、堅牢なボタンを作成するには、Kanzi ステートマネージャーを使用し、Is Down プロパティを使用してボタンの状態を制御します。

2つのアプローチの違いは、ステートマネージャーを使用する場合、ボタンがどの状態にあるかを常に把握できることです。例えば、トリガーとアクションで作成されたボタンをユーザーがクリックすると、アクションはメッセージを送信しますが、アプリケーションはボタンの状態を認識していません。ステートマネージャーを使用すると、ボタンがどの状態にあるかを常に確認でき、必要に応じて状態を元に戻すこともできます。

このビデオはチュートリアルの結果を示しています。

このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。

チュートリアルを入手する¶

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Button チュートリアルの横にあるをクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

<KanziWorkspace>/Tutorials/Button/Start ディレクトリにあるチュートリアルの開始地点プロジェクト。
<KanziWorkspace>/Tutorials/Button/Completed ディレクトリにある完成したチュートリアル。

ボタンを作成する¶

ボタンを作成するには：

Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Button チュートリアルの横にある Open をクリックし、Start project を選択します。
Node Tree Alt を押しながら右クリックで Frame ノードを選択し、Button 2D を選択します。
Assets ウィンドウから Released 画像を Node Tree にドラッグし、Button 2D ノードにドロップして、F2 キーを押し、ノードの名前を ButtonImage に変更します。

ButtonImage ノードを使用して、ボタンの外観を設定します。
Node Tree で Button 2D ノードを選択し、Properties で追加して設定します。
- Horizontal Alignment から Center へ
- Vertical Alignment から Center へ

ボタンのステートを作成する¶

このセクションでは、ユーザーがボタンを押したり離したりしたときの外観を定義するために、ステートマネージャーを使用します。

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

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

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

Kanzi Studio はステートマネージャーを作成し、それを Button 2D ノードに割り当てます。
ボタンのステートを作成します。
1. State Tools で Create State をクリックしてステートを作成します。
  
  ステートの名前をダブルクリックし、新しい名前を入力してください。
  
  たとえば、ステート Pressed の名前を付けてください。
2. Node Tree で ButtonImage ノードを選択し、Properties で Image プロパティを Pressed に設定します。
3. State Tools でをクリックして、現在の値をその状態に保存します。
  
  ユーザーがボタンを押したときにその画像を表示するために、Image プロパティの現在の値を Pressed ステートに保存します。ステートにプロパティが保存されているノードを確認するには、そのステート上でにカーソルを合わせてください。
前のステップを繰り返して、ボタンが押されていないときの状態を定義します。

例えば、ステートに Released という名前を付け、ButtonImage ノードの Image プロパティを Released に設定します。
State Tools で <No Controller Property> をクリックし、Button > Is Down を選択します。

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

ここでは、Is Down プロパティを使用して、そのプロパティの値に基づいて状態に遷移します。

Is Down プロパティは、Button ノードが押された状態か非押された状態かを制御します。
State Tools で、Pressed 状態の Controller Property の値を True に設定します。これにより、ボタンが押されたときに Kanzi アプリケーションが Pressed 状態を使用し、ボタンが押されていないときに Released 状態を使用します。
State Tools で Transition Editor をクリックして State Transition Editor を開きます。
State Transition Editor は、そのステートグループ内のすべてのステート間で使用される遷移を示します。マウスポインタをに移動し、Duration を 0 ms に設定します。

ユーザーがボタンを押して離したときに外観が即座に変わるように、遷移の持続時間を0 msに設定します。

State Transition Editor を閉じます。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。

Preview でアプリケーションのステートマネージャーがどのように機能するか試したい場合は、State Tools の編集モードを終了する必要があります。

Preview でボタンをクリックしてマウスボタンを押し続けると、Pressed 状態に入ります。マウスボタンを離すと、Released 状態に入ります。