Trajectory List Box 3D ノードを使用する¶
3D空間で軌跡に沿って配置されたスクロール可能なアイテムのリストを作成するには、Trajectory List Box 3D ノードを使用します。
Kanzi Studio には、いくつかの種類のトラジェクトリがあります。異なる種類のトラジェクトリが必要な場合は、サードパーティツールでスプライントラジェクトリを作成し、それを Kanzi Studio プロジェクトにインポートしてください。トラジェクトリ (Trajectories) を参照してください。
Trajectory List Box 3D ノード内のアイテムは、Trajectory List Box 3D ノードに追加した順序で表示されます。Trajectory List Box 3D ノード内のアイテムを選択するには、そのアイテムをクリックまたはタップします。
トラジェクトリのサイズは、クリックおよびドラッグジェスチャーのインタラクティブエリアを定義します。トラジェクトリが小さすぎると、ユーザーは Trajectory List Box 3D ノード内のアイテムを選択できません。これを避けるために、トラジェクトリが十分に大きいことを確認してください。トラジェクトリ (Trajectories) を参照してください。
Kanzi Studio で作成する Trajectory List Box 3D ノードは、デフォルトでフォーカススコープとなり、キーのフォーカスとキー入力を処理します。List Box ノードでのキー入力フォーカスの処理 を参照してください。
注釈
すべてのリストボックスノード（Grid List Box ノードおよび Trajectory List Box 3D ノード）のアイテムは、その子ノードではありませんが、Kanzi Studio ではリストボックスにアイテムを追加するときにそのように見えます。リストボックスアイテムはリストボックスの子ノードではないため、パスやエイリアスを使用してリストボックスの外部からこれらのアイテムを参照することはできません。リストボックスアイテムからリストボックスの外部のオブジェクトを参照する必要がある場合は、バインディングとエイリアスを使用してください。Grid List Box ノードの外部のプロパティにバインドする および Trajectory List Box 3D ノードから Page ノードへのナビゲーション を参照してください。
Trajectory List Box 3D ノードは、Trajectory Layout 3D ノードのインタラクティブバージョンです。Trajectory Layout ノードを使用する を参照してください。
Trajectory List Box 3D ノードを使用してインタラクティブなスクロール可能なアイテムリストを作成する方法の例については、トラジェクトリリストボックスの例 (Trajectory list box example) を参照してください。
Trajectory List Box 3D ノードの作成¶
Trajectory List Box 3D ノードを作成するには、
Node Tree で、Trajectory List Box 3D ノードを作成したい3Dノードの Alt を押しながら右クリック を選択し、Trajectory List Box 3D を選択します。
例えば、Scene ノードに Trajectory List Box 3D ノードを作成します。
ヒント
トラジェクトリを表示するには、Preview で
をクリックして Analyze モードに入り、
を右クリックして Debug objects を選択します。
Node Tree で、アイテムを Trajectory List Box 3D ノードに追加します。
データソースを使用して、アイテムを List Box ノードに追加します。データソースを使用する を参照してください。
例えば、アルバムリストを作成するには、リスト内のアルバムを表す複数のノードを追加します。List Box Item Container プレハブを使用する を参照してください。
アイテムを追加すると、Trajectory List Box 3D ノードは、Trajectory List Box 3D ノードが使用する軌道に沿ってそれらを配置します。
Trajectory List Box 3D ノードのアイテムを閲覧するには、Preview で、Trajectory List Box 3D ノードのアイテムをクリックしてドラッグします。
（オプション）
Kanzi Studio はデフォルトで円のトラジェクトリを作成して使用します。角度、弧、円、楕円、直線、長方形、スパイラル、スプライン、または台形のトラジェクトリを使用できます。トラジェクトリ (Trajectories) を参照してください。
Trajectory List Box 3D ノードのメカニクスを微調整する¶
Trajectory List Box 3D ノードのメカニクスを微調整することができます。リストボックスを次のように設定できます。
選択したアイテムをリストボックスの中央に持ってくる。
ユーザーがアイテムをクリックしたときに、そのアイテムをリストボックスオブジェクトの中央に持ってくるようにリストボックスを設定するには、Selection Behavior プロパティを Bring Center に設定します。リストボックス内のアイテムを選択したときの移動方向を設定するには、Cursor Offset プロパティを使用します。リストボックス内のアイテムを選択したときの移動方向を設定するには、Cursor Offset プロパティを使用します。
最後のアイテムに到達した後、最初からアイテムを表示します。
最後のアイテムに到達した後に Trajectory List Box 3D のアイテムを最初から表示し始めるには、Looping プロパティを有効にします。
リストボックス内のアイテムをスクロールするには、x軸またはy軸のいずれかを使用します。
スクロール軸を設定するには、Allowed Scroll Axis プロパティを設定します。
例えば、リストボックスを設定してユーザーがアイテムを閲覧するためにy軸に沿ってスクロールできるようにするには、Allowed Scroll Axis プロパティを Y axis に設定します。
スクロール方向を逆にします。
ユーザーが項目をクリックしてドラッグしたときにリストボックスのスクロール方向を逆にするには、Reversed Scrolling プロパティを追加して有効にしてください。
アイテムの外観をトラジェクトリ上の位置に基づいて変更します。
トラジェクトリ上の異なるポイントでアイテムの外観を設定するには、Item Area Begin プロパティと Item Area End プロパティを使用します。Item Area Begin プロパティと Item Area End プロパティを使用して Visible Amount In Parent プロパティの値を設定し、リストボックス内のオブジェクトの位置に基づいてアイテムの外観を変更するシェーダーを設定します。
例えば、Visible Amount In Parent プロパティを使用してアイテムの可視性を徐々に変更する場合、Item Area Begin プロパティを大きな値に設定し、Item Area End プロパティを小さな値に設定します。こうすることで、そのアイテムが表示される領域を制限します。
Trajectory List Box 3D ノードのネスト¶
Trajectory List Box 3D ノードをネストして、Trajectory List Box 3D ノード内に Trajectory List Box 3D ノードを作成することができ、それぞれを独立してスクロールできます。例えば、アルバムのセットを含む Trajectory Layout 3D ノードを円軌道でスクロールするために使用する Trajectory List Box 3D を作成することができます。
Trajectory List Box 3D ノードでは、Allowed Scroll Axis プロパティを使用して、ユーザーがリストをスクロールできる軸を設定します。
Trajectory List Box 3D ノードをネストするには：
Trajectory List Box 3D ノードを作成します。Trajectory List Box 3D ノードの作成 を参照してください。
例えば、円形のトラジェクトリを使用して、円の形のパスを作成します。サークルトラジェクトリ (circle trajectories) を使用する場合 を参照してください。
前のステップで作成した Trajectory List Box 3D ノードを選択します。Properties で、Allowed Scroll Axis プロパティを、そのノードをスクロールさせたい軸に設定します。
例えば、Trajectory List Box 3D ノードを x 軸でスクロールするように設定するには、Allowed Scroll Axis プロパティを X axis に設定します。
前のステップで作成した Trajectory List Box 3D ノードにネストしたい Trajectory List Box 3D ノードを作成します。
例えば、複数の入れ子になった Trajectory List Box 3D ノードをアルバムとして作成したい場合：
Prefabs で、Trajectory List Box 3D ノードを作成します。
Trajectory List Box 3D ノードは、デフォルトでアイテムを円軌跡に沿って配置します。
Properties で、Allowed Scroll Axis プロパティを X axis に設定します。
Node Tree で、アイテムを Trajectory List Box 3D ノードに追加します。
例えば、Prefabs から、アルバムリストを表す複数の Trajectory List Box 3D プレハブをドラッグします。各ネストされた Trajectory List Box 3D ノードに、各リスト内のアルバムを表すアイテムを追加します。
データソースを使用して Trajectory List Box 3D にアイテムを追加できます。データソースを使用する を参照してください。
Trajectory List Box 3D ノードの外部プロパティへのバインディング¶
リストボックスのアイテムのプロパティをリストボックスの外にあるノードのプロパティにバインドしたい場合は、エイリアスを使用します。
例えば、Grid List Box 3D または Trajectory List Box 3D ノードに Text Block 3D ノードアイテムがあり、Text Block 3D ノードの Text プロパティ値をリストボックスにない Empty Node 3D ノードプロパティの値に設定したい場合は、
Node Tree Alt を押しながら右クリック で、バインドしたいプロパティを含むノードを選択し、Alias を選択します。エイリアスの使用 を参照してください。
例えば、Empty Node 3D ノードのエイリアスを作成します。
Dictionaries で作成したエイリアスが、リストボックスノードがアクセスできるリソースディクショナリにあることを確認してください。
例えば、すべてのエイリアスを Screen ノードのリソースディクショナリに配置するか、リストボックスノードにリソースディクショナリを作成し、そのリソースディクショナリにエイリアスを配置します。リソースディクショナリの使用 を参照してください。
バインディングを作成します:
Node Tree で、リストボックスノードの外部にバインドしたいノードを、リストボックスノード内から選択します。
Properties で + Add Binding をクリックし、エイリアスを使用してバインディングを作成し、リストボックスノードの外にあるノードのプロパティにバインドします。
例えば、Text Block 3D ノードで、最初のステップで作成したエイリアスを使用して Empty Node 3D ノードへのバインディングを作成します。バインディング式リファレンス を参照してください。
たとえば、このバインディング式を使用します:
{#Empty Node 3D/TextConcept.Text}Text Block 3D ノードの Text プロパティは、Empty Node 3D ノードの Text プロパティの値を取得します。
Save をクリックします。
Trajectory List Box 3D ノードから Page ノードへのナビゲーション¶
リストボックスノード内にあるノードから Page ノードに移動したい場合は、エイリアスを使用します。例えば、Grid List Box ノードや Trajectory List Box 3D ノードを使用してアドレス帳を作成し、アドレス帳エントリの内容を Page ノードに表示したい場合です。
リストボックスノードから Page ノードに移動するには：
Node Tree Alt を押しながら右クリック で、ナビゲートして Alias を選択したい各 Page ノードを選択します。Kanzi Studio は、作成元のノードを指すエイリアスを作成し、そのエイリアスを最も近いリソース辞書に配置します。
Dictionaries で作成したエイリアスが、リストボックスノードがアクセスできるリソースディクショナリにあることを確認してください。
例えば、すべてのエイリアスを Screen ノードのリソースディクショナリに配置するか、リストボックスノードにリソースディクショナリを作成し、そのリソースディクショナリにエイリアスを配置します。リソースディクショナリの使用 を参照してください。
Navigate to Page アクションを追加して設定します。
リストボックスノードの Node Tree で、最初のステップでエイリアスを作成した Page ノードの1つにナビゲートするために使用したいトリガーを含むノードを選択します。
Node Components > Triggers Alt を押しながら右クリック で、Page ノードに移動するために使用したいトリガーを選択し、Navigate to Page アクションを作成します。
Navigate to Page アクションで、Target Item プロパティを移動したい Page ノードのエイリアスに設定します。
すべてのエイリアスは # 記号で始まります。
Preview で、Navigate to Page アクションを含むノードをクリックすると、アクションで選択された Page ノードがアクティブになります。
ユーザーが Trajectory List Box 3D ノードと対話したときの反応¶
List Box トリガーを使用して、ユーザーが Trajectory List Box 3D ノードと対話したときに反応します。たとえば、ユーザーがそのリストボックスをスクロールしたときに Trajectory List Box 3D の外観を設定できます。
これらの List Box トリガーを Trajectory List Box 3D ノードで使用できます。
ネーム (Name) |
ディスクリプション (Description) |
|---|---|
List Box: Item Hidden |
List Box: Item Hidden トリガーは、リストボックスノード内のアイテムが作業メモリからアンロードされたときに発動されます。 作業メモリに一度にロードしておきたいアイテムの数を設定するには、Keep Alive Item Count プロパティを使用します。 |
List Box: Item Selected |
List Box: Item Selected トリガーは、ユーザーがリストボックス内のアイテムを選択したときに発動します。 |
List Box: Item Visible |
List Box: Item Visible トリガーは、リストボックス内のアイテムが作成され、作業メモリにロードされたときに発生します。 作業メモリに一度にロードしておきたいアイテムの数を設定するには、Keep Alive Item Count プロパティを使用します。 |
List Box: Scroll Finished |
List Box: Scroll Finished トリガーは、リストボックスのスクロールが終了したときに発動されます。 |
List Box: Scroll Started |
List Box: Scroll Started トリガーは、リストボックスのスクロールが開始されると発動します。 |
List Box: Scrolled |
List Box: Scrolled トリガーは、リストボックスがスクロールするたびに設定されます。 |
List Box: Target Changed |
List Box: Target Changed トリガーは、リストボックスのスクロールターゲットが変更されたときに発動します。 例えば、ユーザーがリストボックスアイテムを選択するとスクロールターゲットが変わり、リストボックスがそのアイテムをリストボックスエリアの中央に持ってくるようにスクロールします。 |
List Box: User Scroll Finished |
List Box: User Scroll Finished トリガーは、ユーザーがリストボックスのスクロールを停止したときに発動します。 |
List Box: User Scroll Started |
List Box: User Scroll Started トリガーは、ユーザーがリストボックスのスクロールを開始したときに発動されます。 |
List Box トリガーを Trajectory List Box 3D ノードで使用するには：
Trajectory List Box 3D ノードを作成し、アイテムを追加します。Trajectory List Box 3D ノードの作成 を参照してください。
List Box トリガーで設定したい動作を定義します。
例えば、List Box: Scroll Started と List Box: Scroll Finished トリガーが発動したときに Trajectory List Box 3D ノードの外観を設定する状態を定義するステートマネージャーを作成します。ステートマネージャーの作成 を参照してください。
List Box トリガーを追加して設定します。
Node Tree で、トリガーを追加したい List Box ノードを選択します。Node Components > Triggers で、List Box トリガーのいずれかを作成します。
例えば、Node Tree で、この手順の最初に作成した Trajectory List Box 3D ノードを選択します。Node Components で、Alt を押しながら右クリック Triggers を行い、Message Trigger > List Box > Scroll Started を選択します。
Node Components の Alt を押しながら右クリック で、前のステップで作成したトリガーを選択し、アクションを選択して設定します。
例えば、State Manager: Go to State アクションを選択します。アクション内で、State プロパティを、List Box: Scroll Started トリガーがオフになったときに Trajectory List Box 3D ノードの外観を設定する状態に設定します。
前の手順を繰り返して、さらに多くの List Box トリガーを追加および構成します。
例えば、List Box: Scroll Finished トリガーを追加します。このトリガーの State Manager: Go to State アクションで、State をそのトリガーが発動されたときにノードの外観を設定する状態に設定します。
Preview で、作成した Trajectory List Box 3D ノードをスクロールすると、追加したトリガーが発動します。
Trajectory List Box 3D ノードが使用中かどうかを制御する¶
Trajectory List Box 3D ノードが使用中かどうかを制御するには、Input > Enabled プロパティを使用します。無効化された Trajectory List Box 3D ノードはユーザー入力に反応しません。Trajectory List Box 3D ノードを無効化すると、Kanzi は進行中のジェスチャーを停止し、その Trajectory List Box 3D ノードの選択されたアイテムとスクロール位置を保持します。
ノードの Enabled プロパティを無効にすると、そのノードとその子孫ノードが同じオーバーレイフォーカススコープ内で実質的に無効になります。
ノードが効果的に有効になっているかどうかを確認するには、ステートマネージャーまたはバインディングで Input > Effectively Enabled プロパティを使用します。たとえば、ノードが使用中であるかどうかをユーザーに視覚的に示すために、ステートマネージャーを作成し、そのコントローラープロパティとして Effectively Enabled プロパティを使用します。
ノードが入力にどのように反応するかを制御する を参照してください。
Trajectory List Box アイテムのダブルクリックジェスチャーを有効にする¶
List Box ノードにダブルクリックジェスチャをサポートするアイテムを追加する場合、List Box Item Container プレハブでそれらのアイテムに対してダブルクリックジェスチャを有効にする必要があります。
ノードに対してダブルクリックジェスチャーを有効にする方法を学ぶには、ノードにマルチクリックジェスチャーを有効にする を参照してください。
List Box アイテムにダブルクリックジェスチャーを有効にするには：
List Box Item Container プレハブを作成し、それを List Box ノードの Item Container Template として設定します。List Box Item Container プレハブの作成 を参照してください。
Prefabs で、List Box Item Container プレハブを選択します。Properties で、Input > Double-Click Enabled プロパティを追加して有効にします。
Double-Click Enabled プロパティを有効にすると、Kanzi は List Box Item Container プレハブにダブルクリックメッセージを生成するマルチクリックマニピュレータをインストールします。
トラジェクトリリストボックスの例 (Trajectory list box example)¶
この例は、Trajectory List Box 3D ノードを使用して、インタラクティブなスクロール可能なアイテムのリストを作成する方法を示しています。この例では、アニメーションを使用した選択効果を持つシンプルな写真ギャラリーを実装しています。
Trajectory List Box 3D ノード、その Circle Trajectory、Trajectory List Box 3D に表示されるコンテンツ、および中央の写真を強調するアニメーションは、Kanzi Studio で作成されます。ハイライトアニメーションが開始される時点は、トラジェクトリリストボックスコンポーネントが生成するユーザー入力イベントから得られるスクロール速度とフォーカスされたアイテムデータに基づいて定義されます。
例の Trajectory List Box 3D ノードは、次の機能を使用しています。
Looping。Trajectory List Box 3D ノード内のアイテムを、定義されたトラジェクトリの開始点と終了点にクランプするか、Looping プロパティを使用して開始位置と終了位置の間を遷移させることができます。この例のように。
Trajectory。Trajectory List Box 3D にトラジェクトリを使用するには、Library > Trajectories で作成する必要があります。Kanzi Studio で円形および直線のトラジェクトリを作成できます。スプライントラジェクトリを使用するには、サードパーティツールでスプラインを作成し、インポートして、スプラインを Spline Trajectory として追加します。サークルトラジェクトリ (circle trajectories) を使用する場合、ラインのトラジェクトリを使用する、および スプライントラジェクトリ (spline trajectories) の使用 を参照してください。Item Area Begin、Item Area End、Cursor Offset、および Override Distance などのトラジェクトリプロパティを追加および設定することで、トラジェクトリをカスタマイズできます。
選択とターゲットの動作。選択とターゲットのイベントは別々に処理されます。ターゲットが変更されたメッセージは、ユーザーがポインタを離した瞬間に生成されます。これには、現在のトラジェクトリの動きで中央に持ってこられたアイテムに関する情報が含まれています。選択メッセージは、ユーザーがアイテムをクリックまたはタップして選択したときに生成されます。Kanzi Studio で Bring Center の選択動作を選択できます。Trajectory List Box 3D の任意のメンバー、またはトラジェクトリリストボックスコンポーネント自体のターゲットおよび選択イベントに対して、List Box: Target Changed または List Box: Item Selected トリガーの呼び出しアクションを設定することで、さらに多くのアクションを定義できます。
例の入手¶
この例を入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Trajectory_list_box の例の横にある 
をクリックします。
Kanzi Studio は、この例を <KanziWorkspace>/Examples/Trajectory_list_box ディレクトリにダウンロードします。
APIで Trajectory List Box 3D ノードを使用する¶
Trajectory List Box 3D ノードを作成するには、
// Create a Trajectory List Box 3D named MyListBox.
TrajectoryListBox3DSharedPtr trajectoryListBox = TrajectoryListBox3D::create(domain, "MyListBox");
Trajectory List Box 3D ノードが使用するトラジェクトリを設定するには、
// Create a circle trajectory named Circle with radius of 4 device independent units.
TrajectorySharedPtr trajectory = Trajectory::createCircle(Vector3(), Vector3::positiveY(), 0.0f, 4.0f, domain, "Circle");
// Set the list box to use the trajectory.
trajectoryListBox->setTrajectory(trajectory);
// Increase the layout size to cover the whole trajectory.
trajectoryListBox->setWidth(10.0f);
trajectoryListBox->setDepth(10.0f);
trajectoryListBox->setHeight(3.0f);
Trajectory List Box 3D ノードにアイテムを追加するには、
// Create cube meshes and add them as items of the Trajectory List Box 3D node.
// Items on the trajectory appear in the order that you add them to the Trajectory List Box 3D node.
Model3DSharedPtr item1 = Model3D::createCube(domain, "item1", 1.0f, ThemeRed);
Model3DSharedPtr item2 = Model3D::createCube(domain, "item2", 1.0f, ThemeGreen);
Model3DSharedPtr item3 = Model3D::createCube(domain, "item3", 1.0f, ThemeBlue);
Model3DSharedPtr item4 = Model3D::createCube(domain, "item4", 1.0f, ThemeOrange);
Model3DSharedPtr item5 = Model3D::createCube(domain, "item5", 1.0f, ThemeYellow);
trajectoryListBox->addItem(item1);
trajectoryListBox->addItem(item2);
trajectoryListBox->addItem(item3);
trajectoryListBox->addItem(item4);
trajectoryListBox->addItem(item5);
Trajectory List Box 3D ノードのアイテムをループさせるには：
// Make the Trajectory List Box 3D node to loop. All items fit to the trajectory so that they are positioned evenly.
trajectoryListBox->setLooping(true);
Trajectory List Box 3D ノードがアイテムの選択にどのように反応するかを設定するには、
// Make clicking items bring them to the center of the trajectory.
trajectoryListBox->setSelectionBehavior(ListBoxConcept::SelectionBehaviorBringToCenter);
// Change the position where the clicked items are brought to be one quarter from the beginning of the trajectory.
trajectoryListBox->setCursorOffset(0.25f);
詳細については、TrajectoryListBox3D クラスを参照してください。
Trajectory List Box 3D プロパティタイプ¶
Trajectory List Box 3D ノードで利用可能なプロパティタイプのリストについては、Trajectory List Box 3D を参照してください。
関連項目¶
アークトラジェクトリ (Arc Trajectory) を使用する
サークルトラジェクトリ (circle trajectories) を使用する場合
楕円トラジェクトリ (ellipse trajectories) を使用する
レクタングルトラジェクトリ (Rectangle Trajectory) を使用する場合
スプライントラジェクトリ (spline trajectories) の使用
トラペゾイドトラジェクトリ (Trapezoid Trajectory) を使用する