ステップ 5 - Media スクリーンのコンテンツを作成する¶

このステップでは、リストボックスにアルバムのリストを表示する Media スクリーンのコンテンツを作成します。まずアルバムアイテム用のプレハブテンプレートを作成し、次にユーザーがアルバムアイテムをブラウズできるように Trajectory List Box 3D ノードを作成します。

Media スクリーンのアイテム用のプレハブを作成する¶

このセクションでは、Media スクリーンに表示されるアイテムのテンプレートを定義するプレハブを作成します。

Media スクリーンのアイテム用のプレハブを作成するには、以下のようにします。

Prefabs で Plane プレハブを作成し、Item という名前を付けます。Properties で、Height プロパティを 5 に設定します。
Prefabs で Item プレハブをダブルクリックして専用の Preview タブで開きます。Item プレハブに以下のノードを作成します。
- Plane を Album と名付けます。
- Text Block 3D と名付けて Description にします。
- Plane と名付けて Shadow にします。
Prefabs で、Item > Album ノードを選択します。Properties で、以下のプロパティを追加して設定します。
- Mesh Material から VertexPhongTexturedMaterial へ
- Width と Height を 3.5 に
- Material > Texture を追加し、をクリック
  
  これで、プレハブの各インスタンスに異なるテクスチャを表示できるようになります。
- Render Transformation プロパティ:
  - Translation Y プロパティフィールドを 0.5 に
  - Translation Z プロパティフィールドを 0.1 に
Prefabs で、Item > Shadow ノードを選択します。Properties で、以下のプロパティを追加して設定します。
- Mesh Material から TexturedMaterial へ
- Height を 1 に
- Render Transformation プロパティの Translation Y プロパティフィールドを -3.5 に
- Material > Texture プロパティを ShadowMedia に設定
- Material > Blend Mode を Alpha: Automatic に設定
- Material > Blend Intensity を 0.7 に設定
Prefabs で Item > Description ノードを選択します。Properties で追加して設定します。
- Font Color プロパティ Lightness (L) プロパティフィールドを 0 に設定
- Font Size から30まで
- Text プロパティのをクリックします
  
  これにより、プレハブの各インスタンスに異なるテキストを表示できます。
- Render Transformation プロパティ:
  - Translation Y プロパティフィールドを -1.9 に設定
  - Translation Z プロパティフィールドを 0.1 に

メディアコンテンツをスクロールする操作を作成する¶

このセクションでは、ユーザーがメディアコンテンツをスクロールできるようにする Trajectory List Box 3D ノードを作成します。

メディアコンテンツをスクロールする操作を作成するには:

Prefabs で Media プレハブをダブルクリックして、専用の Preview タブで開きます。
Node Tree > Media で、Viewport 2D ノード、Scene ノード、Trajectory List Box 3D ノードを作成します。

3D空間で軌跡に沿って配置されたスクロール可能なアイテムのリストを作成するには、Trajectory List Box 3D ノードを使用します。

Kanzi Studio はデフォルトで円のトラジェクトリを作成して使用します。角度、弧、円、楕円、直線、長方形、スパイラル、スプライン、または台形のトラジェクトリを使用できます。トラジェクトリ (Trajectories) を参照してください。
Prefabs から Item プレハブを Trajectory List Box 3D ノードに複数回ドラッグします。

このチュートリアルやプロトタイプの作成時には、Kanzi Studio でアイテムをインスタンス化することで、Trajectory List Box 3D ノードに手動でアイテムを追加できます。アプリケーションの実行中に List Box ノード内のアイテム数が変化する場合は、Kanzi Engine API またはデータソースを使用して List Box ノードにアイテムを追加します。
Node Tree で Trajectory List Box 3D ノードを選択し、Preview で Node tool を使用して、Trajectory List Box 3D ノードを回転させ、Media ノードの中央に配置します。
シーンのライティングを調整します。
1. Node Tree で Media > Viewport 2D > Scene > Directional Light ノードを選択します。Properties で、Layout Transformation プロパティの Rotation X および Rotation Y プロパティフィールドを 0 に設定します。
2. Node Tree の Scene ノード内に Point Light ノードを作成します。Preview で Node tool を使用して、Point Light を Trajectory List Box 3D の最前面のアイテムの前に移動します。
3. Properties で、Point Light Color プロパティの Intensity (I) プロパティフィールドを +3 に設定します。
Node Tree の Trajectory List Box 3D ノード内で、Item プレハブの各インスタンスを選択します。Properties で追加して設定します。
1. FirstApplication.Item.Texture を Album テクスチャの1つに。
2. FirstApplication.Item.Text そのアルバムの説明へ。
メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。