cocos creator 3.8 实现技能冷却倒计时

cocos creator相关教程资源比较老也比较少,在掘金记录学习遇到的问题

话不多说,直接操作

这是我的结构,QWER四个精灵分别对应UIOP四个按键,其中子节点

• U就是右上角的按键提示
• Bg是背景图片
• Mesk是黑色遮罩
• Time是倒计时

最主要的就是Mesk节点

Sprite Frame设置为默认的圆形ui,type为可填充,fill type为扇形,中心点居中方位,从12点钟方向开始,fill range设置为0

    _changeSkillStateByName(name: string) {
        const skill = this.skill.getChildByName(name);
        const sprite = skill.getChildByName("Bg").getComponent(Sprite)
        if (sprite.grayscale) {
            return;
        }
        const label = skill.getChildByName("Time").getComponent(Label)
        sprite.grayscale = true;
        const mesk = skill.getChildByName("Mesk").getComponent(Sprite);
        mesk.fillRange = 1;
        tween(mesk).to(6, { fillRange: 0 }, {
            onUpdate(tag: object, dat: number) {
                label.string = 6 - Math.floor(6 * dat) + ""
            }
        }).call(() => {
            sprite.grayscale = false;
            label.string = "";
        }).start();
    }

这是主要代码,接收一个节点名字,即QWER,this.skill是

脚本拖进去的
获取到具体的技能节点,比如Q,然后将背景图片变为灰色grayscale,记得判断一下是否技能已经在cd,即grayscale为true
然后分别获取Mesk Time节点
先设置fillRange初始值从1开始,运动到0,使用tween进行缓慢运动,然后在onUpdate中改变Time的Label组件的内容,最后在运动结束,即call回调中将状态清空即可