How can i make a floating health bar on enemy?

i’m new to the engine and i’m trying to learn by making a little 2d Side-Scrolling game.
I wonder how to make a health bar for the enemy that floats above it, bind it to his health and only appear when damaged. i found that with widget component you can do that, but can’t find how.

  1. Create a Widget Blueprint with a Vertical Box. Inside it add a progress bar.
  2. Set the anchor of the Vertical Box to center.
  3. Create an Actor blueprint and name it “HealthBarWidget” . Add two Widget components. (One for original rotation of your side scrolling character and one when it rotated 180.
  4. Set both of these widgets : Widget Class to “Health Bar” (or whatever you named your widget blueprint)
  5. In your character, add a child actor component of the Child Actor Class : “HealthBarWidget”

You will need to bind your progress bar to the health of your character in the widget blueprint.
I hope this helps.

2 Likes

that worked fine, but how can i bind it to the enemy? don’t know how to cast to enemy actor.

Right click mouse and select “self” and connect to Cast

There is a small tutorial in the docs. Maybe this will help you:

Solution using WidgetComponent:

Here is the way i always do it:

  1. Create a new Widget and add some kind of representation for health. I assume you will use a progress bar.
  2. Add two 2 floats to your widget AND your character: maxHealth, health.
  3. Add a third float to your widget called healthProgress. healthProgress should default as 1.0 (full health).
  4. Go to your progress bar you added in step 1 and bind it to the healthProgress variable.
  5. Add a function to your enemy character called “modifyHealth” with input parameters of “healthToSubtract”. Inside the function simply do: {health - healthToSubtract} and clamp the result to be between 0 and maxHealth and the value of this calculation should be set as the new health value.
  6. Add a function to your widget called “UpdateHealth” that gets a Float as input. in it, simply drag a Set for healthProgress and attach to it a “Map Ranged Clamped” node. as the value, attach the float parameter. as In Range A put 0. in In Range B attach maxHealth. in Out Range A put 0, in Out Range B put 1.
  7. Go to your enemy character and add a “WidgetComponent” to it.
  8. set the Widget in the WidgetComponent to be the widget you created in step 1
  9. Move it in the character’s relative space to be where you want it to be. usually above head is good enough.
  10. in your enemy character’s EventBeginPlay, drag the WidgetComponent to the event graph, drag its pin and choose “Get User Widget Object”. drag from it and do "Cast to ". Promote the cast result to a new variable. the variable should be of the same type of the widget you created.
  11. In your enemy character’s EventBeginPlay, drag a Get for the widget variable saved in step 10 and set it’s health and maxHealth to be the same value you set for these variables in your Enemy Character. Also, call the widget’s Update health and connect health to it (to make sure it starts with the right value)
  12. When your enemy takes damage, use ModifyHealth to decrease it’s health. Afterwards drag a Get for the widget variable saved in step 10 and call “UpdateHealth” and connect health as the float parameter.
  13. The widget will now update the progress bar and show the health.

BONUS: to make sure the progress bar is always facing player, in the enemy character add a function called “rotateHealthbarToPlayer” in it, do the following:

  1. right click on event graph and look for “Get player camera manager”. from it, drag the pin and look for “Get camera location”.
  2. Drag widget component to event graph and from its pin drag and look for “get world location”.
  3. right click on event graph and look for “Find look at rotation”. as From connect the camera manager. as To connect the widget location.
  4. From widget component drag pin and look for “Set World Rotation” and set it to the result of Find look at rotation.

Call this function from Event Tick.

To sum up: Enemy character loses health. It updates widget to display it in progress bar (which is in a value of 0 to 1). Widget will rotate towards player each tick.

If i missed something, let me know. Tried to be as specific as possible.

All the best :slight_smile:

THANK YOU for CopperStoneSea for finding a mistake in step 10

2 Likes

Im currently on my mac so i cant post pictures out of the engine. If you need further help with anything or if anything is not clear, let me know and ill post screens as soon as i get to my desktop.

Perfect, thank you very much. It was difficult to understand (for me), I already had the health system finished so I used the variables I already had for health, also to be able to put health to 100 took me a while.

But now it is Finished, Thank You again.

A good solution, thank you.
I was actually going to figure out next how to make the widgets continuously face the player, but you included it in the bonus section. Thanks a lot for saving my time. Cheers!

First, if you need more understanding about Casting, its really easy: say you are a Game Developer. but you are, of course, also a Human being. this means i can either treat you as a Human or, more specifically, as a Game Developer. If i want to ask you your name, thats easy! because every Human has a name. but what if i want to ask you something like your favorite game engine? thats not something EVERY Human can answer, i need to ask you AS a game developer. this means i have to cast you from Human to Game Developer. Now, instead of the engine treating you as a Human class, you are now a more specific Human class of type GameDeveloper. this means i can now ask you all the questions i can ask a Human + all the questions i can ask a GameDeveloper.

That being said, you have something called “MyHealthWidget” (GameDeveloper) of class “Widget” (Human). When you drag your WidgetComponent to the event graph in step 10, you pull out a “GetWidget” node that returns a “Widget” class. but we want to reach the data specific to “MyHealthWidget” (which is not in EVERY widget, only in our specific class), so we CAST it from a general Widget (human) to a specific “MyHealthWidget” (GameDeveloper). Now you can drag nodes from it related to your custom setup of the class.

I know this was a long explanation, but i hope this helps anyone who is also having problems with casting, and step 10 in particular.

All the best.

I’m getting stuck at step 10. It’s all clear until then, but the ‘Cast To’ node appears to be my nemesis. I never seem to be able to link a pin to the ‘Object’ node without it giving me a ‘does not inherit’ error.

I’ve got to step 9 with no problems. If you have time, it would be great to see a bit more detail around step 10 please!

Hi,

Thanks for the answer :slight_smile:

I get the general principle, but fall down when it comes to the actual implementation. I understand that I should be saying "here’s a group of things [class], but this is the specific one I want to talk to [object]’ but always seem to end up in problems at the object bit,

For example, I’ve attached a couple of screen shots below of me trying to follow steps 10 and 11, but only one compiles, and I’m not actually sure if the one that compiles actually functions the way you described. Have I actually followed your steps, or have I done something else?

I really appreciate you taking the time to explain here - I’ve been following a hell of a lot of tutorials, and every time I try to build my own functionality on them I always end up either stuck at a ‘Cast to’ node not working, or getting it working but not understanding why!

Cheers!

Hi :slight_smile: You are so very welcome.

The issue in your first screenshot is not a lack of understanding, but simply a syntax mistake in Blueprints. The “Widget” node you dragged to the screen is not a Widget class, but a Widget Component class. (think of it as the difference between an Actor and an Actor Component). All you have to do to fix this is drag a “GetWidget” node from the “Widget” node and viola, it will compile :slight_smile:

All the best.

I’m feeling ever more like there’s some deep layer that I’ve not got my head around here, so I’ll give this a go:

  • A Widget Class is simply a type of blueprint that Epic have set up with a few default properties that allow it to be used a certain way.
  • A Widget Component class is a version of that class with a distinct set of variables and items within it (such as my AIHealthWidgetHUD1, which has blueprint nodes and textures, etc. in it… Maybe?)
  • An Actor is an blueprint that has a collection of objects inside it (e.g. meshes, nodes, lights, etc.)
  • An Actor Component would be, for example, one of the lights inside the Actor blueprint?

I’m not sure which ‘GetWidget’ node you mean, so I’ve screenshot my options. This might be where some of the problems began, because I’m uncertain which of these is the right one.

Thanks again for helping with this. It feels like if I can get this straight in my head then a huge bunch of UE4 is going to be a lot easier to work with!

218934-screenshot-2017-11-03-105929-8.png

][1]

Well, you have “Get Widget Style”. You have “Get Widget at Index” and you have “Get Widget” which is exactly what i meant :slight_smile:

The only thing confusing you is your mistake of calling a “Widget Component” with the name “Widget”. To better help yourself in the future, try calling the Widget component something like “HealthWC” when WC stands for WidgetComponent. if you have an actor component, call it “SomethingAC” and so on. if its a boolean, other than the fact that its red colored variable, start it with “Is…” so a “LightOn” boolean will be “isLightOn”.

Of course, primitives like Int, String, Float, etc, do not need to have their type in the name since its counter intuitive. Bool is the only exception of this rule :slight_smile:

I’ve renamed Widget in the Component list to ‘WidgetWC’ and tried dragging off a node to ‘Get Widget’ from it. In the images below you can see that the ‘Get Widget’ option is now ‘Get Widget WC’, and when I select that it only adds a new identical WidgetWC reference (as shown in the second image) which doesn’t seem to be what we’re trying to achieve.

I’m really sorry if I’m being an idiot, thank you for your patience! Am I missing something obvious here?

A) you are not an idiot. B) the mistake was mine. You unmarked “Context Sensitive” so you had unwanted options. What you want is: drag a node from WidgetWC and select “Get User Widget Object”. this will give you a User Widget Ref.

It only substracts once and wont substract anymore for my AI . Its maxHealth 500. maybe you know wheres the problem here? Is that the right way to do this clamp in widgets function?

Ah, so I was vaguely on the right track! :smiley:

If you have the time, I can now make step 10 work, but I don’t really understand why it works. If the ‘Get’ Widget WC node isn’t an object reference, then what is it?

Believe it or not, I’ve managed to get stuck again on step 12. Neither the reference to the widget or the WC will connect with the ‘Target’ on my ‘Update Health’ function. I’ve added screenshots with pretty much all the stuff so far included, because I really have no idea why I’m getting an error here.

Thanks again for your time, I really appreciate it.

That bit looks okay to me. I think you might have an error elsewhere.