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

このチュートリアルのこのステップでは、Media ページのコンテンツを作成し、リストボックスにアルバムのリストを表示します。まず、アルバムアイテムのプレハブテンプレートを作成し、次に Trajectory List Box 3D ノードを作成して、アプリケーションの Media セクションでユーザーがアルバムアイテムを閲覧できるようにします。

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
- 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 に設定します。
- Texture プロパティを ShadowMedia に
- Blend Mode から Alpha: Automatic へ
- 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 ノードを作成して設定し、アイテムを追加します。¶

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

メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。
Node Tree > RootPage で、Media ノードの下にある Viewport 2D ノードを Media ノードにドラッグし、Media > Viewport 2D > Scene ノードで Trajectory List Box 3D ノードを作成します。

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

Kanzi Studio はデフォルトで円のトラジェクトリを作成して使用します。角度、弧、円、楕円、直線、長方形、スパイラル、スプライン、または台形のトラジェクトリを使用できます。トラジェクトリ (Trajectories) を参照してください。
Node Tree で、Media ノードをダブルクリックして、独自の Preview タブで開き、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 ノードを Page ノード Media の中心に回転させて配置します。
以下のようにして光源を作成し、明るさを調整します。
1. Node Tree で、Media > Viewport 2D > Scene > Directional Light ノードを選択し、Properties で Layout Transformation プロパティ Rotation X と Rotation Y プロパティフィールドを0に設定します。
2. Scene ノードの Node Tree 内で Point Light ノードを作成し、Preview で Node tool を使用して、Trajectory List Box 3D の先頭アイテムの前に Point Light を移動します。
3. Properties で、Point Light Color プロパティ Intensity (I) プロパティフィールドを+3に設定します。
Trajectory List Box 3D ノードの Node Tree で、Item プレハブの各インスタンスを選択し、Properties で追加して設定します。
1. FirstApplication.Item.Texture を Album テクスチャの1つに。
2. FirstApplication.Item.Text そのアルバムの説明へ。
メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。