I'm building a game.

Each character has an energy bar. It's red when it's in the low, and green when it's full.

I'd like to make it obvious for the user to see that the bar is progressing ( getting full ) when he's playing with the character.

So far I've been thinking about making the bar glow. Result is OK but I'm wondering if there's any better idea.


Assuming you have a coloured section of the bar to indicate the current amount eg 60%. Then at the top or right end of the 'filled' part of the bar (depending on its orientation), instead of having a straight join to the empty part of the bar you could have an angled join, shaped like a >.

Eg :


Where ||| denotes filled section and ... denotes empty section. (I'd draw it but I'm on my mobile!)

If the bar is filling you use an arrow pointing into the empty section, but if the bar is emptying, use an arrow pointing into the full section. If the bar is static, use a straight join. You could work out the direction required by averaging change over the most appropriate unit of time, and you could make the acuteness of the arrow point relative to the rate of change.

If you need to bring attention to the bar even more, you could animate the bar in a pulsing fashion such that it animates between a previous position and the current position - again with the previous position being determined by a suitable amount of time. This would emphasise the direction and rate of change.


In games I only saw the glow solution. So that should be what users will understand most easily.


If the bar is filled on certain events (and the bar is important enough) you can draw attention to the bar on those events; for instance in Borderlands every time you earn experience it displays the amount of experience earned, then shows the amount sliding into the experience bar, which then glows and fills up a little.

However if it constantly fills you don't want to bring too much attention. If it's constantly filling and dropping the user might be annoyed ifyou make it blink or make sounds too often. If the increase is quick enough a smooth, pixel by pixel growth animation usually makes it clear that it's recharging.

Also remember it's often most important when bars like this are full, especially when the bar recharges very slowly. Consider a small chime or short, stronger glow on the bar once it reaches 100%; too often have I played games with a recharging "attack"/ect meter I forget to use because I don't know if I can use it or not. Don't make it make sounds too often though, we all hated the SNES health bars that went BEE BOO BEE BOO for hours when you were low on health.


Guild Wars implements a "pip" display to indicate regenerating. This can also help depict the rate at which regen occurs. For example:

High Regen: 52+++++ Low Regen: 50++

Mind you, in the game they are animated arrows. But they are incredibly handy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.