feat: 完善关卡

assets/scripts/utils/RoundedRectMask.ts

@@ -0,0 +1,111 @@
+import { _decorator, Component, UITransform, Graphics, Color, Mask } from 'cc';
+const { ccclass, property } = _decorator;
+
+/**
+ * 圆角矩形遮罩组件
+ * 使用 Graphics + Mask 绘制圆角矩形作为遮罩
+ *
+ * 使用方法：
+ * 1. 将此组件添加到需要圆角的节点上
+ * 2. 设置圆角半径
+ * 3. 该节点及其子节点会被裁剪为圆角矩形
+ */
+@ccclass('RoundedRectMask')
+export class RoundedRectMask extends Component {
+
+    @property({
+        tooltip: '圆角半径（像素）'
+    })
+    radius: number = 20;
+
+    private _graphics: Graphics | null = null;
+    private _mask: Mask | null = null;
+    private _uiTransform: UITransform | null = null;
+
+    onLoad() {
+        this._uiTransform = this.getComponent(UITransform);
+        this.setupComponents();
+    }
+
+    /**
+     * 设置组件
+     */
+    private setupComponents() {
+        // 获取或添加 Graphics 组件
+        this._graphics = this.getComponent(Graphics);
+        if (!this._graphics) {
+            this._graphics = this.addComponent(Graphics);
+        }
+
+        // 获取或添加 Mask 组件
+        this._mask = this.getComponent(Mask);
+        if (!this._mask) {
+            this._mask = this.addComponent(Mask);
+        }
+
+        // 设置 Mask 使用 Graphics 类型
+        this._mask.type = Mask.Type.GRAPHICS_STENCIL;
+
+        this.drawRoundedRect();
+    }
+
+    /**
+     * 绘制圆角矩形
+     */
+    private drawRoundedRect() {
+        if (!this._graphics || !this._uiTransform) return;
+
+        const width = this._uiTransform.width;
+        const height = this._uiTransform.height;
+        const r = Math.min(this.radius, Math.min(width, height) / 2);
+
+        // 清除之前的绘制
+        this._graphics.clear();
+
+        // 设置填充颜色
+        this._graphics.fillColor = new Color(255, 255, 255, 255);
+
+        // 绘制圆角矩形路径
+        const halfW = width / 2;
+        const halfH = height / 2;
+
+        // 使用 lineTo 和 arc 绘制圆角矩形
+        // 从左下角开始，逆时针绘制
+        this._graphics.moveTo(-halfW + r, -halfH);
+
+        // 下边
+        this._graphics.lineTo(halfW - r, -halfH);
+
+        // 右下角圆角 (90度弧，从 -90度 到 0度)
+        this._graphics.arc(halfW - r, -halfH + r, r, -Math.PI / 2, 0, false);
+
+        // 右边
+        this._graphics.lineTo(halfW, halfH - r);
+
+        // 右上角圆角 (90度弧，从 0度 到 90度)
+        this._graphics.arc(halfW - r, halfH - r, r, 0, Math.PI / 2, false);
+
+        // 上边
+        this._graphics.lineTo(-halfW + r, halfH);
+
+        // 左上角圆角 (90度弧，从 90度 到 180度)
+        this._graphics.arc(-halfW + r, halfH - r, r, Math.PI / 2, Math.PI, false);
+
+        // 左边
+        this._graphics.lineTo(-halfW, -halfH + r);
+
+        // 左下角圆角 (90度弧，从 180度 到 270度)
+        this._graphics.arc(-halfW + r, -halfH + r, r, Math.PI, Math.PI * 1.5, false);
+
+        // 填充
+        this._graphics.fill();
+    }
+
+    /**
+     * 设置圆角半径
+     */
+    setRadius(radius: number) {
+        this.radius = radius;
+        this.drawRoundedRect();
+    }
+}