1 Introduction
Skill cooldown is a common mechanism in games that limits the frequency with which players can continuously use a skill. In Unity, you can use the Filled option of the Image component to quickly achieve this effect
2 solutions
1 Make a mask
"Create Image"
Create an Image with the texture of the target object, set its level to the upper layer of the target object, change the color to black, and set the appropriate transparency
"Modify Image Properties"
-
Image Type: Filled
-
Displays the sprite in the same way as Simple, except that it is filled starting from the origin using the defined direction, method, and amount
-
Fill Method: Radial 360
-
Fill method
-
Fill Origin: Top
-
fill starting position
-
Fill Amount: filling amount
-
Script dynamic control
-
Clockwise: Unchecked
-
When the filling amount goes from 0 to 1, is it filled clockwise or counterclockwise?
The final style is as follows:
2 Add animation
After modifying the properties of Image, you still need to write a script to dynamically control the fillAmount property so that the cooling effect can really move.
There are generally two ways to calculate the fillAmount property:
-
Calculate the time yourself through Update in the component life cycle to achieve smooth transition
-
Implement tween animation through DOTween
It is more recommended to use DOTween here, which will make the code simpler and easier to maintain.
float totalTime = 5f;
float duration = 5f;
DOTween.To(() => duration,
value => { this.imgMask.fillAmount = value / totalTime; },
0,
duration);
