使用 Mask Effect 2D 效果

使用 Mask Effect 2D 效果将遮罩应用于 2D 节点。

../../_images/mask-effect-2d-large.png

为 2D 节点创建遮罩效果。

要为 2D 节点创建遮罩效果:

  1. 在 Library 按 Alt 并右键单击 Effects 中选择 Mask Effect 2D。

    ../../_images/create-mask-effect-2d.png
  2. 在 Node Tree 或 Prefabs 中创建一个要应用遮罩效果的 2D 节点。

    ../../_images/image-in-node-tree.png ../../_images/image-in-preview1.png
  3. 从 Library > Effects > 2D Effects 将 Mask Effect 2D 效果拖到 Node Tree 或 Prefabs 上,并将其放到您想要应用遮罩效果的 2D 节点上。

    通过这种方式,您可以在该 2D 节点中将 Effect Prefab 属性设置为 Mask Effect 2D 效果。

    ../../_images/drag-mask-effect-to-node.png ../../_images/mask-effect-prefab-set.png
  4. 在 Library 中选择 Mask Effect 2D 效果,并在 Properties 中添加并设置 Mask Effect 2D 属性。

    ../../_images/mask-effect-2d-properties.png ../../_images/mask-effect-in-preview.png

    Mask Texture 设置您要用作遮罩的纹理。

    要使用遮罩效果,您必须设置此属性。

    ../../_images/mask-texture.gif

    Mask Width 设置遮罩的宽度。

    默认情况下,遮罩的宽度是您设置为 Mask Texture 的纹理的宽度。

    ../../_images/mask-width.gif

    Mask Height 设置遮罩的高度。

    默认情况下,遮罩的高度是您设置为 Mask Texture 的纹理的高度。

    ../../_images/mask-height.gif

    Mask Horizontal Alignment 设置遮罩的水平对齐:

    • Left 将遮罩的左边缘与节点的左边缘对齐。这是默认值。

    • Right 将遮罩的右边缘与节点的右边缘对齐。

    • Center 将遮罩水平对齐到节点的中心。

    • Stretch 水平拉伸遮罩以适应从左边缘到右边缘的节点。

    ../../_images/mask-horizontal-alignment.gif

    Mask Vertical Alignment 设置遮罩的垂直对齐:

    • Top 将遮罩的上边缘与节点的上边缘对齐。这是默认值。

    • Bottom 将遮罩的底边与节点的底边对齐。

    • Center 将遮罩垂直对齐到节点的中心。

    • Stretch 垂直拉伸遮罩以适应从顶部边缘到底部边缘的节点。

    ../../_images/mask-vertical-alignment.gif

    Mask Offset 设置沿 x 和 y 轴的遮罩偏移。

    Kanzi 在 Mask Stretch、Mask Horizontal Alignment、Mask Vertical Alignment 和 Mask Scale 属性之后应用此属性。

    ../../_images/mask-offset.gif

    Mask Scale 设置缩放遮罩的系数。

    Kanzi 在 Mask Stretch、Mask Horizontal Alignment 和 Mask Vertical Alignment 属性之后应用此属性。

    ../../_images/mask-scale.gif

    Use Screen Space 设置是否相对于屏幕布局遮罩。

    默认情况下,Kanzi 相对于使用遮罩效果的节点布局遮罩。

    ../../_images/mask-screen-space.gif

    Mask Stretch 设置遮罩的拉伸模式:

    • None 不会拉伸遮罩。

    • Fill 拉伸遮罩以填充节点。

    • Uniform 使用统一缩放拉伸蒙版,以填充节点在垂直或水平方向上所需较小缩放的方向。

    • Uniform To Fill 使用统一缩放来拉伸蒙版,以填充节点的垂直或水平方向,以需要更大缩放的方向为准。

    • Repeat 不会拉伸遮罩,而是允许遮罩根据您设置为 Mask Texture 的纹理中的 Wrap Mode 属性的值在其区域外重复。

    ../../_images/mask-stretch.gif

    Mask Channel 设置您要用作遮罩输入的 Mask Texture 中的通道:

    • Alpha 使用纹理中的 alpha 通道。这是默认值。

    • Red 使用纹理中的红色通道。

    • Green 使用纹理中的绿色通道。

    • Blue 使用纹理中的蓝色通道。

    • Luminance 使用从红色、绿色和蓝色颜色通道计算的亮度值。

    ../../_images/mask-channel.gif

    Invert Mask 设置是否反转蒙版,使蒙版中的透明区域变为不透明,反之亦然。

    ../../_images/invert-mask.gif

    Mask Strength 将掩码的强度设置在 0 到 1 的范围内:

    • 要将遮罩效果应用到最大强度,请使用值 1。这是默认值。

    • 要部分应用遮罩,就像将未遮罩的结果与完全遮罩的版本混合一样,使用介于 0 和 1 之间的值。

    • 要禁用遮罩效果,请使用值 0。

    ../../_images/mask-strength.gif

自定义遮罩效果的实例

当您在 Library > Effects 中编辑效果的属性时,您会更改使用该效果的所有节点的外观。您可以通过覆盖效果属性值来自定义每个效果实例。例如:

  • 当您创建 Shadow Effect 2D 效果时,您可以在该效果的不同实例中改变阴影的柔和度。

  • 当您创建 Mask Effect 2D 效果时,您可以在该效果的不同实例中改变遮罩的大小。

  • 当您创建 Blur Effect 2D 效果时,您可以在该效果的不同实例中改变模糊的程度。

  • 当您创建 Outline Effect 2D 效果时,可以在该效果的不同实例中改变轮廓的颜色。

要自定义效果的实例:

  1. 创建一个效果并设置一个节点来使用它。

    例如,创建一个 Shadow Effect 2D 效果,并设置一个 Image 节点来使用它。请参阅 为二维节点创建阴影效果。

    ../../_images/effect-prefab-property-set.png ../../_images/image-in-preview-w-shadow.png
  2. 在效果中自定义属性:

    1. 在 Library 中,选择您创建的效果。在 Properties 中,在您要自定义的属性旁边,单击 image-publish-property。

      Kanzi Studio 从该属性创建一个自定义属性,将其添加到效果预设的根,并在2D效果中创建一个到该属性的 ##Template 绑定。

      例如,单击 image-publish-property,旁边是 Shadow Blur Radius 属性。Kanzi Studio 创建一个自定义 Shadow Blur Radius 属性,将其添加到根效果预设,并在 Shadow Effect 2D 效果预设中创建一个 ##Template 绑定到自定义 Shadow Blur Radius 属性。

      ../../_images/properties-publish-shadow-blur-radius.png ../../_images/properties-shadow-blur-radius-template-binding.png
    2. 在 Node Tree 或 Prefabs 中,选择使用您创建的效果的 2D 节点。在 Properties 中,点击您自定义的属性旁边的 image-add-property,并设置该属性的值。

      Kanzi Studio 向 2D 节点添加了一个 To Source 绑定,该绑定将该属性的值推送到通过节点的 Node2D.Effect 属性提供的效果实例。

      您可以设置多个 2D 节点以使用相同的效果,并且在每个 2D 节点中,您可以添加和设置属性以具有不同的值。

      例如:在 Properties 中,添加 Shadow Effect 2D Properties > ShadowEffect2D.BlurRadius 属性,并使用它仅在 Image 节点中调整阴影的柔和度。

      ../../_images/properties-shadow-effect-2d-blur-radius.png ../../_images/preview-shadow-effect-2d-blur-radius.png
  3. (可选) 对您要自定义的每个效果属性重复上一步。

    小技巧

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

使用 API 中的 Mask Effect 2D 效果

要创建遮罩效果:

// Create an effect template.
NodeEffectTemplate2DSharedPtr maskEffectTemplate =
    NodeEffectTemplate2D::create(MaskEffect2D::getStaticMetaclass()->getName(), "MaskEffect");

// Set the value of the MaskProperty in the template.
// The MaskProperty defines the mask texture which you must set before you can use the mask effect.
TextureSharedPtr maskTexture = acquireMaskTexture(getDomain());
maskEffectTemplate->addPropertyValue(MaskEffect2D::MaskProperty, Variant(maskTexture));

// Create a mask effect prefab.
NodeEffectPrefab2DSharedPtr maskEffectPrefab =
    NodeEffectPrefab2D::create(getDomain(), "MaskEffect prefab", maskEffectTemplate);

// Assign the mask effect to a 2D node.
node2d->setEffectPrefab(maskEffectPrefab);

// Get the node-specific effect instance created from the assigned prefab.
MaskEffect2DSharedPtr maskEffect = dynamic_pointer_cast<MaskEffect2D>(node2d->getEffect());

// Set the mask stretch mode to uniform.
maskEffect->setStretch(MaskEffect2D::Stretch::Uniform);

有关详细信息,请参阅 MaskEffect2D 类。

另请参阅

2D 节点的效果

使用 Blur Effect 2D 效果

使用 Outline Effect 2D 效果

使用 Shadow Effect 2D 效果

使用多个效果

调整 2D 节点的外观

使用刷子

渲染 (Rendering)