使用多个效果¶

使用 Effect Stack 2D 效果预设来将多个效果应用于 2D 节点。

Kanzi Studio 附带 Default Effect Stack 2D 预设，您可以使用它快速将多种效果应用于2D节点。请参阅使用 Default Effect Stack 2D 预设。

将多个效果应用于 2D 节点¶

要将多个效果应用于2D节点：

在 Library 中，按 Alt 并右键单击 Effects 并选择 Effect Stack 2D。
在 Node Tree 或 Prefabs 中，创建一个要应用多个效果的 2D 节点。
在 Properties 中，添加 Effect Prefab 属性并将其设置为 Effect Stack 2D。

通过这种方式，您将效果预设分配给节点，以便您可以在 Preview 中跟踪效果的创建。
在 Effect Stack 2D 效果预设中的 Library 中，创建您想要应用于 2D 节点的效果。

Kanzi 按照效果在 Effect Stack 2D 中出现的顺序，从上到下将效果应用于节点的内容。

例如，创建：
1. Outline Effect 2D 效果。请参阅使用 Outline Effect 2D 效果。
2. Shadow Effect 2D 效果。请参阅使用 Shadow Effect 2D 效果。
（可选）要控制 Kanzi 如何在堆栈中应用效果，请在效果中添加 Effect Stack 2D > Effect Stacking Mode 属性并将其设置为：
- Chained 用作输入，以影响前一个效果的输出。
  
  例如，这样，当您在 Outline Effect 2D 之后应用 Shadow Effect 2D 时，您也将阴影应用于轮廓。默认情况下，轮廓不包含在阴影中。
- Layered 用作输入，以用于前一个链式效果的输出。
  
  这是 Shadow Effect 2D 和 Outline Effect 2D 效果的默认模式。
Effect Stacking Mode 属性对 Mask Effect 2D 和 Blur Effect 2D 效果没有影响，这些效果始终使用 Chained 模式。

使用 Default Effect Stack 2D 预设¶

为了帮助您开始使用 Effect Stack 2D，Kanzi Studio 附带了 Default Effect Stack 2D 预设。

要使用 Default Effect Stack 2D 预设：

在 Library 中，按 Alt 并右键单击 Effects 并选择 Default Effect Stack 2D。

Kanzi Studio 在 Library > Effects > 2D Effects 中创建一个名为 Default Effect Stack 2D 的 Effect Stack 2D 效果预设，并在其中：
- Mask Effect 2D 效果名为 Mask。
- Shadow Effect 2D 效果名为 Shadow。
- Outline Effect 2D 效果名为 Outline。
- Blur Effect 2D 效果名为 Blur。
每个效果的最常见属性都绑定到 Default Effect Stack 2D。这样，您可以在 Default Effect Stack 2D 中设置每个效果。
在 Node Tree 或 Prefabs 中，创建一个要应用多个效果的 2D 节点。
在 Properties 中，添加 Effect Prefab 属性并将其设置为 Default Effect Stack 2D。

默认情况下，Default Effect Stack 2D 预设应用默认的 Shadow Effect 2D 效果。Default Effect Stack 2D 中的所有其他效果均被禁用。

当您将节点设置为使用 Default Effect Stack 2D 时，Kanzi Studio 会向该节点添加属性，您可以使用这些属性在 Default Effect Stack 2D 中设置模糊、遮罩、轮廓和阴影效果。
在 Properties 中，添加并设置 Effect Stack 属性。

例如，添加并设置：
- 将 Mask Enabled 设置为 enabled。
- 将 Mask Texture 到您想用作遮罩的纹理。
- 将 Outline Enabled 设置为 enabled。
- 将 Outline Color 设置为您想要用于轮廓的颜色。
- Shadow Distance 到 20
对于您添加的每个属性，Kanzi Studio 会向节点添加一个 To Source 绑定，该绑定将属性值推送到 Default Effect Stack 2D 预设。

小技巧

当您想要从节点中移除效果堆栈属性及其 To Source 绑定时，右键单击该属性并选择 Remove Property And Binding。

创建毛玻璃效果¶

在此过程中，您使用 Effect Stack 2D 效果预设与 Blur Effect 2D、Mask Effect 2D 和 Shadow Effect 2D 效果来创建磨砂玻璃效果。

../../_images/frosted-glass-with-content.png

要创建磨砂玻璃效果：

创建毛玻璃效果的背景：
1. 创建您想用作毛玻璃背景的节点。
  
  例如：在 Node Tree 中，创建一个 Image 节点并将其命名为 Background。在 Properties 中，添加并设置：
  - Image 到一个纹理，该纹理显示您想用作毛玻璃效果背景的图像。
  - Horizontal Alignment 和 Vertical Alignment 到 Stretch
  - Content Stretch 到 Uniform to fill
2. 在 Library 中，按 Alt 并右键单击 Materials and Textures，选择 Render Target Texture，并将其命名为 Background Render Target。在 Properties 中，将 Width 和 Height 属性设置为至少与您在上一步中创建的背景的宽度和高度相同。
  
  如果背景的大小是固定的，您可以启用 Automatic 设置。这样，您可以将渲染目标纹理设置为使用此纹理的节点的大小。
3. 在 Node Tree 中，选择显示毛玻璃背景的节点。在 Properties 中，添加 Render Target > Render Target 属性并将其设置为 Background Render Target。
  
  通过这种方式，您将 Kanzi 设置为将背景渲染到屏幕和 Background Render Target 渲染目标纹理。您在此过程的后面使用 Background Render Target 渲染目标纹理，在显示毛玻璃效果的节点中渲染背景的一部分。
4. 在 Node Tree 中，按 Alt 并右键单击显示毛玻璃背景的节点并选择 Alias。
  
  Kanzi Studio 在 Screen 节点的资源字典中创建一个指向背景节点的别名。稍后在此过程中，您将使用此别名在绑定中访问背景节点。
创建一个材料，您可以使用它来显示纹理的特定部分：
1. 在 Library 中，按 Alt 并右键单击 Materials and Textures，选择 Material Type，并将其命名为 BackgroundCaptureBlit。
2. 在 Library > Materials and Textures > Material Types > BackgroundCaptureBlit 中，双击 Vertex Shader 以在 Shader Source Editor 中将其打开。将着色器文件的内容替换为
```
precision mediump float;

attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform mediump vec2 kzTextureSize0;
uniform highp mat4 kzWorldMatrix;
uniform highp mat4 kzProjectionCameraWorldMatrix;
uniform vec2 BlitOffset;
varying vec2 vTexCoord;

void main()
{
    vec2 scaledPosition = kzPosition.xy * vec2(kzWorldMatrix[0][0], kzWorldMatrix[1][1]);
    vTexCoord = (scaledPosition + BlitOffset) / kzTextureSize0;
    vTexCoord.y = 1.0 - vTexCoord.y;

    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
  单击 Save。
3. 在 Library > Materials and Textures > Material Types > BackgroundCaptureBlit 中，将 Fragment Shader 的内容替换为
```
precision mediump float;

uniform sampler2D RenderTexture;
uniform float BlendIntensity;
uniform vec4 ModulateColor;

varying vec2 vTexCoord;

void main()
{
    vec4 color = texture2D(RenderTexture, vTexCoord);
    gl_FragColor = ModulateColor * color * BlendIntensity;
}
```
  单击 Save。
4. 在 Library > Materials and Textures > Material Types 中，选择 BackgroundCaptureBlit 材质类型。在 Properties 中，单击 Sync with Uniforms。
  
  Kanzi Studio：
  1. 在 Library > Property Types 中创建 BlitOffset 属性类型。
  2. 将您在着色器中定义的以下属性添加到 BackgroundCaptureBlit 材质类型：
    - Blend Intensity (BlendIntensity)
    - BlitOffset (BlitOffset)
    - Brush Modulate Color (Brush.ModulateColor)
    - Brush Texture (TextureBrush.RenderTexture)
    您现在可以在使用 BackgroundCaptureBlit 材质类型的 BackgroundCaptureBlitMaterial 材质中设置这些属性。
在 Library > Materials and Textures > Brushes 中，创建一个 Material Brush 并将其命名为 BackgroundCaptureBlitBrush。在 Properties 中，将 Material 设置为 BackgroundCaptureBlitMaterial。

在设置为使用此材质笔刷的节点中，您可以使用以下属性：
- Brush Texture 以设置您要在节点中渲染的纹理。
- Brush Modulate Color 设置画笔的调制颜色。
- BlitOffset 用于设置沿 x 和 y 轴偏移 Brush Texture 的距离。
创建您想要显示毛玻璃效果的 UI 区域。

例如：
1. 在 Node Tree 中，创建一个 Parallel Activity Host 2D 节点作为 Background 节点的同级。在 Properties 中，添加并设置 Horizontal Alignment 和 Vertical Alignment 属性为 Stretch。
2. 在 Activity Browser 中，在 Parallel Activity Host 2D 下方，单击，选择 Create Activity，并命名活动及其预设模板为 Login。
3. 在 Activity Browser 中，在 Login 活动中，点击。
  
  通过这种方式，您可以模拟激活 Login 活动，以便在 Preview 中查看其内容。
4. 在 Prefabs 中，选择 Login 预设。在 Properties 中，添加并设置：
  - Layout Width 和 Layout Height 属性用于设置毛玻璃的大小。
  - Horizontal Alignment 和 Vertical Alignment 属性到 Center。
5. 在 Prefabs 中，创建一个 Content Layout 2D 预设，并将其命名为 Frosted Glass。
  
  要使毛玻璃可重用，您需要在预设中创建它。
  
  默认情况下，Content Layout 2D 不会裁剪其子节点。如果您使用其他类型的节点来承载效果，确保将该节点中的 Node > Clip Children 属性禁用。这样，您可以确保 Kanzi 不会裁剪您在此过程后续步骤中应用的效果。
6. 在 Prefabs 中，将 Frosted Glass 预设拖到 Login 活动预设中。
  
  通过这种方式，您可以将 Frosted Glass 预设添加到 Login 活动中，并在激活 Login 活动时在 Preview 中查看其内容。
7. 在 Prefabs 中，选择 Frosted Glass 预设。在 Properties 中，添加并设置这些 Brush 属性：
  - Brush Texture 到 Background Render Target
  - Foreground Brush 到 BackgroundCaptureBlitBrush
  - 将 Brush Modulate Color 设置为您要用于 Foreground Brush 的调制颜色。
    
    要使磨砂玻璃比背景更亮，请将 Brush Modulate Color 属性 Lightness (L) 属性字段设置为大于 255 的值。
    
    例如，将其设为 350。
8. 在 Properties 中，单击 + Add Binding。在 Binding Editor 中设置：
  - Property 到 Material Properties > BlitOffset
    
    此属性设置沿 x 和 y 轴偏移 Brush Texture 的距离。
  - Expression 返回一个二维向量，该向量确定您希望在 Frosted Glass 节点中偏移 Background Render Target 的量。
    
    例如，要在屏幕中央渲染毛玻璃，请将 Expression 设置为
    offset = Vector2(0,0) # Set the offset along the x axis to half of the difference between the widths of the # Background node and Frosted Glass node. offset.X = 0.5 * ({#Background/Node.ActualWidth} - {@./Node.ActualWidth}) # Set the offset along the y axis to half of the difference between the heights of the # Background node and Frosted Glass node. offset.Y = 0.5 * ({#Background/Node.ActualHeight} - {@./Node.ActualHeight}) # Return the offset along the x and y axes. offset
  单击 Save。
创建毛玻璃效果：
1. 在 Library 中，按 Alt 并右键单击 Effects，选择 Effect Stack 2D，并将其命名为 Frosted Glass Effect。
2. 在 Prefabs 中，选择 Frosted Glass 预设。在 Properties 中，添加并将 Effect Prefab 属性设置为 Frosted Glass Effect。
  
  通过这种方式，您将效果堆栈分配给节点，以便您可以在 Preview 中跟踪效果的创建。
3. 在 Library > Effects > 2D Effects 中，按 Alt 并右键单击 Frosted Glass Effect 并选择 Mask Effect 2D。在 Properties 中，添加并设置：
  - 将 Mask Texture 到您要使用的纹理，以定义应用毛玻璃效果的区域形状。
    
    例如：在 Mask Texture 下拉菜单中选择 + Import Image 并导入此图像：
  - Mask Stretch 到 Fill
    
    通过这种方式，您可以拉伸蒙版以填充应用 Mask Effect 2D 效果的节点。
  - Mask Channel 到您想用作遮罩输入的 Mask Texture 中的通道。
    
    默认情况下，Kanzi 使用 Mask Texture 的 alpha 通道作为遮罩的输入。
    
    例如，如果您使用上述图像作为蒙版纹理，请将 Mask Channel 设置为 Luminance。这样，您将 Kanzi 设置为使用从蒙版纹理的颜色通道计算的亮度值作为蒙版的输入。
4. 在 Library 中，按 Alt 并右键单击 Frosted Glass Effect 并选择 Blur Effect 2D。
  
  通过这种方式，您可以为 Frosted Glass Effect 添加高斯模糊。
5. 在 Properties 中，添加并设置：
  - Blur Radius 到您希望模糊效果相互融合的像素圆形区域的半径。
    
    例如，将其设为 32。
  - 将 Masked Blur 设置为 enabled。
    
    您将模糊效果设置为仅模糊节点中 alpha 通道值不为零的像素。这样可以防止模糊扩散到完全透明的像素，并使内容的边缘保持清晰。
6. 在 Library > Effects > 2D Effects 中，按 Alt 并右键单击 Frosted Glass Effect 并选择 Shadow Effect 2D。
  
  通过这种方式，您可以为毛玻璃添加投影。
  
  默认情况下，Shadow Effect 2D 将在 2D 节点中应用于内容的视觉形状，呈现一个相对于正 x 轴呈 45 度角的部分透明黑色阴影。
创建显示内容的节点，以便在毛玻璃效果上显示您想要的内容。

例如，在 Login Activity 预设中，创建登录屏幕的输入字段。

使用 Kanzi Engine API 为 2D 节点分配多个效果。¶

要使用 Kanzi Engine API 为 2D 节点分配多个效果：

// Create an outline effect template.
NodeEffectTemplate2DSharedPtr outlineEffectTemplate =
    NodeEffectTemplate2D::create(OutlineEffect2D::getStaticMetaclass()->getName(), "OutlineEffect");

// Set the value of the WidthProperty in the outline effect template.
// The WidthProperty defines the maximum width of the outline outside the content area.
outlineEffectTemplate->addPropertyValue(OutlineEffect2D::WidthProperty, Variant(8));

// Create an effect stack template.
NodeEffectTemplate2DSharedPtr effectStackTemplate = NodeEffectTemplate2D::create(EffectStack2D::getStaticMetaclass()->getName(), "Group");

// Add the outline effect template to the effect stack template.
effectStackTemplate->addChild(outlineEffectTemplate);

// Create a shadow effect template and add it to the effect stack template.
effectStackTemplate->addChild(NodeEffectTemplate2D::create(ShadowEffect2D::getStaticMetaclass()->getName(), "DropShadow"));

// Create a prefab from the effect stack template.
NodeEffectPrefab2DSharedPtr effectStackPrefab =
    NodeEffectPrefab2D::create(getDomain(), "Effect Stack prefab", effectStackTemplate);

// Set a 2D node to use the effect stack prefab.
// This way, you apply to the node both the outline and the shadow effect.
node->setEffectPrefab(effectStackPrefab);

有关详细信息，请参阅 EffectStack2D 类。

另请参阅¶

2D 节点的效果

使用 Blur Effect 2D 效果

使用 Mask Effect 2D 效果

使用 Outline Effect 2D 效果

使用 Shadow Effect 2D 效果