调整 2D 节点的外观

您可以通过使用笔刷填充 2D 节点的背景或前景来调整其外观。例如,您可以设置 Activity 节点的背景颜色,使用纹理填充 Text Block 2D 节点,或将材质应用到 Button 2D 节点。

您可以通过以下方式填充 2D 节点:

用单色填充 2D 节点

使用 Color Brush 为 2D 节点填充单色。

要用单色填充 2D 节点:

  1. 在 Library 按 Alt 并右键单击 Materials and Textures 中,选择 Color Brush,并命名画笔。

    ../../_images/library-create-color-brush.png ../../_images/dark-gray-color-brush-in-library.png
  2. 在 Node Tree 中选择您要用创建的画笔填充的2D节点,在 Properties 中添加 Background Brush 或 Foreground Brush 属性,并选择您在第一步中创建的画笔。

    例如,创建一个 Button 2D 节点,在 Properties 中添加 Background Brush 属性,并将其设置为您在第一步中创建的画笔。

    ../../_images/button-2d.png ../../_images/button-2d-background-brush-set-to-dark-gray.png
  3. 在 Properties 中,点击您在上一步中添加的属性旁边的 快速编辑属性,并设置您在上一步中创建的颜色画笔的颜色。

    在 Preview 中,您可以看到您创建的 Color Brush 填充了您设置属性的节点。

    ../../_images/appearance-quick-set-color-brush.png

    小技巧

    要快速编辑画笔,请在 Properties 中,Background Brush 或 Foreground Brush 属性旁边点击 快速编辑属性 并编辑画笔。

    ../../_images/background-brush-quick-edit.png

用纹理填充 2D 节点

使用 Texture Brush 以纹理填充 2D 节点。

要使用纹理填充 2D 节点:

  1. 在 Library 按 Alt 并右键单击 Materials and Textures 中,选择 Texture Brush,并命名画笔。

    ../../_images/create-texture-brush.png
  2. 在 Node Tree 中选择您要用创建的画笔填充的2D节点,在 Properties 中添加 Background Brush 或 Foreground Brush 属性,并选择您在第一步中创建的画笔。

    例如,创建一个 Grid Layout 2D 节点,在 Properties 中添加 Background Brush 属性,并将其设置为您在第一步中创建的画笔。

    ../../_images/grid-layout-2d-in-project.png ../../_images/grid-layout-2d-background-texture-brush.png
  3. 在 Properties 中,单击您在上一步中添加的属性旁边的 go-to-item 以转到该属性使用的画笔,设置您希望此纹理画笔使用的纹理,并调整 Texture Brush 如何使用该纹理:

    • Brush Modulate Color 设置画笔的调制颜色。

    • Brush Horizontal Tiling 影响纹理坐标的缩放,以设置纹理的水平平铺。

    • Brush Vertical Tiling 影响纹理坐标的缩放以设置纹理的垂直平铺。

    • Brush Texture 设置画笔的纹理。

    ../../_images/go-to-texture-brush.png ../../_images/texture-brush-properties.png

用材质填充 2D 节点

使用 Material Brush 将 2D 节点填充为材质。

要用材质填充 2D 节点:

  1. 在 Library 按 Alt 并右键单击 Materials and Textures 中,选择 Material Brush,并命名画笔。

    ../../_images/create-material-brush.png
  2. 在 Properties 中,将 Material 属性设置为您要用于填充 2D 节点的材质。

    如果您的工程中没有任何材质,请创建一个材质。请参阅 创建材质。

    ../../_images/material-brush-set-material-to-colortexturematerial.png ../../_images/colortexturematerial-properties.png
  3. 在 Node Tree 中选择您要用创建的画笔填充的2D节点,在 Properties 中添加 Background Brush 或 Foreground Brush 属性,并选择您在第一步中创建的画笔。

    例如,创建一个 Button 2D 节点,在 Properties 中添加 Background Brush 属性,并将其设置为您在第一步中创建的画笔。

    ../../_images/button-2d.png ../../_images/button-2d-properties-and-preview.png
  4. 要调整材质的外观,请在以下位置设置 Material 属性:

    • Material Brush。

      例如,要更改 Material Brush 的材质的环境颜色、纹理和混合,请添加并设置 Ambient Color、Texture 和 Blend Mode 属性。

      ../../_images/set-material-properties-in-material-brush.png
    • 使用 Material Brush 的节点。

      例如,要更改节点材质的环境颜色、纹理和混合,请在该节点中添加并设置 Ambient Color、Texture 和 Blend Mode 属性。

      ../../_images/set-material-properties-in-node.png

渲染像素完美的2D节点

像素完美渲染通过将节点的平移和缩放舍入到完整像素来确保2D节点的清晰渲染。

Kanzi 默认情况下不会将2D节点渲染为像素完美。当您将2D节点定位在小数像素位置时,抗锯齿可能会导致该节点的边缘模糊。

小技巧

默认情况下,Kanzi Studio 项目具有一种样式,使 Kanzi 在所有 Text Block 2D 节点中以像素完美的方式渲染文本。请参阅 在 Text Block 2D 节点中渲染像素完美的文本。

要渲染像素完美的2D节点,在 Node Tree 或 Prefabs 中,选择该节点,并在 Properties 中,添加并启用 Node 2D > Snap to Pixel 属性。

../../_images/properties-preview-snap-to-pixel.gif

另请参阅

使用刷子

使用材料

纹理 (Textures)

应用自定义渲染到 2D 节点

为2D节点创建3D透视效果