How to draw a progress bar based on a display image?

Solar2D General Questions/Discussion
#1

Hi,

I want to have a progress bar in my game that represents a number, but I want to have a image file and draw percentile of it based on that number.

Also, if I want to do it with code only, do I have to make a rectangle each time or skew it?

Thanks.

#2

If I understand right, you would have a full “progress bar image” that you could do a few things to.

You could have it covered with a rectangle and move the rectangle to uncover the progress bar image as needed.

You could also possibly use a mask?

Option 1 sounds easiest to me if possible.

#3

Maybe use .xScale, for a horizontal bar.

#4

Doesn’t it reduce quality of I use a display image?

#5

Thanks for the reply what if the progress bar needs to be inside a HUD or something, it will be tricky to hide some part of it.

And did you mean to draw a black rectangle on top of the progress bar to hide it?

#6

A lot depends on the image.  A solid or a gradient wouldn’t be noticeable.  If you have some other texture , it would probably mess it up.

You could do a combination of your bar with black bar on top of it and use .xScale to size the black bar to hide what you want.  The other would be to use a mask over the area that represents where 100% of the bar should be showing and then put the actual bar to the left of where the mask shows, then as the progress moves, move the bar to the right and it will slide in that way.

#7

If I understand right, you would have a full “progress bar image” that you could do a few things to.

You could have it covered with a rectangle and move the rectangle to uncover the progress bar image as needed.

You could also possibly use a mask?

Option 1 sounds easiest to me if possible.

#8

Maybe use .xScale, for a horizontal bar.

#9

Doesn’t it reduce quality of I use a display image?

#10

Thanks for the reply what if the progress bar needs to be inside a HUD or something, it will be tricky to hide some part of it.

And did you mean to draw a black rectangle on top of the progress bar to hide it?

#11

A lot depends on the image.  A solid or a gradient wouldn’t be noticeable.  If you have some other texture , it would probably mess it up.

You could do a combination of your bar with black bar on top of it and use .xScale to size the black bar to hide what you want.  The other would be to use a mask over the area that represents where 100% of the bar should be showing and then put the actual bar to the left of where the mask shows, then as the progress moves, move the bar to the right and it will slide in that way.