Toggle Button ノードを使用する¶
複数のトグル状態を持つことができるボタンを使ったインタラクティブな操作を作成するには、Toggle Button ノードを使用します。
2つの状態を持つトグルボタンの作成 と 2 つ以上の状態を持つトグルボタンの作成 を参照してください。
Toggle Button 3D を使用して3Dトグルボタンを作成し、Toggle Button 2D を使用して2Dトグルボタンを作成します。Toggle Button ノードを作成した後、そのノードにトグルボタンの視覚的表現を作成するためのノードを追加します。
Toggle Button を作成すると、Kanzi はデフォルトでそのノードに Toggle Button: トリガーを追加します。
Toggle Button: Toggled On
Toggle Button: Toggled Off
Toggle Button: State Toggled
トグルの変更に反応する を参照してください。
Toggle Button ノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。Toggle Button ノードにフォーカスがある場合、そのボタンを押すには、デフォルトのキーボードキー Space、Enter、および Enter をテンキーで使用できます。
フォーカスの使用 を参照してください。
例えば、トグルボタンのオンとオフの状態の違いを示すには、次のことができます。
トグルボタンのビジュアル表現のマテリアルまたは色を切り替えます。
トグルボタンの2つの異なるビジュアル表現をアタッチし、それらの可視性を切り替えます。
トグルボタンの2つの異なるビジュアル表現をアタッチし、それらの Blend Intensity プロパティ値をアニメーション化することで、2つの間を遷移します。
トグルボタンの作成方法を学ぶには、トグルボタンチュートリアルを完了してください。チュートリアル: トグルボタンの作成 を参照してください。
2つの状態を持つトグルボタンの作成¶
2つの状態を持つトグルボタンを作成するには、
Node Tree Alt を押しながら右クリック でトグルボタンを作成したいノードを選択し、Toggle Button 3D または Toggle Button 2D のいずれかを選択します。
3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Node Tree で Toggle Button ノードを選択し、State Tools で Create State Manager をクリックして、Toggle Button ノードにステートマネージャーを作成します。
State Tools で、Create State を2回クリックして2つのステートを作成します。各ステートの名前をダブルクリックして、ステートの名前を変更します。
例えば、1つの状態を On、もう1つを Off と名付けます。
On ステートは、トグルボタンがオンになっているときのアプリケーションの状態を定義し、Off ステートは、トグルボタンがオフになっているときの状態を定義します。
Node Tree で Toggle Button ノードの視覚的な形状を作成し、On 状態のときの外観を設定します。
例えば、Toggle Button 2D ノードを作成した場合、そのノードにトグルボタンがオンとオフになったときに表示されるインジケーターを表す Image ノードを追加します。
インジケーターを Preview に配置し、State Tools で On 状態の上にある
をクリックして、現在の外観をその状態に保存します。
前の2つのステップを繰り返して、トグルボタンの Off ステートを作成します。
State Tools で、<No Controller Property> ドロップダウンメニューをクリックし、Toggle Button > Toggle State プロパティを選択します。
ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。
State Tools で、各ステートのコントローラープロパティの値を設定します。
On ステートの値を 1 に設定します。
Off ステートでは、値を 0 に設定したままにしてください。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
Preview でトグルボタンのビジュアル表現をクリックすると、作成した状態間をトグルし、トグルボタンの外観が変わります。
2 つ以上の状態を持つトグルボタンの作成¶
2 つ以上の状態を持つトグルボタンを作成するには:
Node Tree Alt を押しながら右クリック でトグルボタンを作成したいノードを選択し、Toggle Button 3D または Toggle Button 2D のいずれかを選択します。
3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Node Tree で Toggle Button ノードを選択し、Properties で Toggle State Count プロパティを追加して、トグルボタンに持たせたいトグル状態の数を設定します。
例えば、3つの状態を持つトグルボタンを作成するには、Toggle State Count プロパティを 3 に設定します。
Node Tree で Toggle Button ノードを選択し、State Tools で Create State Manager をクリックして、Toggle Button ノードにステートマネージャーを作成します。
State Tools で、ステートを作成するために
を好きなだけクリックし、各ステートの名前をダブルクリックして、ステートの名前を変更します。例えば、3つの状態を持つトグルボタンを作成する場合、最初の状態を First、2番目の状態を Second、3番目の状態を Third と名付けます。各状態は、トグルボタンがその状態にあるときのアプリケーションの状態を定義します。
Node Tree で Toggle Button ノードのビジュアルシェイプを作成し、最初のステートにあるときの外観を設定します。
例えば、3Dトグルボタンを作成した場合、Text Block 3D を追加し、Text プロパティを First に設定します。
State Tools で、First ステートの上にある
をクリックして、現在の外観をそのステートに保存します。
トグルボタンにステートがあるだけ、前の2つのステップを繰り返します。各ステートに対して、Text プロパティに異なる値を設定し、その値を異なるステートに保存します。
State Tools で、<No Controller Property> ドロップダウンメニューをクリックし、Toggle Button > Toggle State プロパティを選択します。
ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。
State Tools で、各ステートのコントローラープロパティの値を設定します。
例えば、3つの状態を持つトグルボタンの場合、最初の状態の値を 0 に、2番目の状態の値を 1 に、3番目の状態の値を 2 に設定します。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
Preview でトグルボタンのビジュアル表現をクリックすると、作成した状態間をトグルし、トグルボタンの外観が変わります。
トグルの変更に反応する¶
Toggle Button トリガーを使用して、ユーザーがトグルボタンを切り替えたときに反応することができます。トリガーの使用方法について詳しくは、トリガーの使用 を参照してください。
Toggle Button ノードを作成すると、Kanzi はデフォルトで次のトリガーをそのノードに追加します。
ネーム (Name) |
ディスクリプション (Description) |
|---|---|
State Toggled |
State Toggled トリガーは、Toggle Button ノードのトグル状態が変化したときに発動します。 |
Toggled Off |
Toggled Off トリガーは、2つの状態を持つ Toggle Button ノードがオフに切り替えられたときに発動します。 |
Toggled On |
Toggled On トリガーは、2つの状態を持つ Toggle Button ノードがオンに切り替えられたときに作動します。 |
トグルの変更に反応するには：
Prefabs または Node Tree で、反応したいトグルの Toggle Button ノードを選択します。
例えば、2つの状態を持つトグルボタンを作成し、そのトグルボタンを選択します。2つの状態を持つトグルボタンの作成 を参照してください。
Node Components > Triggers Alt を押しながら右クリック で Toggle Button トリガーを使用して、設定したいアクションを選択し、そのアクションを構成します。
例えば、Toggle Button: Toggled On トリガーで Write Log アクションを作成し、ユーザーがトグルボタンをオンにしたときに Log ウィンドウに書き込みたいメッセージを Log Text に設定します。
Write Log アクションについて詳しく知るには、Write Log アクションを使用する を参照してください。
バインディングを使用してトグル状態を更新する¶
バインディングを使用して Toggle Button ノードのトグル状態を更新するには、to-sourceまたは双方向バインディングを使用します。トグルボタンを切り替えると、そのトグルボタンは内部的に Toggle State プロパティを対象とする一方向バインディングを上書きします。バインディング (Bindings) を参照してください。
例えば、トグルの状態を更新するためにto-sourceバインディングを使用するには：
バインディングでトグル状態を更新したい Toggle Button ノードを作成します。
例：
Node Tree で、Stack Layout 2D ノードを作成します。
Asset Packages > Factory Content から、Toggle Button を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。ファクトリーコンテンツ (Factory Content) のアセット を参照してください。
Toggle Button ノードのトグル状態をバインドしたいコントロールを作成します。
例：
Asset Packages > Factory Content から、Slider を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。Properties で、スライダーの最小値と最大値を追加して設定します。Factory Content のスライダーを使用して を参照してください。
（オプション） Stack Layout 2D ノード内に、スライダーの値を表示する Text Block 2D ノードを作成します。
Toggle Button ノードを選択します。Properties で + Add Binding をクリックし、Binding Editor で設定します。
Binding Mode から To source へ
Push Target から . へ
Property から Toggle Button > Toggle State
Expression を、トグル状態に設定したい値を返す式にします。
たとえば、データ型として四元数を使用する
{@../Slider/RangeConcept.Value} == 0 ? 0 : 1このバインディングは、条件演算子を使用して Toggle Button を切り替えます。
Slider の値がゼロのときオフ。
Slider の値がゼロでない場合にオン。
？（条件付き） を参照してください。
Preview にいるとき、次のことを行います。
スライダーをゼロより大きい値に調整すると、Kanzi がトグルボタンで切り替わります。
スライダーをゼロに調整すると、Kanzi がトグルボタンをオフにします。
トグルボタンを切り替えても、スライダーはその値を保持します。
これにより、ユーザーは設定の値を調整し、設定を迅速に有効化および無効化することができます。例えば、音量コントロールを作成することができます。
Toggle Button ノードでダブルクリックジェスチャーを有効にする¶
Kanzi アプリケーションでユーザーがトグルボタンをダブルクリックまたはダブルタップできるようにするには、ダブルクリックジェスチャーを使用します。ダブルクリックジェスチャーに反応するには、Multi-Click トリガーを使用します。たとえば、ユーザーがそのノードをダブルクリックまたはダブルタップしたときに、Toggle Button ノードの外観を変更することができます。
Toggle Button ノードでダブルクリックジェスチャーを有効にするには、
Node Tree または Prefabs で、ダブルクリックジェスチャーを有効にしたい Toggle Button ノードを選択し、Properties で Input > Double-Click Enabled プロパティを追加して有効にします。
Double-Click Enabled プロパティを有効にすると、Kanzi は Toggle Button ノードにダブルクリックメッセージを生成するマルチクリックマニピュレータをインストールします。
Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Multi-Click > Multi-Click を選択します。
Node Components > Triggers Alt を押しながら右クリック の Multi-Click トリガーで、アクションを選択し、アクションを構成します。トリガーの使用 と アクションとメッセージのリファレンス を参照してください。
Toggle Button 2D ノードの外観を設定する¶
2D ノードの外観を設定するには:
2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整 を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクト を参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成する を参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用する を参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリング を参照してください。
