Health Bar shown on screen

Coding
#1

Hi there,

I am creating an escape room and is wondering on how to create an health bar, where you loose health slowly. This health bar will be shown on the players screen.

I hope someone could help me,
Thank you,
Have a good day
Emma

#2

Hi @Emmalyn_Rotter,

It’s a little tricky, and there are several concepts you will need to understand:

  1. Camera View Mode - click the Camera and press F on your keyboard to jump in and out of the camera. This is important for positioning various parts of your HUD (Heads-Up Display).

  2. Scaling - you will need your HUD to be really small and really close to the Camera, so it doesn’t get covered up by other items in the scene. If you double-click on your HUD item to bring up the Object Inspector, click Transform and then you can manually transform the Scale down as low as 0.01

  3. Parent-child attachment - in the Scene Inspector (top left tab), which displays a list of all the objects in your scene, you will need to drag your HUD item (child) onto your Camera (parent) so that it becomes attached to the Camera.

That is your basic HUD setup.

To make a health bar also requires coding with Typescript and an understanding of variables, so that you can transform the length of your bar based on health status. I have created a basic demo below:

Hope this helps. Let me know if you have any further questions. If this solves your problem, please mark this post as the Solution.

Many thanks,
Geoff @ TechLeap

2 Likes
I need help creating a hud
#3

Wow @techleapnz thats awesome!, did not know typescript allowed for partial transformations. I intregrated your code with coblocks (since I’m not particularly well voiced in typescript); This way I can use a coBlock variable for health and using linear interpolation adjust the healthbar to the correct size. I made a little game with it using a spawning system I had built before. Many thanks!

2 Likes
#4

Hi @techleapnz,

Thank you so much for replying so quickly. This health bar setup worked really well for my Escape room however, I do not really know how to use typescript very well. So I was wondering if you know, after the health bar reaches fully red how to make the player teleport to a certain place when they died and another question is if you click on a specific object then the health bar would stay green, like a medic kit.
It would be very helpful if you could help answer these questions.
Thank you.

Kind regards,
Emmalyn

#5

@Emmalyn_Rotter This version uses a coBlock variable as health controller; That way you can use coBlocks for the rest of your project.
It works by setting the Names of the healthbars to the maxHealth (red) and currentHealth (green), then in typescript it’s constantly updating the healthbar with the name of the green bar as it’s current health.

Do make sure that when using the AdjustHealth function you use a negative number if you want to decrease the health.

Hope it helps!

2 Likes
#6

@Luc Thank you for this version that uses CoBlock variable as health controller. It worked very well, however after you click the object how do you make the variable stop loosing health. Instead of the healthbar keep loosing health.
This has really helped me thank you so much!

#7

@Emmalyn_Rotter I’ve updated the cospace to stop the counter when clicking the heart; I did this by adding a stopCounting variable set to false as default, and true when item is clicked. Then in the “while loop” I’ve added this variable as a condition.
Glad to have helped!