Confused about x, xOrigin, xReference

Just getting started with Corona and having trouble doing something that seems like it should be really easy.

I want to have a rectangle with the upper-left corner at 0,0 and then be able to specify a width from 0 to the display.contentWidth (like making my own progress bar). I have tried this:

local progress = display.newRect(0,0,display.contentWidth,20); progress:setFillColor( 255, 0, 0); progress.width = display.contentWidth / 2;
But since objects are centered on the screen, the resulting rectangle moves from the 0,0 origin and is now horizontally centered.

I want to change the width of the rectangle WITHOUT moving the X origin. I’d really like to avoid having to write my own method (and using object inheritance, etc) just to override this behavior.

Seems like there should be some setting of xOrigin or xReference that would make the rectangle be left-aligned always instead of always centered. But I haven’t found any way to do this.

This default of having everything centered is really driving me crazy for UI design.

Thanks for any help you can give. [import]uid: 12529 topic_id: 5839 reply_id: 305839[/import]

you have read the docs right? :stuck_out_tongue:

[lua]progress:setReferencePoint(display.topLeftReferencePoint)[/lua] ?

http://developer.anscamobile.com/reference/index/objectsetreferencepoint [import]uid: 6645 topic_id: 5839 reply_id: 20008[/import]

Yes, but it doesn’t “stick”. In other words, EACH TIME I set the width of the rectangle, I have to call:

progress.width = newWidth; progress:setReferencePoint(display.topLeftReferencePoint) progress.x = 0
My point is that I don’t want to do that each time I change the rectangle’s width. As I said in my original post, I don’t want to need to create my own setWidth routine that does this extra stuff.

Why can’t Corona have a simple “Align” property that works like this, or a way to make the setReferencePoint “stick” instead of having to constantly reset the origin?

While the default of Centered might make sense for games, it’s becoming a real pain for other (normal UI) application development.

I guess till Corona can be improved to handle this I have no choice but to write my own functions to do this. [import]uid: 12529 topic_id: 5839 reply_id: 20013[/import]

set the reference point first (one time only), before changing the width

does that not work?

should you not be using xScale anyway? [import]uid: 6645 topic_id: 5839 reply_id: 20042[/import]

That’s exactly the issue: you must call setReferencePoint EACH TIME. There needs to be a way to make this stick so that changing the width of a rectangle maintains the previous “alignment”.

And no, xScale doesn’t help. Changing xScale still causes the rectangle to be centered instead of left-aligned.

Corona desperately needs some way to handle object alignment properly. Coming from the Android world with it’s complex but powerful Layout structures it is very difficult to convert an application layout into Corona code. For Corona to be successful in the Android market, it needs to add functionality and not take it away…or at least make life easier. Right now Corona is making my life a lot harder. [import]uid: 12529 topic_id: 5839 reply_id: 20196[/import]

changing xScale definitely doesn’t centre it

try it:

[lua]local rect=display.newRect(50,50,200,50)
rect:setReferencePoint(display.TopLeftReferencePoint)
rect:setFillColor(255,0,0)

function go(event)

rect.xScale=0.5

end

rect:addEventListener(“tap”, go)[/lua] [import]uid: 6645 topic_id: 5839 reply_id: 20200[/import]

however note continually tapping the object doesn’t keep halving the size. i was going to post this is a bug but i guess it treats it like an image and an image is always a certain size. calling xScale = 0.5 on it twice wouldn’t make it quarter size. worth bearing in mind

[lua]local rect=display.newRect(50,50,200,50)
rect:setReferencePoint(display.TopLeftReferencePoint)
rect:setFillColor(255,0,0)

function go(event)

rect.xScale=0.5
print(rect.width … “:” … rect.contentWidth) – always 200,100
return true

end

rect:addEventListener(“tap”, go)[/lua] [import]uid: 6645 topic_id: 5839 reply_id: 20202[/import]

Actually, I can understand why xScale doesn’t keep cutting it in half. Yes, this should probably be better documented.

If it kept cutting the size in half, then you’d have this weird behavior like this:
[lua]rect.xScale = 0.5
rect.xScale = 0.5
print(rect.xScale)
–> 0.25 ??[/lua]
and it wouldn’t make sense to it to return 0.25 when you just assigned 0.5 to the property.

I’ll play with xScale again to see what it does for me. I could have sworn that I tried using xScale at the very beginning and that it didn’t work, but maybe I was missing the initial setReferencePoint call. [import]uid: 12529 topic_id: 5839 reply_id: 20244[/import]