HUD Transitions

On my student game team project, I was the sole UI/UX Designer, so I was in charge of all things UI. After our last semester, we realized that the Flame spirit, Bernie, doesn't get hurt often. Even with more rain, it wasn't happening often so it felt weird that the HUD always showed another version of him to the side. The first thing I needed to do was figure out when the HUD should be showing. Whenever Bernie takes damage we need to know so having the HUD out makes sense. Also when he is off-screen we want to know how he's feeling. Other times might be when his health is extremely low so we can monitor it closely. Now that I know which times the HUD needs to be on screen I had to create the animations. I decided to use an Ease In and Out Back. This way the animation would move slightly further than where it was supposed to go before returning to its proper position. The small squish effect adds a cute factor to the animation as well. If it was completely static in coming in firstly it wouldn't be as noticeable and second, it wouldn't match the rest of the game. The HUD stays on screen for a few seconds before it plays its exit animation and goes away. This lets the player know something happened without being constantly in their face.