Download

How to add a HUD on a third person character's body?

I’ve been trying to figure out how to add HUD elements such as meters to a third person character’s body but so far, the only thing I’ve tried is using text renderers and boxes. I’m trying to add a meter that will float just slightly off the surface of my character’s back but I don’t know where to begin. Can someone point me in the right direction?

Is your problem with figuring out how to draw HUD elements for an Actor or how to draw the meter?

You can draw Actor-specific HUD elements (or overlays) using Canvas with the PostRenderFor() function available in all Actor-derived classes. This requires calling AddPostRenderedActor() on your HUD and passing it each Actor you want to draw overlays for, and the bShowOverlays variable in your HUD must be true (or you can call DrawActorOverlays() on the HUD directly during the draw loop if you are overriding the HUD drawing functionality instead of calling the Super function - by default it is called in the DrawHUD() function of AHUD if bShowOverlays == true).

Inside your PostRenderFor() function, you can get the Actor’s world position and project that into 2D screen coordinates - Canvas->Project(Actor.Location) - to use for drawing 2D overlay elements that appear to be at the Actor’s location. You may need to offset that location either before or after projecting it depending on your use case.

I don’t know whether this is all exposed to Blueprints, though. I haven’t had a chance to look into it.

Since the only thing I’ve been tinkering around has been blueprints, I thought I’d see if I can set up a stamina meter that is facing my character’s back which is facing the screen (think Deadspace). I know how to get a health meter going (plus there’s plenty of tutorials floating around for it), I just don’t know how to get my meters/UI elements to be close enough to a mesh (currently using default mesh).

That’s not a HUD element, if I am understanding what you are referring to in DeadSpace. You mean this?

ds_character.png

That would be done as an emissive part of the Material applied to your character mesh and would be controlled by a parameter whose value would be updated when the health/stamina/etc. changed.

I think he’s suggesting something like this:
164fdd73186f5025a3046e77a5d9468e7d43de3b.jpeg

A floating 3D UI, which is parented to the character.

If you want to do something like this, you can try rendering to a texture, and using that as a material on a parented 3D plane. Alternatively, there’s VaQuole and Coherent, which do the same sort of thing - but with HTML5 files.

You can do that with Canvas and the HUD in a Blueprint with something like this:

It just gets the player Pawn’s location and offsets it by some vector (HUDOffset variable in the image) which is rotated by the Pawn’s rotation so the offset is always local. Then it projects that into screen-space and uses that position to draw using the Canvas.

It’s just a 2D overlay, but it will appear to be in the world. 4.2 has a new Canvas Render Target feature that can draw UI to a texture that can be used in a Material and applied to a surface in the world as well.

That’s awesome. Have been exploring a few 3D ‘in-world’ GUI options for a while, so having something like this’ll help massively.

At first I was wonder what Jeff was on about until I noticed the “project” node. Didn’t even know it existed. Going to have to have a play with it.

For stuff like this I would probably just make a BP that contains what I want to display (planes with textures), spawn it in and just attach it to the player in front (or behind) of them. Jeff’s post seems like the simplest method but not sure how good it would look in 3rd person, probably be great in first though.

well… lol

a fast proof

It’s close to what I was going for, so I’ll start tinkering around some more and see if I can get it to stay facing the player character’s mesh while the camera moves around. Thank you!

That’s probably not possible with this method since it is just drawing a 2D overlay on the HUD. Using the Canvas Render Target feature in 4.2 (released next week) and applying that to a mesh component attached to the Pawn seems like a much better solution for what you want to do.

Something like this ?

That’s it!

First off I have to say that the way I did it might not be the best way since I used to a text render which is affected by the light in the level whereas a traditional HUD isn’t affected (Not 100% sure since I don’t have that much HUD knowledge). With that said I think it might be possible to use the same technique with HUD blueprints to avoid that problem, so here is the explanation.

First you’ll need to create a socket in your character’s skeleton so that it can be used as an anchor for your HUD. Open the skeletal mesh you want to use, in the newly opened window select a bone you want to add a socket to (it should be a bone near the location that you want to show your HUD", right click it and select “add socket” then move that newly created socket to the exact location you want it to be, give the socket a name so that it can be used later on. The image below shows how it looks once completed.

Then it’s easy to attach a plane with a texture or a textrender to the socket you created with a “Attach to” function, just plug what you want to attach into the “target” pin and plug the character mesh in the “parent” pin, then put in the name of your socket in the “In socket name” field and select “Snap to target” under attach type.

Now I was also curious about how to switch from a textRender to an actual bar that drains when certain variables change so I looked at the “Blueprint-HUD” in the content example to see how EPIC did it and came up with something that looks like this.

This time instead of a TextRender I used a simple plane with a Dynamic Material Instance that had a Scalar Parameter that could be changed within blueprints. The setup in blueprints looks like this.