Shrink a rect: Trouble with coordinate system I guess

Getting Started Newbie Questions
#1

Hello,

I’m sure this is really simple but i’m stuck.

I want to make a timer bar (progress bar in reverse). I have a rectangle and I have a transition.to call that sets the final height value to 0).

It works but when it runs though, the rectangle shrinks on both ends - comes up from the bottom and down from the top. I want it to just shrink down from the top.

I’ve tried setting the reference point to say, BottomLeft but that doesn’t really change the behavior. Clearly, the scaling is happening about the center of the rectangle but I don’t know how to shift it to one end.

Thanks for helping the noob.

PS - I’ve seen the suggestions to use an image and scale it. That might be a better way but I’d really like to *understand* what I’m missing here. [import]uid: 81264 topic_id: 14088 reply_id: 314088[/import]

#2

You need to set it’s reference point to something other than the default center. Maybe a centerBottom reference might work for you. See here : http://developer.anscamobile.com/reference/index/objectsetreferencepoint

Also yes use scale. object.xScale for X (Width) or object.yScale for Y (Height) [import]uid: 84637 topic_id: 14088 reply_id: 51876[/import]

#3

Hmm. Okay, as I mentioned, I tried setting the reference point to something else and that didn’t work. Tried setting the ref point on both the group and the rect - not really sure which one I need to work with.

I tried setting the yScale and that does the same thing - shrink the object at both ends - which is what I would have expected changing the scale to do anyway

Here’s my code

--   
  
display.setStatusBar( display.HiddenStatusBar )  
  
local bkgd = display.newGroup()  
  
local tBar = display.newRect( 0, 0, 80, display.contentHeight)  
--tBar:setReferencePoint(display.TopLeftReferencePoint)  
bkgd:insert(tBar)  
bkgd:setReferencePoint(display.TopLeftReferencePoint)  
--tBar:setReferencePoint(display.TopLeftReferencePoint)  
tBar.x = 60  
tBar.y = 400  
tBar:setFillColor(10,10,250)  
  
local minutes = .5  
local seconds = minutes \* 60 \* 1000  
  
local timesUp = function ()   
 print "Time's Up!"  
end  
transition.to( tBar, {time=seconds, height=0, onComplete=timesUp})  
--transition.to( tBar, {time=seconds, height=0, onComplete=timesUp})

Still don’t get it. I know I’m not alone too - there’s a comment on the setReferencePoint API page saying “can somebody explain what this does?” [import]uid: 81264 topic_id: 14088 reply_id: 51898[/import]

#4

This works, the mistake was setting the reference point on the group as opposed to the image itself.

Working code :

[code]
display.setStatusBar( display.HiddenStatusBar )

local bkgd = display.newGroup()

local tBar = display.newRect( 0, 0, 80, display.contentHeight)
bkgd:insert(tBar)
tBar:setReferencePoint(display.BottomCenterReferencePoint)
tBar.x = 60
tBar.y = 400
tBar:setFillColor(10,10,250)

local minutes = .5
local seconds = minutes * 60 * 1000

local timesUp = function ()
print “Time’s Up!”
end

transition.to( tBar, {time=seconds, yScale=0, onComplete=timesUp})
[/code] [import]uid: 84637 topic_id: 14088 reply_id: 51900[/import]

#5

Wow, I would have sworn I had tried that and it didn’t work. Obviously does thought so thanks.

Appreciate the help. [import]uid: 81264 topic_id: 14088 reply_id: 51926[/import]

#6

Glad to help :slight_smile:
[import]uid: 84637 topic_id: 14088 reply_id: 51927[/import]