Made With Unity | DOTween: DOFillAmount()

5 min readOct 21, 2022

Let me share a different approach for a cooldown effect using UI Image fill type and DOTween.

What is DOTween?

DOTween is a fast, efficient, fully type-safe object-oriented animation engine for Unity, optimized for C# users, free and open-source, with tons of advanced features.

Using DOTween we can have smooth animation without the need to use the Update function or Corotines; I’m not saying that there bad BUT for a simple animation DOTween is a friendly approach.

Getting DOTween

First, go to the Unity asset store, look for DOTween free version, and add it to your account.

Go to Package Manager, under Packages: My Assets, search for DOTween, and press Import.

On the next window press import again. Once it has finished downloading the package you will follow the instruction EXACTLY as the DOTween window tell you. Close and reopen your Unity project, without closing on the DOTween Imported window, once you open the project again press Open DOTween Utility Panel.

Press Setup DOTween in the DOTween Utility Panel. If by any chance you can’t find the window, go to Tools->Demigiant->DOTween Utility Panel

Check that all the following checkmarks are in place and hit Apply

What Do We Have On The Unity Project?

On the Project window, we have the scripts and a black square sprite (225x225)

The Hierarchy window has a UI Canvas, in it, we have 3 Game Objects that have the following: a UI Image that has a solid color, a second UI Image that we will use for the fill effect, and a Text Mesh Pro object to hold the instruction as shown on the image below.

The UI Image, redCooldowndfill_img, has the Black Square sprite as is Source Image. Notice the Image Type is selected as Filled, this will allow us to set how the image is shown. Make sure the Transparency (A) from the Color is set to 128.

Scripts

PowerUps

The PowerUps script is just an Enum list, essential for this article.

PlayerInputs

This script holds 3 Keyboard Inputs that will activate the “power-ups” and initiate our cooldown. On line 9 I’m using an Action to send the selected PowerUp from the Enum list and whoever is listening for the Action will execute the necessary behavior.

PowerUpManager

The PowerUpManager will control how the Power Up will behave, in this scenario will start the cooldown process. Like it is shown in line 5, we need to add the namespace using DG.Tweening to start using DOTween in our script. Since I am using an Action when pressing my keyboard I will add the OnEnable method (line 20) and OnDisable method (line 47) to make my script “hear” when the Action is being used.

Final Steps

To make the fill effect will be using DOFillAmount, from DOTween documentation, this is only used on the UI Images when the type is selected as Filled.

Back to the Hierarchy, add the PowerUPManager script to a Game Object inside the UI Canvas and place the UI Image of type Filled to the expose Fill Image field on the script.

Attach the PlayerInputs script to an Empty Game Object, on the picture mine is called Inputs.

What Is Happening?

When I press on any of my Keyboard inputs to “activate” my power-up, my method CheckPowerUpStatus() will be called and initiate the cooldown.

The cooldown will start, line 36, and the image will receive a fill amount of 1 to make the image go black.

On line 40, we use DOFillAmount to go from 1 to 0 or 1 to 0 and how long is going to last. When the tween is finished we use the OnComplete() to tell it what to do next