Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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.

Product Version: UE 4.14
more ▼

asked Mar 24 '17 at 06:43 PM in Using UE4

avatar image

13 1 2 5

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

3 answers: sort voted first

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 :)

THANK YOU for CopperStoneSea for finding a mistake in step 10

more ▼

answered Mar 28 '17 at 11:33 AM

avatar image

131 4 4 8

avatar image DDraiman1990 Mar 28 '17 at 11:34 AM

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.

avatar image Marokaro Mar 28 '17 at 11:16 PM

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.

avatar image Khemsomniac Oct 17 '17 at 10:09 PM

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!

avatar image CopperStoneSea Nov 02 '17 at 10:12 PM

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!

avatar image DDraiman1990 Nov 02 '17 at 10:24 PM

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.

avatar image CopperStoneSea Nov 03 '17 at 08:59 AM


Thanks for the answer :)

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!


alt text

avatar image DDraiman1990 Nov 03 '17 at 09:20 AM

Hi :) 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 :)

All the best.

avatar image CopperStoneSea Nov 03 '17 at 10:12 AM

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!

![alt text][1]

avatar image DDraiman1990 Nov 03 '17 at 11:35 AM

Well, you have "Get Widget Style". You have "Get Widget at Index" and you have "Get Widget" which is exactly what i meant :)

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 :)

avatar image CopperStoneSea Nov 03 '17 at 11:49 AM

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?

alt text

alt text

avatar image DDraiman1990 Nov 03 '17 at 12:44 PM

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.

avatar image CopperStoneSea Nov 03 '17 at 06:19 PM

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

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.

alt text

alt text

alt text

avatar image DDraiman1990 Nov 03 '17 at 09:00 PM

Add me on Epic Launcher as a friend: DDraiman1990. Ill help you from there :)

avatar image CopperStoneSea Nov 06 '17 at 09:13 AM

I've accepted your invite :)

I started from scratch and rebuilt this with a basic bar and finally got it working! :D

Thank you for all your help along the way. I think I've got a bit of a better idea of how the 'Cast to...' node is supposed to work. Essentially, it seems to be saying 'Get a reference for an instance of this blueprint' and the 'Object' pin is a saying exactly which specific instance of that blueprint is being referred to. I think some of the problem comes from trying to work out how to get a reference to a specific instance. I had assumed that dragging out my widget from the side of the blueprint would create a reference to that widget component (i.e. the one embedded in the blueprint running this code), but apparently not. So perhaps my issue is not about understanding the 'Cast to' node, but in actually understanding more about how to get a specific reference for the 'Object' pin. The 'get user widget object' node looks like it's going to be very handy!

Working on getting this going has helped me learn a lot and given me better problems to tackle. Thanks again!

avatar image DDraiman1990 Nov 06 '17 at 09:31 AM

You are welcome :) if you ever see me online on Epic and want to ask something, feel free :) all the best.

avatar image zibin Nov 03 '17 at 01:33 PM

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? alt text

clamp.png (111.2 kB)
avatar image CopperStoneSea Nov 03 '17 at 06:20 PM

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

avatar image zibin Nov 03 '17 at 07:06 PM

I set random value for damage and now i can see that everytime i deal damage it substracts that portion from health and does exactly the same when i deal damage again but its like it substract from full health again .

avatar image zibin Nov 04 '17 at 06:04 PM

I had to set Health after "Modify Health" too.. lol

avatar image Zenthere Apr 19 '18 at 09:24 PM

Great Solution! I'm doing something very similar, but I need the healthbar widget to stay the same size on the screen no matter how far away the character is. Do you know how I could accomplish this?

Thanks, I hope you get this.

avatar image Zenthere Apr 19 '18 at 09:32 PM

I always find the solution right after I make a post.

in the widget component on the actor, go to the "User Interface" Dropdown there is a section called "Space". Change it from "World" to "Screen"

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
  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.

alt text alt text

healthbar1.jpg (165.9 kB)
healthbar2.jpg (151.3 kB)
healthbar3.jpg (100.5 kB)
healthbar4.jpg (177.8 kB)
healthbar5.jpg (162.9 kB)
more ▼

answered Mar 25 '17 at 11:38 AM

avatar image

241 11 3 11

avatar image Marokaro Mar 25 '17 at 08:05 PM

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

bind problem.png (165.0 kB)
avatar image ZZZubec Mar 26 '17 at 12:42 PM

Right click mouse and select "self" and connect to Cast

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

There is a small tutorial in the docs. Maybe this will help you: https://docs.unrealengine.com/latest/INT/Engine/UMG/QuickStart/index.html

more ▼

answered Mar 26 '17 at 03:55 PM

avatar image

1 1

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question