【CocosCreator入门】CocosCreator组件 | Mask（遮罩）组件

        Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中Mask组件可用于创建如圆形、矩形和任意形状的遮罩效果，以限制节点显示的范围。这对于创建具有复杂布局的UI元素非常有用，例如只显示图片的一部分或控制文本显示的区域。

---

        使用Mask组件，我们可以实现很多有趣的效果。例如，我们可以创建一个圆形的遮罩来显示头像，或者创建一个矩形的遮罩来显示进度条。此外，Mask组件还可以与其他组件一起使用，例如Sprite组件或Label组件，以创建更加复杂的效果。

一、组件属性

属性	功能说明
Type	遮罩类型。包括 RECT、ELLIPSE、IMAGE_STENCIL 三种类型
Inverted	布尔值，反向遮罩
Alpha Threshold	Alpha 阈值，该属性为浮点类型，仅在 Type 设为 IMAGE_STENCIL 时才生效。 只有当模板像素的 alpha 值大于该值时，才会绘制内容。 该属性的取值范围是 0 ~ 1，1 表示完全禁用。
Sprite Frame	遮罩所需要的贴图，只在遮罩类型设为 IMAGE_STENCIL 时生效
Segements	椭圆遮罩的曲线细分数，只在遮罩类型设为 ELLIPSE 时生效

二、组件使用

• 添加Mask组件；在编辑器中，选中需要添加掩膜的节点，然后在属性检查器中点击“添加组件”按钮，选择“Mask”组件。
• 设置Mask属性；在Mask组件的属性面板中设置Type、Inverted、Segments和SpriteFrame等属性。
• 添加子节点；添加需要被裁剪的子节点，将其放置在父节点下，并将其移动到Mask组件上。
• 预览效果；在场景编辑器中预览裁剪效果。可以看到，子节点只能在Mask覆盖的区域内可见。

三、脚本示例

// 获取节点上的Mask组件
let maskComponent = node.getComponent(cc.Mask);

// 设置遮罩模式
maskComponent.type = cc.Mask.Type.RECT; // 矩形遮罩
maskComponent.type = cc.Mask.Type.ELLIPSE; // 椭圆形遮罩

// 设置遮罩图片
maskComponent.spriteFrame = new cc.SpriteFrame(texture);

// 设置是否反转遮罩效果
maskComponent.inverted = false; // 默认情况下，遮罩之外的区域会被隐藏，设置inverted为true则相反。

// 设置遮罩的缩放、旋转、位移等属性
maskComponent.node.scale = 2;
maskComponent.node.rotation = 45;
maskComponent.node.position = cc.v2(100, 100);

---

        总之，Mask 组件是一个可用于创建遮罩效果的 UI 组件。它可以将节点设置为遮罩节点，并在遮罩节点上绘制不透明的形状，从而控制该节点的可见区域。使用 Mask 组件，可以实现各种遮罩效果，例如圆形遮罩、矩形遮罩和文本遮罩等。此外，Mask 组件还支持嵌套使用，允许创建复杂的遮罩层次结构。在 Cocos Creator 中，Mask 组件通常与其他组件一起使用，例如 Sprite、Label 和 Layout 等，以创建具有各种遮罩效果的 UI 元素。