Create UI health markers like in World of Tanks

Hello!

So currently I'd like to make HP bars for my players. Obviously, first thing that comes to mind is to make world-space canvases and put them on top of my players. Thing is, when looking at them from different angles, you won't be able to see them. OK, you could say "Well use transform.LookAt so they always face the camera", but that can get expensive on mobile. Here's what I'm going for:



Or:


Or:

However I don't know how to make markers like this.

Also worth noting is that most game's enemy markers can be seen even if your view of the enemy is blocked, making me think they aren't placed as children of the players.

If you have any ideas, let me know. Thank you!

 

@DroidifyDevs

hi there, solution is quite simple;

Have one canvas, or use existing one if you already have a screen space canvas; just add a grouper under which you can add/remove or enable/disable markers, then place them over your enemies by converting their world space position into screen space / canvas position and place them on 2d canvas space "above" your targets.

This is the easiest way to do it IMO, if your markers are not going to be integrated into world space, i.e. they are just screen size markers, not floating above and transforming along objects they represent. This way they will also be always on top of everything else, if that is what you want.

There are threads here in UI sub-forum IIRC about this topic, just do a search.

 

@DroidifyDevs

actually I've got it in my notes - there are various ways to come to this result, this is one I've used I think:

Code (csharp):

1.  
2.   // Offset position above object bbox (in world space)
3.   float offsetPosY = target.transform.position.y + 1.5f;
4.  
5.   // Final position of marker above GO in world space
6.   Vector3 offsetPos = new Vector3(target.transform.position.x, offsetPosY, target.transform.position.z);
7.  
8.   // Calculate *screen* position (note, not a canvas/recttransform position)
9.   Vector2 canvasPos;
10.   Vector2 screenPoint = Camera.main.WorldToScreenPoint(offsetPos);
11.  
12.   // Convert screen position to Canvas / RectTransform space <- leave camera null if Screen Space Overlay
13.   RectTransformUtility.ScreenPointToLocalPointInRectangle(canvasRect, screenPoint, null, out canvasPos);
14.  
15.   // Set
16.   markerRtra.localPosition = canvasPos;
17.  

 

Thanks for the ideas! I'll look into it as it seems like the right approach

 

Thank you for posting this, helped me immensely.

 

2 Years later and this still helped me out a lot, Thanks.

 

Two and a half years later, and it helped me out too. Thanks man!

 

2199, Thanos destroyed everything and still helped me out a lot too

 

Everything Thanos destroyed is now back and this still helped me out a lot.

 

Valve finally announced a new Half-Life game after 12 years and this still helped me out a lot

 

The years passed along, no one knows which calendar we are using now, maybe the one from that other planet we found many ages ago. Humanity is spread around the universe and mixed with alot of alien races but this helped me out a lot too

 

such help. many thanks.

 

This is dumb, why wouldnt you just give it its own canvas?

 

@UnseenBeyond

If you are talking about the OP concept - the reason is pretty clear why he asked... he even explained why and gave several examples. But it of course depends on what you are trying to do.

 

The world is in pandemic and this still helped me out.

 

Its 2077 and Cyberpunk 2077 still hasn't been released and this still helped me out.

 

Cyberpunk got released and it helped me out.

 

cyperpunk got removed from the psn and it continues to help me out.

 

Trum is not President anymore and it still helped me out a lot, thx.

 

Had to reset password and 3.23% of world population received at least one injection of Covid-19 vaccine, yet this still helped, thank you!

 

I am on my 20th lockdown and it still helped me out. Thanks !

 

Well, I guess Jesus is back now but he didnt even know the answer to this one. Thanks man