使用 Image 节点¶

使用 Image 节点显示位图图像。

使用图像文件将位图资产带入 Kanzi Studio。您可以将图像以这些文件格式导入到 Kanzi：

.png，包括阿尔法通道
.tga，包括阿尔法通道
.psd，包括图层。请参阅导入 Adobe Photoshop PSD 文件。
.dds，可以包含环境贴图、mipmap 或两者兼有
.bmp、.exr、.gif、.hdr、.ico、.iff、.jng、.jpg、.jpeg、.jif、.mng、.pcx、.pmb、.pgm、.ppm、.pfm、.pict、.ras、.sgi、.tiff、.tif、.wbmp、.xmb 和 .xpm

为了获得最佳的应用程序性能，请确保在您的 Kanzi Studio 项目中正确设置图像。请参阅图像和纹理最佳实践。

创建一个 Image 节点¶

要创建一个 Image 节点：

在 Assets 窗口中单击 Import Assets。
选择要导入的文件，然后点击 Open。

从 Assets 拖动图像并将其放入 Preview 或 Node Tree 中的任何 2D 节点。
（可选）对于您使用的图像，您可以设置最适合您的应用程序的目标格式。请参阅设置图像的目标格式。

或

在 Node Tree 按 Alt 并右键单击中，选择要创建 Image 节点的节点，然后选择 Image。

您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
在 Properties 中，将 Image 属性设置为您希望 Image 节点显示的图像。

Image 节点继承了在 Image 属性中设置的图像的宽度和高度。要设置不同的大小，请添加并设置属性：
- Layout Width 和 Layout Height 用于设置 Image 节点的大小。
- Content Stretch 设置 Kanzi 如何拉伸 Image 节点的内容。
（可选）通过设置 Horizontal Alignment 和 Vertical Alignment 属性来设置图像位置。
（可选）对于您使用的图像，您可以设置最适合您的应用程序的目标格式。请参阅设置图像的目标格式。

设置图像的目标格式¶

当您将项目导出为 kzb 文件时，Kanzi Studio 使用原始图像的格式读取项目中的图像，并根据您为每个图像设置的 Target Format 属性的格式将图像写入 kzb 文件。

如果原始图像的文件格式与您在 Target Format 属性中选择的格式相同，Kanzi Studio 在将图像写入 kzb 文件时不会修改图像，条件如下：

Premultiply Alpha 被禁用，或者不需要对 alpha 通道进行预乘。

要更改此设置，在 Project > Properties 中使用 Premultiply Alpha 属性。您可以在要使用不同设置的图像文件的属性中覆盖此值。
Generate Mipmaps 已禁用。

您可以在每个图像文件中设置 Generate Mipmaps 属性的值。
Round up Image Dimensions to Nearest Power of Two 属性已禁用。

您可以在 Project > Properties 中设置 Round up Image Dimensions to Nearest Power of Two 属性的值。

当您启用 Round up Image Dimensions to Nearest Power of Two 属性时，Kanzi Studio 会在 kzb 文件导出期间将项目中图像的宽度和高度向上舍入到最接近的二次幂。例如，Kanzi Studio 会将大小为 40 x 30 像素的图像以 64 x 32 像素的大小导出到 kzb 文件中。

如果您的图像是 JPEG 或 PNG 格式，并且您不希望 Kanzi Studio 修改其导出到 kzb 文件的图像，请在图像 Properties 中启用 Use Original Image 属性。

../../_images/use-original-image-enabled.png

要设置图像目标格式：

在 Library > Resource Files > Images 中选择您要设置目标格式的图像。
在 Properties 中，将 Target Format 属性设置为您要在 Kanzi 应用程序中使用的图像格式。

您选择的格式很重要，因为这会影响 kzb 文件的大小以及您的 Kanzi 应用程序加载图像时的加载时间。确保您的目标设备支持您为图像选择的目标格式。请参阅图像和纹理最佳实践和压缩纹理。
如果您在上一步中选择的图像格式支持压缩，请配置要使用的压缩方案。请参阅压缩纹理。
对于支持 sRGB 的图像格式：
- 如果图像包含 sRGB 颜色信息，请将 sRGB Content 属性设置为启用。这是默认设置。
  
  如果您禁用包含 sRGB 颜色信息的图像的 sRGB Content 属性，Kanzi 渲染使用该图像的纹理时可能会比预期更亮。
- 如果图像包含非颜色信息，例如法线、粗糙度或遮挡贴图，请将 sRGB Content 属性设置为禁用。
  
  包含非颜色信息的纹理以线性格式存储。通过禁用 sRGB Content 属性，您将 Kanzi 设置为直接将图像数据传递给着色器，而不执行颜色空间转换。
如果您希望 Kanzi 在中预乘 alpha 通道：
- 线性颜色空间，将 Linear Premultiply 属性设置为启用。
  
  这是默认值，并在 sRGB 图像中产生最少的伪影。
- 图像的色彩空间，通常为 sRGB，将 Linear Premultiply 属性设置为禁用。
  
  这可以为为传统颜色工作流程创建的图像提供更好的结果。
请参阅在第三方工具中准备图像。

使用 PNG 压缩¶

在使用 PNG 压缩时，请记住，因为压缩的 PNG 图像不会以压缩格式进入 GPU，所以 PNG 压缩会影响 PNG 图像数据从 kzb 文件到设备内存的加载。

使用 PNG 压缩来存储和加载来自 kzb 文件的图像。为了提高应用程序的性能，请考虑使用一种图像格式，该格式可以由 Kanzi 直接压缩发送到设备 GPU。请参阅压缩纹理。

要使用 PNG 压缩：

在 Library 的 Kanzi Studio 中，选择 Resource Files > Images，然后选择您要应用压缩的图像。
在 Properties 中，将 Target Format 设置为 PNG。
在 Properties 中，将 PNG Compression Level 属性设置为您要对该图像使用的压缩：
- 要使用在 Project > Properties 中 PNG Compression Level 属性中设置的 PNG 压缩，Project default。
- No compression 不使用图像压缩。
- Best compression speed (zlib level 1) 创建了一个较大的文件，但压缩速度很快。
- Default (zlib level 6) 创建的文件较小，但压缩时间较长。这是 FreeImage 库的默认选项，Kanzi Studio 使用该库处理 PNG 图像。
- Best compression (zlib level 9) 创建的文件最小，但压缩所需时间最长。
小技巧

您可以在 Project > Properties 中以及每个图像文件的属性中设置 PNG Compression Level 属性的值。

应用自定义渲染到 Image 节点¶

应用自定义渲染到 Image 节点，以创建后处理效果。例如，您可以将 2D 节点中的彩色图像转换为灰度图像。

要对 Image 节点应用自定义渲染，使用 Foreground Brush 属性将节点渲染到屏幕上，并使用 Material Brush。例如，要渲染节点的内容，例如 Image 节点中的图像或 Text Block 2D 节点中的文本，请使用 Foreground Brush 属性。

要应用自定义渲染到 Image 节点：

创建您要应用自定义渲染的材质。

例如，要创建一个用于将颜色转换为灰度的材质：

在 Library 中，按 Alt 并右键单击 Materials and Textures 并选择 Material Type。Kanzi Studio 创建一种材质类型和使用该材质类型的材质。

在 Library > Materials and Textures > Material Types 中，展开您创建的材质类型。双击 Vertex Shader 在 Shader Source Editor 中打开它，将现有的着色器代码替换为此代码，并保存着色器。

attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}

打开 Fragment Shader，将现有的着色器代码替换为此步骤中的代码，并保存着色器。

在着色器中，使用这些 Kanzi 默认 uniform：

ContentTexture 用于定义渲染节点在渲染时提供的纹理。
RenderOpacity 用于定义渲染节点的不透明度。

请参阅着色器 uniform。

uniform sampler2D ContentTexture;
varying mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;

void main()
{
    precision mediump float;
    // Use this algorithm to convert the colors in the texture used by
    // the 2D node to grayscale.
    // To integrate to the Kanzi rendering pipeline, the shader must output
    // premultiplied alpha.
    vec4 color = texture2D(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    gl_FragColor = vec4(premultipliedColor, alpha);
}

在 Library 中，按 Alt 并右键单击 Materials and Textures 并选择 Material Brush。在 Properties 中，将 Material 属性设置为您在上一步中创建的材质。
在 Node Tree 中创建或选择您要应用所创建材质的 Image 节点，并将该节点设置为显示图像。
在 Properties 中，添加并设置 Image 节点的 Foreground Brush 属性为使用您要应用于该节点的材质的材质画刷。
（可选）设置图像的混合：
1. 在 Library > Materials and Textures > Material Types 中选择您创建的材质类型，在 Properties 中点击 Property Types 下拉菜单，选择 Blend Mode，然后点击 Sync with Uniforms。
  
  通过这种方式，您可以将 Blend Mode 属性添加到使用此材料类型的材料中。
2. 在 Properties 中，在以下任一位置添加并设置 Blend Mode 属性：
  - 使用了您添加了 Blend Mode 属性的材质的 Material Brush。
  - 使用 Material Brush 的 Image 节点。
  例如：在 Node Tree 中选择 Image 节点，在 Properties 中添加 Blend Mode 属性，并将其设置为 Alpha: Premultiplied。
（可选）要调整图像的透明度，请在 Node Tree 中选择 Image 节点，并在 Properties 中添加并设置 Opacity 属性。