Trying to make a radial UI element similar to Breath of the WIld's Stamina wheel

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By jackmakesthings

I’m working on a simple 2d game and trying to show player health on a radial, donut-shaped indicator. If you’ve played Breath of the WIld, picture the stamina wheel.

The player health wheel should be full until they start taking damage, then it should decrease at a steady pace till they get out of the danger area (I have collision and areas with signals handling this.) Once they’re out, it’ll refill (again, at a steady pace, but probably a different speed) – till it’s back to 100%;

I think I have a general sense of the math/logic for this, but how would I translate these interpolating numbers into a wheel? Where at 100% you see the whole wheel, at 50% half of it is masked/gone, et cetera.

Is there a control node that’s well suited to this or is this a case for custom drawing?

Have you looked into a TextureProgress node? It can be filled radially (see the radial_* properties for more details).

Ertain | 2020-07-16 03:33

Perfect! I forgot this node existed and it’s exactly what I need. Thanks for the tip.

jackmakesthings | 2020-07-16 04:12

:bust_in_silhouette: Reply From: JimArtificer

If you want it to appear identical to your reference example you’ll probably need to create a pixel shader for it.

If you are just talking about a round health bar, you can make one of those easily enough with various images depending on how many hit points you want the character to have. Or with an animated sprite.