第 5 步 - 创建 Media 屏幕的内容

在此步骤中,您将创建 Media 屏幕的内容,以在列表框中显示专辑列表。首先为专辑项创建一个预设件模板,然后创建一个 Trajectory List Box 3D 节点,使用户能够浏览专辑项。

创建 Media 屏幕项的预设件

在本节中,您将创建一个预设件,用于定义 Media 屏幕中显示的项的模板。

要创建 Media 屏幕项的预设件:

  1. 在 Prefabs 中,创建一个 Plane 预设件,并将其命名为 Item。在 Properties 中,将 Height 属性设置为 5。

    ../../_images/item-prefab.png ../../_images/material-to-phongmaterial.png
  2. 在 Prefabs 中,双击 Item 预设件,在其自身的 Preview 选项卡中将其打开。在 Item 预设件中创建以下节点:

    • Plane 并将其命名为 Album。

    • Text Block 3D 并将其命名为 Description。

    • Plane 并将其命名为 Shadow。

    ../../_images/item-prefab-structure.png
  3. 在 Prefabs 中,选择 Item > Album 节点。在 Properties 中,添加并设置:

    • Mesh Material 到 VertexPhongTexturedMaterial

    • 将 Width 和 Height 设置为 3.5

    • 添加 Material > Texture 并点击 edit-property

      这样您可以为预设件的每个实例显示不同的纹理。

    • Render Transformation 属性:

      • 将 Translation Y 属性字段设置为 0.5

      • 将 Translation Z 属性字段设置为 0.1

    ../../_images/album-properties.png ../../_images/item-album-node-set.png
  4. 在 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

    ../../_images/shadow-properties.png ../../_images/item-with-shadow.png
  5. 在 Prefabs 中,选择 Item > Description 节点。在 Properties 中,添加并设置:

    • 将 Font Color 属性 Lightness (L) 属性字段设置为 0。

    • Font Size 到 30

    • 添加 Text 属性并点击 edit-property

      这样您可以为预设件的每个实例显示不同的文本。

    • Render Transformation 属性:

      • 将 Translation Y 属性字段设置为 -1.9

      • 将 Translation Z 属性字段设置为 0.1

    ../../_images/description-properties.png ../../_images/item-description-node-set.png

创建用于滚动媒体内容的控件

在本节中,您将创建一个 Trajectory List Box 3D 节点,使用户能够滚动媒体内容。

要创建用于滚动媒体内容的控件:

  1. 在 Prefabs 中,双击 Media 预设件,在其自身的 Preview 选项卡中将其打开。

    ../../_images/composition-tab-media.png
  2. 在 Node Tree > Media 中,创建一个 Viewport 2D 节点、一个 Scene 节点和一个 Trajectory List Box 3D 节点。

    使用 Trajectory List Box 3D 节点可在 3D 空间中创建沿轨迹排列的项的可滚动列表。

    Kanzi Studio 默认情况下创建并使用圆形轨迹。您可以使用角度、弧、圆、椭圆、直线、矩形、螺旋、样条或梯形轨迹。请参阅 轨迹 (Trajectories)。

    ../../_images/trajectory-list-box-3d1.png
  3. 从 Prefabs 中将 Item 预设件多次拖放到 Trajectory List Box 3D 节点。

    在本教程中以及创建原型时,您可以在 Kanzi Studio 中通过实例化的方式手动向 Trajectory List Box 3D 节点添加项。如果 List Box 节点中的项数在应用程序运行时会发生变化,请使用 Kanzi Engine API 或数据源向 List Box 节点添加项。

    ../../_images/trajectory-list-box-3d-with-item-prefabs.png ../../_images/trajectory-list-box-3d-not-adjusted.png
  4. 在 Node Tree 中,选择 Trajectory List Box 3D 节点,并在 Preview 中使用 Node tool node-tool 旋转 Trajectory List Box 3D 节点,并将其放置在 Media 节点的中央。

    ../../_images/trajectory-list-box-3d-straightened.png
  5. 调整场景光照:

    1. 在 Node Tree 中,选择 Media > Viewport 2D > Scene > Directional Light 节点。在 Properties 中,将 Layout Transformation 属性的 Rotation X 和 Rotation Y 属性字段设置为 0。

      ../../_images/media-directional-light.png ../../_images/media-directional-light-properties.png
    2. 在 Node Tree 中的 Scene 节点内,创建一个 Point Light 节点。在 Preview 中,使用 Node tool node-tool 将 Point Light 移动到 Trajectory List Box 3D 中最前面的项的前方。

      ../../_images/media-point-light.png ../../_images/trajectory-list-box-3d-adjusted.png
    3. 在 Properties 中,将 Point Light Color 属性 Intensity (I) 属性字段设置为 +3。

      ../../_images/point-light-intensity.png ../../_images/point-light-intensity-adjusted.png
  6. 在 Node Tree 中的 Trajectory List Box 3D 节点内,选择 Item 预设件的每个实例。在 Properties 中,添加并设置:

    1. 将 FirstApplication.Item.Texture 设置为其中一个 Album 纹理。

    2. FirstApplication.Item.Text 到该专辑的描述。

    ../../_images/item-texture-and-text.png
  7. 单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。

    ../../_images/screen-tab-step-5.png
../../_images/step-5-end.gif

另请参阅

要了解有关使用 Trajectory List Box 3D 的更多信息,请参阅 使用 Trajectory List Box 3D 节点。

要详细了解有关可用的轨迹类型的信息,请参阅 轨迹 (Trajectories)。