步骤 1 - 创建燃油水平指示器¶

在本教程的此步骤中，您将创建一个燃油液位指示器，显示低燃油液位和空油箱警告。

../../_images/indicator-step1-completed.gif

获取教程¶

要获取该教程，请在 Kanzi Studio Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Indicator 教程旁边，点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：

位于 <KanziWorkspace>/Tutorials/Indicator/Start 目录中的教程起点工程。
位于 <KanziWorkspace>/Tutorials/Indicator/Completed 目录中的已完成教程。

起始项目的内容¶

起点工程包含您完成本教程所需的内容：

TileAtlas 纹理显示了一个包含集群指示器图像的图块图集。
TileAtlasMaterial 使您能够使用特定颜色显示图块图集的一部分。

创建低燃料指示器¶

在本节中，您将创建一个低燃油水平指示器，当燃油量小于 25 时出现。

要创建低燃油指示灯：

在 Kanzi Studio Quick Start 窗口中，点击 Projects 并选择 Tutorials 选项卡。在 Indicator 教程旁边，点击 Open 并选择 Start project。

工程包含一个具有工作速度、燃油和电池仪表指针的2D集群。

小技巧

如果您无法在 Preview 中看到所有三个仪表，您可以在 Preview 的右上角调整 Preview 缩放级别。
在 Node Tree 按 Alt 并右键单击 Gauges 中，选择 Empty Node 2D，并将节点命名为 Indicators。
在 Node Tree 按 Alt 并右键单击 Indicators 中，选择 Empty Node 2D，并将节点命名为 FuelLevel。
创建用于从图块图集绘制指示器图像的画笔：
1. 在 Library 按 Alt 并右键单击 Materials and Textures 中，选择 Material Brush，并将其命名为 Tile Atlas Material Brush。
2. 在 Library 中选择 Tile Atlas Material Brush，并在 Properties 中将 Material 属性设置为 TileAtlasMaterial 材质。
  
  TileAtlasMaterial 使您能够仅绘制纹理的一部分。使用此材质在 Material Brush 中时，您可以仅从图块图集纹理中绘制选定的图像。
在 Node Tree 中选择 FuelLevel 节点，在 Properties 中添加 Foreground Brush 属性，并将其设置为 Tile Atlas Material Brush。

您使用 Tile Atlas Material Brush 从图块图集绘制低燃油警告。
在 Library > Materials and Textures > Materials 中选择 TileAtlasMaterial 材质，并在 Properties 中将 Blend Mode 属性设置为 Alpha: Premultiplied。

这种材质类型的片段着色器需要预乘 alpha，以便它可以将源片段与目标帧缓冲区进行混合。
从 Properties 将这些 TileAtlasMaterial 材质属性拖到 FuelLevel 节点：
- Texture
- OffsetInTileAtlas
- PrimaryColor
- TileAtlasSize
通过这种方式，您可以将材质的属性添加到节点，并从该节点控制这些属性。
在 Node Tree 中选择 FuelLevel 节点，并在 Properties 中添加并设置：
- Texture 到 TileAtlas
  
  这样您可以设置包含您要使用的图块图集的纹理。
- TileAtlasSize 属性字段：
  - X 到 112。
  - Y 到 64
- Layout Width 到 32 和 Layout Height 到 33
  
  通过这种方式，您可以设置要从 TileAtlas 纹理中绘制的燃油液位指示器图像的大小。
- OffsetInTileAtlas 属性字段：
  - X 到 42
  - 将 Y 设为 0。
  通过这种方式，您可以设置从 TileAtlas 纹理的左上角到您想要显示的燃料水平指示器图像的距离（以像素为单位）。
- PrimaryColor 属性字段：
  - Hue (H) 到 41
  - Saturation (S) 到 235
  通过这种方式，您可以使用黄色来绘制图像，以指示燃油水平低。
在 Preview 中，您可以在左上角看到燃油水平指示器。
在 Preview 中选择 Node tool 并点击：
- 以禁用对节点和指南的捕捉。
- 并选择 Render Transformation 作为目标转换。
  
  您可以通过以下方式应用变换：
  - 布局变换是在应用布局通道前对项进行变换。
  - 渲染变换是在应用布局通道后、渲染前对项进行变换。
  始终使用 Render Transformation，除非您知道必须重新计算布局。
在 Node Tree 中选择 FuelLevel 节点，并在 Preview 中将 FuelLevel 节点拖到时钟的左侧。
在 Node Tree 中选择 FuelLevel 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 Visible
- Expression 到
```
{@../../Indicator.Fuel} < 25
```
单击 Save。

通过此绑定，您可以将 FuelLevel 节点和低燃油水平警告设置为仅当 Gauges 节点中的 Fuel 属性值小于 25 时可见。

在 Node Tree 中选择 Gauges 节点，并在 Properties 中更改 Fuel 属性的值。在 Preview 中，当 Fuel 属性的值小于 25 时，您可以看到低燃料水平警告。

../../_images/indicator-step1-low-fuel-binding.gif

创建空油箱指示器。¶

在本节中，您将修改燃油液位指示器，以便当 Gauges 节点中的 Fuel 属性值小于 10 时显示空油箱警告。

要创建空油箱指示灯：

在 Library > Materials and Textures > Materials 中，选择 TileAtlasMaterial 材质，并从 Properties 将 SecondaryColor 属性拖到 FuelLevel 节点。
在 Node Tree 中选择 FuelLevel 节点，并在 Properties 中将 SecondaryColor 属性字段 Saturation (S) 设置为 195。

通过这种方式，当启用 UseSecondaryColor 属性时，您可以将 FuelLevel 节点设置为使用红色显示燃油水平指示器。
在 Node Tree 中选择 FuelLevel 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 UseSecondaryColor
- Expression 到
```
{@../../Indicator.Fuel} < 10
```
单击 Save。

通过此绑定，当 Gauges 节点中 Fuel 属性的值小于 10 时，将 UseSecondaryColor 属性设置为启用。这样，当油箱中剩余的燃料量小于 10 时，您可以以红色显示空油箱警告。