Recording UI animations in Unity

Objective: Create UI animation that plays when the player collects the tripleshot prefab

I want to let the player know how long they have left to fire the tripleshot laser once it has been picked up, so I decided to make a UI pop up that counts down the time left.

You can see the end result above. Here’s how I achieved it.

I selected my Player object in the scene and found the canvas that I already have. If you do not have a canvas on the player then you should right-click the player and add a UI -> canvas.

Create an empty game object on the canvas, I called my Time. I then created 5 text objects as children and changed the names and text to show, 5, 4, 3, 2, 1.

On the Time gameObject I created a script called TShotTimer. I then created 4 public variables, offset, animator, player position and textcontainer position.

The offset is to allow me to adjust the position of the text once it is displayed on the screen. The Animator allows me access to the animations, the two game objects are for the textcontainer and the playerposition.

Now I need to create the animation that is going to play once the tripleshot is activated.

I clicked on the Time object and then opened the animation window. I created an idle animation. Here is how:

Hit the little red record button in the animation window.

With the animation named idle, I started recording and then turned off all of the text numbered gameobjects called, 5,4,3,2,1. So, when the idle animation is running all the text will be off.

Now hit stop recording. That is the idle animation completed.

Now for the countdown animation. For this I needed to create a new animation clip. You click the down arrow by your current animation name and select create new clip.

Now hit record again and make sure you have the first frame of the animation selected. Now select the 5 text object and turn it on. Now move to the 1 second mark in the animation and in the frames. Now turn off 5 and turn on 4, and now repeat the process for the rest of the countdown. Once you get to 1 being turned off you can click stop recording.

You can click the play button to see the animation play in your scene view.

Now for the set up of the animation controller. With the Time object selected open up the animator window. This will show you the following screen.

I want the idle animation to play first. So make that animation the default state. You can do this by right-clicking and set to default state. The default state is shown in orange. I now want a transition to and from the countdown animation.

Right-click the idle animation and make transition to the countdown and make another transition back.

Now I need a parameter that will control when the animations are played. I created a trigger parameter called: tShotActive. Now click the transition from idle to countdown. In the inspector you will see the following:

First make sure that has exit time is unticked as I don’t want to wait for the previous animation to complete. The make sure the duration of the change is set to 0. Now I need to set the conditions. click the plus button at the button and it will auto add the trigger.

Now for the transition back to idle, click the transition line and you will see the following:

This is very similar to the last one but we’re changing back to the idle state.

I created a public method in the script created at the start and this allows me to control the animation for activation and deactivation. I do this by just setting the trigger of the animation. This will automatically change from it’s current value to the opposite value. If it is current false it will now set to true and the opposite.

All I need to now do is get a reference to the script component in the player where I handle the triple shot and then call the respective methods.

I also need to set up the position of the animation so that it appears on the canvas in the right place and in the 2D space.

Be sure to set up all of the public variables and game objects to make sure you are using the right animator and positions.

I have an offset of 0,1,0 which means the text will appear up 1 in the y axis.

Thank you for reading and come back for more Unity game development.