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

news2024/11/15 2:14:56

圣诞节头像？圣诞树头像？就这？

引言

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.开始制作

圣诞老人

井沟bell井沟bell

这里使用了矩形遮罩。

矩形遮罩

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

看脸的时代

排行榜第一

南波万

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

椭圆遮罩

裁剪保留圆形内的内容。

方圆之内

直观的裁剪效果。

Segments设置为8的效果。

被岁月磨去了棱角

心形、圣诞树

只能帮大家到这里了

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

自定义图片遮罩

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

拿去不谢

头像裁剪成图片的形状。

连头像都是爱你的形状

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

节目效果，请勿当真

结果如下。

差点信了

圆角头像

不划手

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

自定义图形遮罩

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

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();
    }
}