CocosCreator implements skill cooling effect

CocosCreator realizes skill CD effect

There are skills in many games. After the player clicks the skill button, the skill will have a cooldown time. After the cooldown time is over, the skill can be used again.

It is very simple to achieve this effect in Cocos. You need to use the sprite component. First, drag the image of the skill button to the canvas.

Then create a new label under the skill button
Like this

Then create a new TS script and copy and paste the following code into it

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Sprite)
    skill:cc.Sprite = null; //Skill sprite @property(cc.Label)
    time_label:cc.Label = null; //Show the text of the remaining time of skill cooling @property
    time:number = 3; //Skill cooling time @property
    isshow_label:boolean = true; //Whether to display text onLoad(){
        this.skill.fillRange = 1; //When the game starts, the skill fill range is 1
    }

    update(dt:number){
        if(this.skill.fillRange != 1){//If the skill wizard's fill is not 1, it means that the skill has been usedthis.skill.fillRange += dt / this.time;//The value restored per frame for the skill is frame rate / skill cooldown timethis.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//Update the remaining time of the skill per frame//The remaining time of the skill is first 1 - the filling degree of the skill wizard and then * the skill cooldown time, and finally Math.floor roundedif(this.isshow_label == true){//If the text can be displayedthis.time_label.node.active = true;//Show the remaining time of the skill cooldown} }
        if(this.skill.fillRange == 1){//If the skill sprite's fill is 1, it means the skill has not been used yet this.skill.getComponent(cc.Button).interactable = true;//Start button this.time_label.node.active = false;//Hide the remaining time of skill cooldown}
    }

    onbtn(){//Event when the skill button is pressed this.skill.fillRange = 0;//Skill fill range is set to 0
        console.log("Skills used"); //Print log
        this.skill.getComponent(cc.Button).interactable = false; //disable button}

}

I have written detailed comments for each line of code.

Hang the written script on the skill button and bind the node

Can be modified as needed

• Time is the cooldown time of the skill, you can change it as you like
• Isshow_time is whether to display the text of the remaining cooldown time. If you don't want the text to be displayed, uncheck it. The default is to display

Writing code is not enough. You also need to do some settings for the skill button. You need to modify the sprite component and add a button component to the skill button.

Adjust according to the picture

1. Type needs to change the sprite's rendering mode to fill
2. Fill Type changes the filling method to fan-shaped filling
3. Fill Center changes the center point of the sector. 0,0 is the lower left corner and 1,1 is the upper right corner. We want the sector to fill around the center point, so change it to 0.5,0.5
4. Fill Range changes the total fill amount to 1

Finally, add the button component to the skill button

The bound event is onbtn. To make it look better, change the Transition of the button component to COLOR.

You're done. Click Run to see it.

Really good

When you click the skill button, just put the code in onbtn.

Just put it in here

For example, you can play a special effect animation when you press a skill button

The above is the details of how CocosCreator implements the skill cooling effect. For more information about CocosCreator skill cooling, please pay attention to other related articles on 123WORDPRESS.COM!