Health Bars, The Good, The Bad, and The Missing Options

Author: Marie Halper 

Posted on 5/29/2024

This week, I decided to tackle something we have not really touched so far while setting up the basis for our game, the UI. It goes without saying that a lot goes into UI, but the biggest thing that people think of with UI is of course, health bars. Naturally, I started off by making an image that would represent the player's health bar, but the question was, how do I make it change based on the player's health? After doing some investigation, also known as looking at previous assignments to see how it was done there. Checking there gave me insight onto a few things, including telling me that I have already made some mistakes! That mistake being that the health bar is actually made up of two images: the parent image, which is the background to the health bar, and the child image, the actual bar itself. I thought that was all nice and dandy, so after making an enemy health bar as well, I proceeded to actually look into how to code a health bar.

I quickly realized that before I could code anything for the health bars, I needed to make variables for them within the game manager script, so they could be recognized. So here's to two more variables in the UI section of the game manager



After getting them to recognize within the code, I needed to find what code actually makes them work. It did not take much research to find the .fillAmount property, so in the methods for taking damage, I made the respective health bars update with the current and max HP.

I thought that I had gotten everything set and working, so I decided to test my work so far. I ran the program, and told my card to attack, but to my surprise, neither health bar had moved! If only one did not move I would have understood that I just made a typo or something in one of the methods, but both? It was time for some investigation. The first glaring issue was that I was getting an error that I had not set the proper variables. So it turns out I was but a fool, I forgot to actually set the health bar variables in the script to be the ones in the scene. I quickly fixed that issue and thought, "surely it was just that, it will work now, there were no other errors!" Oh how naive I was. Attempt number 2, no errors this time, but still no change in the bars. I went back to my old projects to see if I had forgotten some code. Nope, was not a code issue. Maybe it was something with the images themselves? I was doubtful but I was not sure where else to check. After cross examining my health bars with the ones from previous assignments, I realized an issue with my child health bars, they had no image type options like the others did. I looked high and low within Unity for a way to expand the menu to give me the missing options, but I got nothing. Finally, I did what any confused developer does, I consulted Google. From a quick search, I had concluded that I had overlooked another small detail when creating the health bars. When creating them, I did not make images for either the bars, or the backgrounds. I tried making some generic images that fit the original dimensions, and added them to the project. Upon setting them, the missing options appeared! Which let me properly set the child bars to have the fill property.

I tested the project one final time, in hope that I had finally figured out my issues, and thankfully, they were working now! When taking damage, the player and enemy health bars both updated accurately!