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