HOW TO MAKE A SIMPLE HEALTH BAR IN UNITY! Unity 2D Tutorial

In this video I'll show you a quick and simple way to create a HEALTH BAR in Unity!
Check out my previous 1 minute tutorials: • UNITY TUTORIALS
if there are any tutorials you'd like to see, feel free to leave a comment below!
------------------------------
Follow me on TWITTER: / jakemakesgames
The music found in this video: • Video
(no copyright is intended by using this music, all rights go to their respective creators).
------------------------------

[@Snailerino]

When i try to run it, it says "The type or namespace name 'image' could not be found. What can I do to fix it?

[@JakeMakesGames]

Be sure to include ‘using UnityEngine.UI;’ at the top of the script

[@GumbiOfficial]

@@JakeMakesGames make this top comment, (you forgot to mention it in the video)

[@JakeMakesGames]

@@GumbiOfficial thank you for mentioning that!

[@usuarion1611]

@@GumbiOfficial Minute 0:45

[@mattvile9399]

@@GumbiOfficial (you forgot to listen)

[@drmarx123]

Best tutorials are simple and short, giving you a glimpse on how to get started. Thanks for this, other content creators would wrap this in a AAA tutorial which require you to watch it all to find the solution you are looking for.

[@JakeMakesGames]

Thank you, the main reason I did the 1 min tutorials was because I was sick of watching long videos that had a bunch over fluff in them

[@Sir_Ninonino]

Straight and simple. And best part is you can use this with your own images (which I did in my case). Thanks!

[@JakeMakesGames]

glad this could help you out!

[@LumpAbundance]

Thank you so much for the quick tutorial. I'm so surprised how easy it is to make a game.

[@JakeMakesGames]

Glad you enjoyed it!

[@emiarty]

0:15 I do not have a "Square" or a "Circle" on the source image selection part. I have the rest of them. How can I get the Square option?

[@JakeMakesGames]

You can navigate to the package manager and install the “2D” package, this should include everything; if not you can just import your own white square sprite and that should do the job!

[@grimez7869]

MY BOY HAS BEEN CRUSHING THEM OUTTTTTTTTTT

[@JakeMakesGames]

THANKS BOII

[@MSStudio00]

Great video, thanks for help!

[@JakeMakesGames]

No worries! Glad it helped!

[@200anxy]

Hi there, @JakeMakesGames, when I do this, right after i make the canvas, these white lines show up, in the middle of the canvas, on the rendering screen. How do we prevent this?

[@JakeMakesGames]

The only thing I can think it would be is that you have gizmos turned on in the game view

[@200anxy]

@@JakeMakesGames thanks so much! that fixed my problem!

[@JakeMakesGames]

@Axy200 you’re welcome! Those gizmo lines will only appear in the engine and aren’t rendered in the final build

[@TDog3775]

Worked like a charm! Thank you very much

[@JakeMakesGames]

You’re welcome! Glad it helped!

[@RootsOf7]

when I set it to game view the ui doesn't show up, however it does if I set the render mode to world space

[@JakeMakesGames]

Made sure on the “canvas scaler” component “ui scale mode” is set to “scale with screen size”, that may help your issue!

[@RootsOf7]

@@JakeMakesGames thanks you! I realized now that the canvas scales to the screen already and doesn't need to be within the camera. I thought I had to keep the images within the camera to see it in game 😓

[@JakeMakesGames]

@@RootsOf7 thats odd.. if you create them as UI images as a child of the canvas, it should be fine

[@sartokenetht.1434]

When I try it, since the part of public void TakeDamage, it says 0 reference and all of the code under the void Heal and TakeDamagae has a red underline. Can you tell me how can i fix it?

[@JakeMakesGames]

It’s a bit hard to know what’s going on without seeing your code 🤔 make sure there’s no spelling errors and everything is in the correct place

[@Ferenc-Racz]

Short.. Old.. BUT very very useful video! Thank you for it!

[@JakeMakesGames]

You’re welcome! Glad you enjoyed!

[@eszti0423]

It's possibly that I missed something but when I click on source image to select a Sprite, I can't find square. Do I need to download it from somewhere?

[@JakeMakesGames]

You can either import your own, or if it is missing from Unity you may need to install the 2D package from the package manager

[@deadlockyt3644]

i can't find it either, u can right click in the project window, Create => 2D => Sprites => Square. Then drag the square sprite u just created into the source image spot and it should work just fine

[@NoobProMaster01]

Thank you for this tutorial but i have a question is how to use this health bar for my player take damage when being attack by enemy?

[@JakeMakesGames]

In on trigger enter (or how ever you’re handling collisions) you need to check if the enemy collided with the player and then get reference to player health script then you’ll be able to call the take damage function

[@orileshem486]

Amazing tutorial saved me hours of video watching!!!!

[@JakeMakesGames]

Thanks for the kind words! I’m glad it helped!

[@imadftatchi5647]

how do i reference the takedamage to do actual damage?? from a enemy

[@JakeMakesGames]

A quick way of doing this is ensuring the health manager is a singleton; so at the top of the health manager script:
Public static HealthManager instance;
void Awake()
{
instance = this;
}
And then in the enemy script in the function you’re checking with collisions with the player
HealthManager.instance.TakeDamage(damage varable here);

[@blazerhm]

Another awesome video

[@JakeMakesGames]

Yo! Thank you so much!

[@CS2ClownCrew]

when I press play the Health Amount constantly increases, however, when I disabled the heal part of the script this stopped but I would still want the healing part to work... any ideas?

[@JakeMakesGames]

Check to see how the heal function is being called. If it’s being called in update without and checks it’s going to increase constantly

[@benriffe4705]

thanks showed me what i needed :D

[@JakeMakesGames]

Glad it helped!

[@lukascaha1429]

Nice tutorial, but im lost how to make the damage on collision with enemy. I tried to do simple if tag player collides with tag enemy, it TakeDamage(20);. But that aint work. Do i need to make script for the enemy or add something more

[@JakeMakesGames]

For that to work, both the player and enemies need a collider of some sort and at least one of them need a rigidbody.

[@hellopeople2395]

Nice video but you may want to include
if( healthamount < 100)
{
healthamount = 100;
}
to prevent people gaining ghost health :)

[@JakeMakesGames]

Good point, thank you for that!

[@HmmYT]

For anyone trying this, make sure the smaller than sign is replaced with a larger than sign

[@dtayt1]

it says The type or namespace name image could not be found

[@JakeMakesGames]

To need to add “using UnityEngine.UI” at the top of the script to get access to the UI elements in code

[@drmini7522]

what do i do when it says 'Application' does not contain a definition for 'LoadedLevel'

[@JakeMakesGames]

That means the function ‘LoadedLevel’ doesn’t exist as an extension of ‘Application’. Rewatch that part of the tutorial, hope this points you in the right direction

[@capicoua]

i have stumbled upon a problem. it says that 'float' does not contain definiton for fillAmount on some lines of code in your script. i will be grateful if someone wants to help me

[@JakeMakesGames]

It’s because float doesn’t contain that. The healthbar variable that uses that line of code should be an image

[@eduardomarinho7887]

When I create the "image" component and select square, my health bar doesnt show anything, like if it was invisible. When I create a sprite and try to make it bigger, only the collision box get bigger and not the sprite

[@JakeMakesGames]

make sure there is a sprite in the image component

[@Tresto_XD]

Thanks brooo Good tutorial + new Sub

[@JakeMakesGames]

Thanks i appreciate that!

[@matthewwilliamsvideos]

Bro went at super sonic speeds💀

[@JakeMakesGames]

That’s the point of 1 minute tutorials I guess. Quick and straight to the point

[@matthewwilliamsvideos]

@@JakeMakesGames I like it. I can tell you know your stuff

[@JakeMakesGames]

Thank you I really appreciate that!

[@myth6628]

easy and short thank you

[@JakeMakesGames]

you’re welcome! Glad it helped

[@StickyLabDev]

this is what i want ,thanks

[@JakeMakesGames]

You’re welcome!

[@WellmanK]

You didn't explain how to make the tab that says health bar, I don't know how to get that

[@disqunity]

right click in the hierarchy, create empty, and rename it to health bar. then drag and drop the black green and red squares to it. hope i helped!

[@KW-sn6hl]

@@disqunitythank you! 🙂

[@disqunity]

@@KW-sn6hl if you were talking about the tab on the very top, then the way you can create that is by right clicking in the project folder (of the unity file explorer on the bottom) and creating a new scene with the name "Health Bar" and then open the new scene. hope this helps!

[@WellmanK]

How to I put the health bar in the top left, I can't figure that out

[@JakeMakesGames]

@KaylaWellman-j5d you can anchor it to the top left if you click on the ui objects rect transform component (there will be a square crosshair looking icon) in the inspector. That’ll show you all of the anchoring options

[@unston]

How do i connect my health bar to my player?

[@unston]

I managed to do that, but my health bar goes behind my platforms, so how do I work it out?

[@JakeMakesGames]

That’s odd, if it’s a standard UI canvas it should be displaying above everything. How is your canvas set up, screen or world space?

[@unston]

@@JakeMakesGames It is in world space so that i can link it to my player

[@JakeMakesGames]

You’d have to look into the sorting layers

[@N1zh___]

When I click the return key ONCE, the health goes down to the bottom and resets the scene. Please Help!

[@JakeMakesGames]

Make sure the input check is getkeydown and not just getkey

[@stuartmarsh5574]

Thank you I enjoyed this video, I wish you would talk a litte slower and explain a little bit of the "why" on some of the steps just so we could learn more and it would be easier for non native English speakers.

[@JakeMakesGames]

Thanks for the feedback! I’ll keep that in mind for the next tutorial!

[@DanteMDTNS]

Image has no attribute fillAmount?

[@JakeMakesGames]

once you have dragged in a sprite for the “Source Image” a drop-down with the name “Image Type” will appear. Click that drop-down and select “Filled”

[@DanteMDTNS]

@@JakeMakesGames i know i found this, too, but i still cannot access it in the code then. I came to the solution to use a slider which was easier for me

[@JakeMakesGames]

That’s very strange? Glad you found a solution that works for you!

[@DanteMDTNS]

Maybe because I'm using vsc. I didn't look if it compiles. But thanks anyway, good video =)

[@maxgordon3194]

@@JakeMakesGames fillAmount doesnt work anymore sadly. the new using directive is used now. using UnityEngine.UIElements. R.I.P using UnityEngine.UI;

[@OpxGames]

i got this
Non-invocable member

[@JakeMakesGames]

I’m going to need more context

[@BlueMoShorts]

are you doing a speed run or something?

[@JakeMakesGames]

nope, just like making tutorials that are short and straight to the point without 10 minutes of fluff in the video

[@BlueMoShorts]

@@JakeMakesGames lol i had to watch it frame by frame to see what you were doing

[@JakeMakesGames]

@@BlueMoShorts did it work once you followed it?

[@BlueMoShorts]

@@JakeMakesGames it did but it was annoying you can still make it short but easier to follow

[@kailashhsu]

my unity keeps crasing

[@JakeMakesGames]

Not sure if it’s due to compiler errors or your machine? Are you getting any errors?

[@CarloArena-b6w]

dont have the square sprite

[@JakeMakesGames]

You can either import your own or import the 2d package from the package manager

[@CarloArena-b6w]

@@JakeMakesGames I got the sprite but now the health bar wont go down, it does kill the sprite but dosnt vissualy go down

[@JakeMakesGames]

@@CarloArena-b6w ensure the image
Ui components “image type” variable is set to “filled”, hope this helps

[@CarloArena-b6w]

@@JakeMakesGames thx works now, best tutorials not 10 hours long

[@JakeMakesGames]

@@CarloArena-b6w glad you got it working! I appreciate it

[@GoatVibez637]

I copied your exact code and now I have 24 errors
Please tell me what I did wrong

[@JakeMakesGames]

I can’t really help you without knowing what errors you had

[@GoatVibez637]

@@JakeMakesGames The fact you actually replied Is astonishing to me, even tho this video was made months ago

[@JakeMakesGames]

@@GoatVibez637 I try to reply to every comment when I can! What issues are you having?

[@GoatVibez637]

@@JakeMakesGames
There were red squiggly lines under almost every single program I wrote

[@JakeMakesGames]

@GoatVibez312 what did the errors in the console say?

[@PK-se2jh]

thankyouuuu :)

[@JakeMakesGames]

No worries!

[@bit7937]

i really needed to put this to 0.5 speed to see whats going on do lil slower next time and btw didnt work

[@JakeMakesGames]

thanks for the feedback. Did you get any errors in the console to indicate why it wasn’t working?

[@grimez7869]

banger song

[@JakeMakesGames]

🔥🔥🔥🔥

[@AlexanderHallgren]

Great tutorial, however its impossible to follow along in a nice pace, always have to rewind and pause since you're speedrunning while talking lol..

[@JakeMakesGames]

Thanks for the feedback! I’ll keep that in mind when I work on a new tutorial

[@gideonjordan62]

Just slow it down

[@JakeMakesGames]

I do get that, but the idea of the “1 minute tutorials” is for them to be quick and to the point.

[@gamerismii]

@@JakeMakesGames no i think hes meaning to say "slow down the talking" as in dont talk too fast cuz its kinda hard to catch up
i PERSONALLY am NOT complaining cuz this tut was GREAT. ur REALLY underrated ngl

[@BungieStudios]

This is exactly what I was looking for. A quick visual representation and overlay of the UI system for health in Unity. There are many tutorials and many ways to do it, but only a few people know how to sum it up quickly to provide an effective general idea without taking 21 minutes. This is gold.

[@Fency_7]

I can't find fill button can anyone help

[@JakeMakesGames]

On the “image type” drop-down on the UI Image you can click that and it’ll give you some options. Fill is there

[@follyscrolly1345]

@@JakeMakesGames there isnt a image type dropdown menu tho

[@JakeMakesGames]

Time stamp 0:13, once you give the image component a “source image” it appears as an option

[@follyscrolly1345]

@@JakeMakesGames yep got it thanks

[@fininatin6533]

u should put the script in the discription

[@JakeMakesGames]

It’s on my patreon :)

[@ODarkmind]

why you clicking so fast brother

[@gavanscommandblock]

where's the code

[@JakeMakesGames]

It’s not online anywhere, just follow along with the tutorials.. that’s kinda the whole point of them

[@rusurobert4917]

satana

[@JakeMakesGames]

whaaat? hahah

[@HamzaGaddas]

HELP!!!!!!!!

[@JakeMakesGames]

whats the issue?

[@rossblackblood9554]

wow you talk fast ._.

[@Iiiiii9998]

dont see image type

[@JakeMakesGames]

you need to ensure your UI image has a sprite in order to see that option

[@Iiiiii9998]

@@JakeMakesGames Thanks, now i see it

[@JakeMakesGames]

@@Iiiiii9998 no worries!