After E-Jay got the health for the player and enemies fully working for the playtest, we recieved feedback that we need a visual health meter implemented. As players were testing, they didn’t have a visual to reference to see what health they are currently, which made the game frustrating for many. Having a health UI is compulsory for good game design and user experience.
Research + Planning
As I had never created a heart display in Unity, I had to do some research to aid me. I knew it was a relatively easy thing to produce so I didn’t need much to understand what to do.
After looking at research, I knew that I needed to have the heart visuals completed to code effectively. Click here to view how I made the assets. I also knew that I would need a canvas within the scene to place my assets onto, these would then be linked to the heartdisplay code and then would be referenced to within the player character.
Production
I started off by creating a canvas and implementing the right settings to make it display correctly on any monitor size. This is what I will do for every canvas I will make in the future as well.
I then imported the heart assets: full and empty heart, and placed them as children in the canvas I just made.
I had an issue with the canvas not appearing with the camera, even though I set it up correctly, I changed the viewing mode from 2D to 3D to explore further. The Z-pos of my canvas was set behind the scene by default, so I had to move it in front of the environment, closer to the camera.
After setting up the visuals for this mechanic, I had to begin coding for it to actually function and display the current health of the player.
This is the heart display code. This makes the logic for how the hearts will be changed from empty to full. I created variables for health and maxhealth which will link to the player. I also added the different sprite types for me to assign the right asset for them. I referred to these within my code to update as well. I referenced the player health script E-Jay made so that it will update the actual health integer of the player. In the update method, I made it so it defaults to the empty heart and changes with the player health. If a change higher than 0 is detected then it will fill up the heart bar accordingly.
This is the alteration I made to the Player Health script to allow for linkage between the two separate scripts. This was done in the update method as it needs to be checked constantly. I is set to 0 by default, if its detected to go over 0 then it will change and enable the hearts to show. The I in question relates to the player health.
I also had to go into the player health again to link the movement of the player and renderer to the heart display system as well. This will make it so that when the player dies, they wont be able to move and will become invisible. This isn’t something to do specifically with the heart display but is still vital in making the player death state better.
After coding it all, I had to link everything together and assign the right assets to the inspector for both the display and the player health. I added the heart display code to the player object as well.
Personal + Team Review
My team liked the heart UI and complimented, they did find that it wasn’t scaling properly, it didn’t save my canvas change. I found this alright but I did find a bug where when the player dies sometimes it ‘slides’ across instead of becoming stationary. E-Jay said he will take a look at it and fix it up.