技能冷却3.8

[93418328 (shuishen49)]

效果如下，需要准备一张白色的图片。
不过这个图片系统自带一张

大概是这样的20x20 我整合到资源包里面去了。需要的话自己找一下。
需要设置属性如下。

因为我想要顺时针旋转，然后从12点开始，就只能设置Scale为-1和-1 了。
我是用代码动态生成的，需要的话可以自己改一下。

private createCooldownMask() {
    // 创建 cooldownMask 节点
    this.cooldownMask = new Node('CooldownMask');
    const uiTransform = this.cooldownMask.addComponent(UITransform);
    this.cooldownSprite = this.cooldownMask.addComponent(Sprite);
    const opacity = this.cooldownMask.addComponent(UIOpacity);

    this.cooldownMask.scale = new Vec3(-1, -1);
    // 设置 cooldownMask 节点的属性
    const iconTransform = this.iconode.getComponent(UITransform);
   //下面这行代码替换成你自己的图片资源。我是用的单例模式加载图片
    this.cooldownSprite.spriteFrame = ImageManager.getInstance().getSpriteFrame('cooldown'); // 确保你有一个圆形的遮罩图像
    // 调整 cooldownMask 的大小以匹配 iconode
    uiTransform.setContentSize(iconTransform.contentSize);
    this.cooldownSprite.type = Sprite.Type.FILLED;
    this.cooldownSprite.fillType = Sprite.FillType.RADIAL;
    this.cooldownSprite.fillCenter = new Vec2(0.5, 0.5);
    this.cooldownSprite.fillStart = 0.75; // 设置从12点方向开始
    this.cooldownSprite.fillRange = 0;
    this.cooldownSprite.color = new Color(255, 255, 255, 150); // 半透明

    opacity.opacity = 255; // 初始时全不透明

    // 设置 Layer 为 UI_2D
    this.cooldownMask.layer = Layers.Enum.UI_2D;

    // 将 cooldownMask 节点添加到 iconode 节点中
    this.cooldownMask.setParent(this.iconode);

    // 确保 cooldownMask 的大小与 iconode 一样大
    this.cooldownMask.setPosition(0, 0);
}

动态生成一个mask的节点。只需要执行一次。就行了。我把他写在start里面调用了。
点击之后执行的代码。

private startCooldown(duration: number) {
    const button = this.node.getComponent(Button);
    if (button) {
        button.interactable = false; // 禁用按钮
    }

    if (this.cooldownSprite) {
        this.cooldownSprite.fillRange = 1;
        tween(this.cooldownSprite)
            .to(duration, { fillRange: 0 }) // 通过动画控制冷却效果
            .call(() => {
                if (button) {
                    button.interactable = true; // 启用按钮
                }
            })
            .start();
    }
}

抖音小游戏贪吃的方块上架了 ，欢迎大家来玩啊。请用抖音扫一扫。