【100个Cocos实例】快要圣诞节了，给大家支个招！

引言

Mask遮罩组件的一些简单实例

在游戏开发 中常常需要在UI界面 上展示玩家的头像或者Logo ，通常都会是正方形。

偶尔也会有一些奇形怪状 的需求，例如五边形、六边形、心形等等。

本文将介绍一下在Cocos 游戏开发中Mask遮罩组件 的一些简单实例，实现不同形状的头像。

本文源工程在文末获取，小伙伴们自行前往。

Mask（遮罩）组件

Mask 用于规定子节点可渲染的范围 ，默认带有 Mask 组件的节点会使用该节点的约束框 （也就是属性检查器中 Node 组件的 ContentSize 规定的范围）创建一个矩形渲染遮罩 ，该节点的所有子节点 都会依据这个遮罩进行裁剪 ，遮罩范围外的将不会渲染。

根据概念可以理解，Mask组件具有裁剪功能 。我们先来看看它有几种裁剪方式。

GRAPHICS_RECT，矩形遮罩，这个和我们平时截图类似，只保留矩形框内的内容，矩形框外的不显示。
GRAPHICS_ELLIPSE ，椭圆遮罩，他有一个属性Segments曲线细分数，设置为3 时表现为三角形，依次类推四边形、五边形、六边形、 ... 、圆形(64很圆)。
GRAPHICS_STENCIL ，自定义图形遮罩，设置成这个之后，我们可以在代码里通过Graphics组件绘制自己想要的形状进行裁剪，常用来绘制圆角头像。
SPRITE_STENCIL，自定义图片遮罩，以我们设定的图片作为遮罩的形状，可以通过美术提供的奇形怪状的头像框进行裁剪。

话不多说，一起来做个实例。

Mask遮罩组件的一些简单实例

接下来我们一步一步来 实现Mask遮罩组件 的一些简单实例，实现不同形状的头像。

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

首先准备各种各样 的头像框 和我的头像，不要问我从哪里来，他们的故乡来自互联网。

UI 准备好了准备开搞。Mask组件 只会对它所在节点下的子节点进行裁剪。

3.开始制作

圣诞老人

这里使用了矩形遮罩。

裁剪保留矩形内的(圣诞老人的脸)内容。

排行榜第一

这里使用了椭圆遮罩。其中Segments属性设置为64，表现为圆形。

裁剪保留圆形内的内容。

直观的裁剪效果。

Segments设置为8的效果。

心形、圣诞树

这里使用了自定义图片遮罩。

目标图片为心形和圣诞树。

头像裁剪成图片的形状。

圣诞树上下部分彩色的非裁剪效果，是Sprite 的FILLED效果。

结果如下。

圆角头像

这里使用自定义图形遮罩。

设置之后，添加一个MaskTest组件。

typescript 复制代码

import { _decorator, Component, Graphics, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('MaskTest')
export class MaskTest extends Component {
    start() {
        const graphics = this.getComponent(Graphics);
        // 设置线宽和填充颜色
        graphics.lineWidth = 2;
        // 设置四个角的圆半径
        const cornerRadius = 20;
        // 绘制带有圆角的矩形
        graphics.roundRect(-50, -50, 100, 100, cornerRadius);
        graphics.fill();
    }
}

直接通过roundRect方法绘制圆角矩形。