Corona SDK: fill up a bar from left to right

2
votes

I'm learning Corona SDK and am new to lua as well (i mainly do ruby and some javascript).

I have a bar that i want to fill up as the user does stuff. I've set it up as follows:

            --outer rectangle
    powerBar = display.newRect(210, 6, 24, 9)
    powerBar.strokeWidth = 1
    powerBar:setStrokeColor(254,203,50) 
    powerBar:setFillColor(0,0,0,0)  

            --inner rectangle which fills up
    powerBarFill = display.newRect(211,7,0,7)
    powerBarFill:setFillColor(234,183,30)

When the "stuff" happens, i add 1 to powerBarFill.width, which i thought would make it grow from left to right. But, it's actually growing out from the centre, ie its x is in the centre and the width extends either side from that.

Whats the best way to keep the left side static and grow the right side? Can i set it so that it's x position is actually on the left hand side rather than in the middle? Seems like that might do it.

cheers in advance

2
luacoronasdk

2 Answers

5
votes

I've run into this problem as well when creating a progress bar. The problem is with the rect's reference point. The default reference point is in the center of an object, as you've noticed. You can use object:setReferencePoint() to change it. I believe you want to use the display.BottomLeftReferencePoint value:

powerBar:setReferencePoint(display.BottomLeftReferencePoint)

Keep in mind that you have to set this value before you set your x,y values. So in your case you'll need to set the reference point after creating the rectangle, and then assign values to x,y again (even though you already did this in the newRect constructor):

powerBar = display.newRect(210, 6, 24, 9)
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
powerBar.x, powerBar.y = 210, 6
2
votes

If it's width is from the X position on both sides:

1) It should start at:

Centre - (Width when it's full / 2)

2) Every frame, add:

incrs = 1 --Amount to increase by
width = width + incrs
x = x + incrs / 2