HUD In Defold

Hello everyone.
I have been wondering on this for quite a while but couldn’t come to a probable solution. Every GUI object we add to any gameobject gets rendered in screen space. How then, can we create HUDs for characters that floats over their heads and follows them continuously.

If you want to get the screen space of any world space object, you can use rendercam.

I use this in my game to position health bars over enemies and objective markers over their world position counter parts.

local position = health_bars.getPosition(barID)
if position then
	return rendercam.world_to_screen(position, gui.ADJUST_ZOOM)
end
1 Like

So you are saying that we have a GUI rendered in world space and then using libraries like rendercam of defold orthographic, spawn a no of healthbars for each enemy?

I have a health_bars.gui that is attached to a game object, in it’s gui script it uses rendercam to translate the world position of enemies to screen space and then create health bar nodes at the respective screen positions.

@TheKing0x9 I think you mean the GUIs get rendered in screen space, right? Regular sprites are rendered in world space. (which you view through the camera)

The only drawback with Jonny’s method is that you have to recompute and set the GUI’s screen position whenever the camera or the character moves (probably just on update), but it still may be your best option. It’s just not the cheapest on performance.

Another way is to render your character’s GUIs in world space, along with their sprites. You can just use Labels and regular Sprites for the GUI, or make an alternate GUI material with the “tile” tag and use GUI components with that material. The big drawback with this is you won’t get the nice scaling of regular GUIs, it will be larger or smaller depending on camera zoom, etc. (which can be quite bad for text)

You could also probably use Jonny’s method but do the world-to-screen transform in the shader, which would be faster than doing it in lua. I’ve never messed around with that enough myself to tell you exactly how though.

1 Like

I think it’s a relatively trivial computation in terms of performance. I was concerned about performance at first too, but in real world usage I don’t even notice it and I can have 10 health bars on screen at once all calculating the transformation on update.

Edit: Just thought it was worth mentioning this incase @TheKing0x9 was concerned about the performance.

I didn’t get time to try it yet, So probably will try and implement it this weekend.
Still @jonnyleeharris method looks simple to implement, so this time I will go for it.
@ross.grams yes your idea looks pretty interesting, but I have no experience of writing shaders so will implement it later after learning them