#100DaysOfCode #100DaysOfGameDev C#Coding Game Dev Script-writing Training Unity

2D Game Development – User Interface – Heads-Up Display

January 27, 2020January 27, 2020 sinwyrm

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 new UIHealthBar script which tells the Health Bar how to function

The last piece of the puzzle is to update the RubyController script to call UIHealthBar in ChangeHealth any time she loses or receives health.