3D FPS Survival Game
Adding a functional HUD
Time to add an functional HUD to our FPS game. The HUD should include several important information that is standard within all FPS games. This includes the Health, selected weapon and total amount of weapon ammo.
HUD prep:
First we are going to draw the HUD within our own preferred program. In this situation I will be using what I am most familiar with, which Adobe Illustrator.
Since most FPS HUD need quick to understand layout and also the more simplified the design the better the player feedbacks are. We will be designing our HUD in a very basic yet effective design.
I created two diamond shaped boxes with simple icons within the center, each representing “Health and Ammo Count” Then I have two extrusions from the ammo icon that inform the remaining Clip count and a quick icon of the type of weapon that is currently active.
Once you are satisfied with your design we are going to save and import this HUD image into Unity.
tip: it is best when saving to save each individual section of the UI to be separate images, so when you are slicing within Unity, it becomes much more easier.
In Unity, after slicing the images, we are going to create a new canvas component if you haven’t created one before. Then we are going to create three empty game objects, “Health UI, Ammo UI, and Ammo Clip UI”.
Within each individual UI folder we are going to add in the “image components” and rearranged each UI element to form exactly what we designed in Illustrator.
Making the Bars into a Fill Gauge:
What we want now is to setup the main fill gauge as a Radial 360 image. That way we can control how to fill gauge is going to look. By setting it up like so, and having the fill origin at the Right and in a Clockwise setting, it should look like the health gauge is being depleted in a circle.
We can do the same with the ammo fill as well, but this time we are going to uncheck “Clockwise” and make the Fill Origin starting from the left.
Next we are going to add the “Slider Component” within the parent object of these fill. We are going to add one for the Health UI and also the Ammo UI. Then we are going to follow the settings that I have on the the bottom image. We are going to drag and drop the Fill Rect with our corresponding Fill gauge.
The UI Manager:
To script everything together, first we need to create a brand new “UI Manager script.” This script will be set to an “Instance” which will let all available scripts have direct access to this UI Manager script.
Next we are going to gain access to the Unity UI library by using the Unity Engine dot UI.
Using the UI library will gives us the ability to use Text elements, which our HUD has. Now we need to create some local variables to our UI elements such as the health slider, health text, ammo slider and ammo text.
Next we want to convert the Health text to the health bar slider value and same with the ammo text. We do this with the Update method.
Finally we are going to create some public methods which other scripts are going to call upon when the conditions are right.
These public methods are basically setting the value of the slider to the actual value of what the player and ammo count actually is in real time.
Since the UI manager is an instance class, we are able to gain access to this script directly without doing any script communication. For example in the shooting script where the total bullets are being subtracted, I can access the UI manager right below to set the total bullets left and this will update to the UI instantly.
We can do the exact same with the player health whenever we get damaged from zombies.
