Asset Toolkit

Asset Toolkit 包含简单易用的现成组件和材质,它们具有相似的结构和属性集,可以帮助您更快地创建 Kanzi 应用程序。

在这里您可以找到所有的 Asset Toolkit 内容:

  • 高质量的占位汽车模型,您可以在原型应用程序中使用它。请参阅 汽车。

  • 可以应用于工程中 3D 内容的材质。请参阅 材质 (Materials)。

  • 环境纹理,您可以使用它们为场景提供透视感。请参阅 环境。

  • Flipbook 和 Transition 材质类型,您可以使用它们在应用程序中呈现内容。请参阅 材质类型 (Material Types)。

  • 交互式用户界面组件,您可以使用它们接收用户输入。请参阅 交互性控件组件。

  • 径向 UI 组件,您可以使用它们以圆弧形式显示进度。请参阅 径向 UI 组件。

  • 可在应用程序中使用的简单形状。请参阅 简单形状 UI 组件。

  • 可呈现项集合的可滚动列表。请参阅 滚动列表 UI 组件。

  • 示例组件,展示如何将这些资产组合成更复杂的可重用组件。请参阅 示例。

要在 Kanzi Studio 工程中使用 Asset Toolkit 资产,请从 Asset Packages 将资产拖到 Node Tree 中的节点、Prefabs 或 Preview。请参阅 使用 Asset Toolkit 资产。

../../_images/asset-packages-asset-toolkit-selected.png

汽车

使用 Car 向场景中添加汽车模型。

../../_images/car-asset1.png

要定位汽车,在 Preview 中使用 Node tool 或 Camera tool。请参阅 在 Preview 中编辑您的应用程序。 和 使用 Camera 节点。

要为汽车的不同部件设置材质,您可以将材质从 Assets 窗口拖到 Preview 窗口中的 Car,或拖到 Node Tree 中汽车的相应部件上。请参阅 使用 Asset Toolkit 资产。

材质 (Materials)

Asset Toolkit 包含基于物理的渲染 (PBR) 材质,您可以将其应用于工程中的 3D 内容。

../../_images/carpaint-blue.png

PBR Carpaint-blue

../../_images/carpaint-orange.png

PBR Carpaint-orange

../../_images/chrome.png

PBR Chrome

../../_images/glass.png

PBR Glass

../../_images/plastic.png

PBR Plastic

要了解如何在 Kanzi 应用程序中使用 Asset Toolkit 中的材质,请参阅 在工程中使用 Asset Toolkit 材质。

环境

Asset Toolkit 包含两个环境纹理。汽车和 PBR 材质中也包含这两个纹理,但它们也单独提供,以便与您自己的材质或模型一起使用。

  • 使用 Environment Studio Irradiance 为场景中的材质提供漫射环境光照,资产中的玻璃和塑料材质就采用了这种方式。

../../_images/environment-irradiance.png

Environment Studio Irradiance

  • 使用 Environment Studio Specular 为场景中的材质提供清晰、光滑的反射表面,资产中的金属和车漆材质就采用了这种方式。

../../_images/environment-specular.png

Environment Studio Specular

要在工程中使用环境纹理,请在 Assets 窗口中右键单击并导入该纹理,然后在材质属性中将其设置为 Ambient 和/或 Reflection 纹理,以将其应用于材质。通过调整 Factor 滑块控制其强度。

../../_images/set-environment-texture.png

要了解有关环境纹理的更多信息,请参阅 使用环境纹理。

材质类型 (Material Types)

Asset Toolkit 包含两种材质类型,可用于以动画方式在应用程序中显示内容:

  • 借助 Flipbook Material Type,您可以使用以网格布局排列多个图像的纹理图集。使用它可以有选择地显示该纹理图集中的图像,或播放动画序列。例如,这可用于设置群集中导航箭头的状态,或制作简单行人图形行走的动画。

    ../../_images/flipbook.png

    Flipbook Material Type

    要在工程中使用 Flipbook Material Type:

    • 右键单击以导入,或将其拖到预览或节点树中。

    • 将其作为笔刷应用到场景中的 2D 或 3D 节点。

    • 在 Flipbook Material Type 属性窗口中,设置网格以对应纹理图集中图像的布局。

      ../../_images/flipbook-configuration.png
    • 通过设置 Static Image Index 属性来设置要显示的静态图像。

      ../../_images/static-image-index.png
    • 通过推进 Time 属性值来播放动画翻页序列。

      ../../_images/time-sequence.png

    要了解如何使用图块图集,请参阅 使用图块图集。

  • Transition Material Type 使您可以以 Fade、Sweep 或 Noise 方式在节点之间进行过渡。

    ../../_images/transition.png

    Transition Material Type

    要在工程中使用 Transition Material Type:

    • 右键单击以导入,或将其拖到预览或节点树中。

    • 将其作为笔刷应用到场景中的 2D 或 3D 节点。

    • 在 Transition Material Type 属性窗口中,

      • 设置 Transition Type 以指定要应用的过渡。

      • 将要在其间过渡的纹理选择为 Transition Texture Start 和 Transition Texture End 属性。

      ../../_images/transition-textures.png
    • 要应用 Fade 过渡,请将 Transition type 属性设置为 Fade。

      • 通过推进 Transition Progress 属性值来控制淡出的进度。

      ../../_images/fade-properties.png
    • 要应用 Sweep 过渡,请将 Transition type 属性设置为 Sweep。

      • 通过设置 Transition Smoothing 属性来控制平滑强度

      • 使用 Transition Rotation 属性设置扫过运动的方向。

      ../../_images/sweep-properties.png
    • 要应用 Noise 过渡,请将 Transition type 属性设置为 Noise。

      • 此外,通过设置 Transition Noise Scale 属性来控制噪波的粒度。

      ../../_images/noise-properties.png

交互性控件组件

使用 Asset Toolkit 中提供的 UI Components 接收用户输入,并在应用程序中提供交互式用户体验。

../../_images/interactivity-ui-components.png

Asset Toolkit 中包含的交互式 UI 组件都具有一组相似的属性和行为,这些属性和行为以相同的方式公开和命名。这样可以更轻松地应用一致的样式,并在工程中组合使用这些组件。

导入 UI 组件时,Kanzi Studio 会将渲染该组件所需的着色器和材质添加到工程的 Library 和 Prefabs 中。

它使用作为 BackgroundBrush 应用到所有 UI 组件的 FillStrokeBrush 材质,来公开控制这些组件外观和行为的属性。

../../_images/fillstrokebrush.png ../../_images/fillstrokebrush-properties.png

例如,要调整 Button 的外观和行为,在将 Button 添加到工程后,在 Properties 中设置:

  • UI - Appearance 用于设置 Corner Radius 值,以调整按钮角的圆度。

  • UI - Fill 用于设置按钮背景的 Fill Color。

  • UI - Fill Gradient 用于设置按钮背景的 Fill Gradient Color 及其 Rotation。

  • UI - Fill Texture 用于将纹理应用到按钮背景,并设置纹理的应用方式。

  • UI - Progress 用于在按钮背景上应用进度条状态。

  • UI - Segments 用于将按钮背景划分为多个分段,并设置分段的数量和权重。

  • UI - Stroke 用于为按钮应用轮廓,并设置轮廓的颜色和粗细。

您可以使用这些属性的任意组合来调整 UI 组件的外观。通过勾选属性的 Active,可以分别启用各个属性。

../../_images/fill-gradient-active.png

您可以使用绑定来控制 UI - Progress 属性。请参阅 使用绑定。

要详细了解交互性控件,请参阅 交互性控件。

径向 UI 组件

使用 Asset Toolkit 中提供的 Radial UI Components 在圆形控件中显示进度值。

../../_images/radial-components.png

Asset Toolkit 中包含的径向 UI 组件都具有一组相似的属性和行为,这些属性和行为以相同的方式公开和命名。

导入 UI 组件时,Kanzi Studio 会将渲染该组件所需的着色器和材质添加到工程的 Library 和 Prefabs 中。

它使用作为 BackgroundBrush 应用到所有 UI 组件的 FillStrokeRadialBrush 材质,来公开控制这些组件外观和行为的属性。

../../_images/fillstrokeradialbrush.png ../../_images/fillstrokeradialbrush-properties.png

例如,要调整 Gauge Progress 控件的外观和行为,在将其添加到您的工程后,在 Properties 中设置:

  • UI - Appearance 用于设置应用进度的角度、径向权重和端帽形状。

  • UI - Fill 用于设置 UI 背景的填充颜色。

  • UI - Progress 用于在表盘背景上应用进度状态,并设置其颜色。

  • UI - Segments 用于将仪表划分为若干段,并设置段的数量和权重。

  • UI - Stroke 用于为仪表添加轮廓,并设置轮廓的颜色和权重。

您可以任意组合使用这些属性来调整径向 UI 组件的外观。通过勾选属性的 Active,可以分别启用每个属性。

../../_images/segments-active.png

您可以使用绑定来控制 UI - Progress 属性。请参阅 使用绑定。

简单形状 UI 组件

使用 Asset Toolkit 中提供的简单形状 UI 组件,无需插件即可向您的应用程序添加基本形状。

../../_images/simple-shapes.png
  • 在 Box with Rounded Corners 上,设置 Corner Radius 属性,使形状的角变为直角或圆角。

  • 在 Circle 上,设置 UI - Fill 属性值以应用颜色。

滚动列表 UI 组件

使用 Asset Toolkit 中提供的滚动列表 UI 组件,以四种布局模式之一向您的应用程序添加可滚动列表。

../../_images/scroll-list-ui-components.png
  • 使用 Scroll List Vertical 在垂直滚动列表中以二维方式呈现项。

  • 使用 Horizontal List Vertical 在水平滚动列表中以二维方式呈现项。

  • 使用 Scroll Trajectory 3D Horizontal 在水平面上以三维方式呈现项。

  • 使用 Scroll Trajectory 3D Arc 在弧线上以三维方式呈现项。

要了解有关列表的更多信息,请参阅 List Box nodes。

要使用数据源在列表组件中显示您自己的数据,请参阅 使用数据源 和 教程:从数据源获取应用程序数据。

示例

展开 Asset Toolkit,可以找到一个包含示例组件的文件夹,这些示例组件展示了将这些资产组合成更复杂、可重用组件的可能方式。

../../_images/examples.png

浏览这些示例组件,获取通过组合它们来构建您自己的自定义控件的实用思路。

另请参阅

使用 Asset Toolkit 资产

资产包

使用绑定

3D 资产 (3D Assets)

材质类型和材质

教程:材料和纹理

使用节点预设

Factory Content 资源