2D Game Development – User Interface – Heads-Up Display
Day 068 #100DaysOfCode
Day 023 #100DaysOfGameDev
This is something I’ve been looking forward to: making a Health Bar!
The first step was to create a Canvas in Overlay Mode for the UI elements. Overlay Mode will draw all UI elements on top of the game screen at all times.
Next, the graphical elements are added to the UI Canvas and sized appropriately. This involves a few different elements and setting up the proper Parent/Child relationships in the Hierarchy.
A key aspect of placing these elements is also putting the Anchors in the proper spot to allow for proper resizing based on different screen sizes.
The next key element of the Health Bar was the Mask. This hidden component will allow the meter of the Health Bar to be resized to show only the part of the Health Bar that will represent Ruby’s current health.
With the graphic part of this new game element out of the way, it was time to do the coding part which will tell all of this how to work. A new script had to be written, called UIHealthBar, that will handle the functionality of the new Health Bar.
The last piece of the puzzle is to update the RubyController script to call UIHealthBar in ChangeHealth any time she loses or receives health.
And now to see it in action:
