We needed a progress bar or equivalent shown in the game world above a keep that’s being capture. A simple thing, right? Riiiight. Well, firstly we decided it should be a variation of radial design, mainly because a horizontal/vertical bar are too big and the text doesn’t quite center on them without some problematic issues. Anyway, here are a few radial progress bar ideas Phil proposed:
So I chose the last (simple version of the second) one for now. This sounds great… in theory. Even with a little work we can make pretty decent sprites for this:
Background, foreground, and indicator.
Now the fun part: you can’t exactly crop a sprite under an angle, it’s all rectangles. So how do I fill in the bar gradually when it makes an arc? Well, here’s my journey from empty sheet to post-implemented version:
The gist of it is that I split the foreground sprite into 3 parts — first 12%, middle 76% and last 12% of the arc. Then I draw the first 12% growing up, middle 76% growing rightward, and last 12% growing down:
The little bubble on top hides the fact that the sprite is being cut horizontally or vertically and, more importantly, the bit where two sprites “join”. Here’s the implemented almost seemless version:
So simple, yet so … well, at least I can’t complain I have nothing to write about. Anyway, time to make the units actually do their thing.