Resource bubbles
Resource Bubbles are a simple way to show how much of a resource the player currently has, like life or mana. You’ll most often see this style of UI in RPGs and ARPGs.
The visuals are intentionally clean: just a bubble shape and a color-based fill that shows progression. There’s no extra decoration, which makes them easy to fit into different UI styles. The bubble itself and the fill/progression are provided as separate sprite sheets, since these assets are meant to be driven programmatically by the game rather than used as static images.
A common way to handle this kind of UI is to render a full sphere and fade it using a shader as the value goes down. Instead, these bubbles use stepped fill sprites that recede from the top. As the resource decreases, the visible fill drops lower, giving a subtle sense that the liquid inside the bubble is actually flowing rather than just fading out.


Comments
Lovely! An animated PNG example.