Creating nice looking progress bars

Solar2D General Questions/Discussion
#1

To say I’ve spent over 20 hours on this thing is probably an understatement.

I just want a nice looking progress bar… that said, what I had in mind doesn’t seem to be possible.

I thought a really nice looking bar would employ newRoundedRect(), with a nice gradient. I took the bitwise code from here: http://developer.anscamobile.com/code/bitwise-operators-lua alas, this will NOT work with roundedRect because it’s creating 2 pixel high slivers, and the curves get REALLY funky.

Then I had to add them to a viewgroup in order to move them as one unit. Oh man, after hours of wracking my brain, I STILL have no idea why the viewgroup doesn’t move properly (change width, move .x coordinate). I’ve tried scaling, I’ve tried modifying the width, but it will just not stay within the confines of the expected area.

And so I’m here wondering if I’m just an idiot, or if there is a simple solution to this. I suppose I can make all the progress bars images and continue to bloat my game, but even with images, I’m not 100% sure I have a good idea how to pull it off without distorting it.

With simple rects, and even non-gradient rounded rects, my progress bars work great. They’re just ugly as hell… and I really don’t know how to spice these things up… and it really shouldn’t take me the better part of 3 days to do something like this. =/ [import]uid: 37122 topic_id: 11793 reply_id: 311793[/import]

#2

My work on progress bar that use image, you can try it.
http://dl.dropbox.com/u/9322397/Corona/TestLoader.zip [import]uid: 12088 topic_id: 11793 reply_id: 42969[/import]

#3

Progress bars for what? When the game launches?

Angry Birds has a static screen with the text “Loading…” at the bottom. When you load a level, the same “Loading…” text appears over the level menu. [import]uid: 58455 topic_id: 11793 reply_id: 42977[/import]

#4

@Dave, I need progress bars for health and various other meters, like XP and Energy and such.

@yuewah, that’s a pretty good looking progress bar. Your implementation couldn’t be any more different from mine… lol.

But judging by that, I’m guessing that my particular vision for a progress bar is impossible without some enormous amount of difficulty.

The progress bar you have is square. I wanted something cuter, softer, with curved edges. It looks like I either can have gradients and square (either by using an image or the bitwise code), or flat color with “bubbly” curves to it. (See the progress bars in a game like Battle Hearts… that’s what I was trying to replicate, alas, I don’t think it’s realistic.)

I’ll have to think about what I want I guess. Man, totally bummed. [import]uid: 37122 topic_id: 11793 reply_id: 43072[/import]

#5

I’d just set the xScale of a newImageRect and have a double size png. That way you have a high quality fully adjustable bar.

I have used this method in my latest game as a hunger bar and it works perfectly.

– Chris

[import]uid: 33866 topic_id: 11793 reply_id: 43077[/import]

#6

Can you post a picture of what you’re looking for? Is there a way to do it with pre-rendered images?

Also, have you thought about using a dial instead, like the gas gauge in a car? You could alter the rotation of the needle based on the value, and perhaps lay that on top of a rendered image of the dial.

Depending on how good the image is, it could look pretty cool.

http://t1.gstatic.com/images?q=tbn:ANd9GcRng5DJ0Ao9YvGBfMpDS9DXLOHci-mbbHQSj2_Ao8DZn5iq6ep_9w [import]uid: 58455 topic_id: 11793 reply_id: 43081[/import]

#7

Dial is a cool idea, but won’t fit in the current layout.

I was trying to find a good picture of battleheart, (iphone/ipad/android) a game made using unity.

http://img.podnova.com/screenshots_iphone/347/347310_8.jpg

The picture unfortunately is a bit too small to really tell, but the progress bars have curved corner, and a nice gradient on them to give them a lit-from-above effect.

I think I can replicate something close using a png, and modifying the width component. This will chop off the curved edge on one side, but maybe that won’t look too bad… [import]uid: 37122 topic_id: 11793 reply_id: 43087[/import]