cocosCreator创建圆形遮罩Mask

要将方形图片显示成圆形，你可以使用Cocos Creator和TypeScript来创建一个自定义的圆形遮罩（mask）。以下是实现这个效果的步骤：

  1. 在Cocos Creator中创建一个新的Canvas节点，然后在Canvas节点下创建一个Sprite节点，将你的方形图片（或任何你想要显示成圆形的图片）添加到Sprite组件中。
  2. 在Canvas节点下创建一个新的Node节点，用于作为遮罩。你可以将这个节点命名为”Mask”。
  3. 将Mask节点的ContentSize设置为与你的图片相同的大小，以确保遮罩大小与图片大小相匹配。
  4. 在Mask节点上添加一个Graphics组件。这个组件将用于绘制圆形遮罩。
  5. 创建一个脚本文件（.ts），并将其附加到Mask节点上。然后，在脚本中编写以下代码来绘制一个圆形遮罩：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { _decorator, Component, color,Graphics, Size, UITransform } from "cc";

const { ccclass, property } = _decorator;

@ccclass("MaskCircle")
export class MaskCircle extends Component {
    @property(Graphics)
    maskGraphics: Graphics = null!;

    start() {
        this.drawCircleMask();
    }

    drawCircleMask() {
        // 获取Graphics组件
        const graphics: Graphics = this.maskGraphics;
        // 清除已有的绘制
        graphics.clear();
        // 绘制一个圆形遮罩
        graphics.fillColor = color(255, 255, 255, 255); // 可以根据需要设置颜色
        graphics.circle(0,0, this.node.getComponent(UITransform).width / 2);
        graphics.fill();
    }
}

  1. 回到Cocos Creator编辑器，在Mask节点的Inspector面板中，将MaskCircle组件的maskGraphics字段拖动到Graphics组件上，以便将它们关联起来。
  2. 确保Mask节点与你的图片节点重叠，然后将图片节点的父节点设置为Mask节点，以便图片受到遮罩的影响。
  3. 运行你的游戏，你将看到图片被显示为圆形。

通过这些步骤，你可以使用Cocos Creator和TypeScript将方形图片显示成圆形。请确保调整遮罩节点的大小以匹配你的图片大小，并根据需要自定义遮罩的颜色和形状。