In this recipe, we will discover how to animate the hearts of the symbolic lives counter made in the second chapter. In fact, we will use an Animator controller to handle the animation and use the Animation window to animate them. Also, we want to make all the hearts beat. As a result, the UI will be more dynamic and immersive.
- You might remember that when we attached the script created in the Creating a symbolic lives counter recipe in Chapter 2, Implementing Counters and Health Bars, we needed to assign different images (in this case, hearts) in the Inspector. Now select one of them, for instance, Heart1, and then open the Animation window.
- Click on Add Property, and Unity will ask you to choose a folder in which you want to save your animation and a name. Just choose one and click on Save.
- Next, we should notice that Unity has added an Animator component to our image and filled the controller variable with a controller named Heart1. We can rename it to HeartAnimationController. If we open the controller by double-clicking on it, we should see in the Animator window that we have a node with the name that we gave to the animation.
- Now, it should already be in record mode. Put the red bar at the zeroth key frame and set the scale of the image to 1 for both the x axis and the y axis. In this way, Heart1 starts with the normal scale.
- Next, move the red bar to half second, if the samples are 60, this means the thirtieth key frame. Change the scale to 1.2, on both the x and y axes. Therefore, in this case, we are going to enlarge the heart a little so that we can simulate a beat.
- Finally, move the red bar to one second, again at 60 samples (which means at the sixtieth key frame). Now we have to conclude the heartbeat animation, so we set the scale back to 1, on both the x and y axes.
- After this, we need to interrupt the recording. To do this, just click on the red Rec button in the Animation window.
- Finally, if we have already set up all the other images to interact with SymbolicLivesCounterScript, we select all of them except the first one, which we have already animated. In the Inspector, go to Add Component | Miscellaneous | Animator.
- Now, we find the controller that we created indirectly when Unity asked us to save the animation file. It is in the same folder. Drag it into the Controller variable in the Inspector.
- Finally, you can click on the play button and see all the hearts animated.
We used an Animator with a controller to handle all the animations. In fact, when the game starts, the controller triggers the only animation available, and since it is set as a loop, Unity reproduces it consequently. Each heart has the same controller, so all of them are animated in the same way. When SymbolicLivesCounterScript handles the hearts in order to make them appear and disappear respectively if the player gains a life or loses it, it doesn't change the animation, and so our symbolic lives counter has an animation in our UI.