Creating a Status Bar with Ammo Count & Thruster Percentage

In this article I am going to go over how to create a general status bar with fraction and percentage text.

Since the Ammo Bar it going to be part of the UI, we will need to add an empty GameObject to the Canvas and rename it AmmoBar. We will need a text and two image objects that are parented to the AmmoBar.

I created a Status Bar outline and fill in Aesprite and imported them into Unity. Once in Unity, we can put the fill png into the Fill Image in the Canvas and the outline png into the Outline Image in the Canvas.

In the Fill Image we can change the Image Type in to Filled and this will allow us to make work like a slider. Also, we can change the color of the fill and outline since the images that we were imported were white.

Let’s create a script for the AmmoBar. We will need use of the UI library, so we will declared this by stating using UnityEngine.UI. Now, we need a few variables to two will be UI that need to have a serialized field attribute, so we can assign them in the Inspector and they will be an Image that will be our fill image and a Text, which will be our ammo count text.

Next, we need two in variables that will store the current value of the status bar and max value of the status bar. Lastly, we need to get a handle on the Player script since that is the script that will be updating before the ammo count and thruster percentage.

In the OnStart we will find the Player GameObject, get the Player component and assign it to the variable. Since we made the fill Image type Filled, the scale of the fill goes from 0–1, so we will set the fill amount to 1 to normalize it. This is helpful since it will make the conversion of our ammo count which is out of 15 and thruster percentage which is out of 100.

For the current value of the status bar we will set it to the max ammo or thruster of the player and do the same for max value of the status bar. For the ammo count text we will pass in the current value over the max value.

For the thruster bar, everything has been the same except for the thruster count text we will pass in the current value plus the percentage sign.

A public method is going to be needed with a int parameter that will be the amount used, so we can call it from the player script when we either shoot or use the thrusters. We will set the current value of the status bar to minus the amount pass in. We will need to perform a check to see if the current value goes below zero and if it does set it back to 0.

After that, we need to updated the fill amount by dividing the current value of the status bar by the max value. We will need to return a float since this number will most likely be one. Finally, we need to updated the ammo count text, so we can copy and paste the same line from the OnStart.

Jumping into the Player script since we will call this method from there, we will need to get a handle on the Ammo Bar so we can get access to the method we created. We give a serialized field attribute so we can assign the ammo bar in the Inspector.

Now that we have access to the status bar script we can call the UseAmmo or UseThurster methods wherever a shot is being taken or thrusters being used. Also, pass in the amount you want to use.

We have the use of the status bar, but we need to refill it and this is different for the ammo bar and thruster bar since the thruster bar is regenerative. You can check out my earlier article that goes over the regenerative status bar below. All you need to do is update the thruster text every time it is regenerating.

The Reload Ammo method is pretty simple as we just set the current value to max value, updated the fill and text.

In the player script, we just call this method whenever we need it.