第 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 节点。
使用 Trajectory List Box 3D 节点可在 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 节点的中央。
调整场景光照:
在 Node Tree 中,选择 Media > Viewport 2D > Scene > Directional Light 节点。在 Properties 中,将 Layout Transformation 属性的 Rotation X 和 Rotation Y 属性字段设置为 0。
在 Node Tree 中的 Scene 节点内,创建一个 Point Light 节点。在 Preview 中,使用 Node tool
将 Point Light 移动到 Trajectory List Box 3D 中最前面的项的前方。
在 Properties 中,将 Point Light Color 属性 Intensity (I) 属性字段设置为 +3。
在 Node Tree 中的 Trajectory List Box 3D 节点内,选择 Item 预设件的每个实例。在 Properties 中,添加并设置:
将 FirstApplication.Item.Texture 设置为其中一个 Album 纹理。
FirstApplication.Item.Text 到该专辑的描述。
单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。
另请参阅¶
要了解有关使用 Trajectory List Box 3D 的更多信息,请参阅 使用 Trajectory List Box 3D 节点。
要详细了解有关可用的轨迹类型的信息,请参阅 轨迹 (Trajectories)。