When zooming out...

I am having issues zooming out by scaling a group.

I understand that when I scale by half, that I will also need to move the location of the group.

I’m using Camera as my group, ultimately, I have it move to the correct spot but the transition is a little odd… it’ll move towards middle then back down to where it needs to be.

This is my code snippet, maybe someone can help me what I’m doing wrong— basically I have it so the person presses a button then this happens:

transition.to(camera, {time=1000, xScale=0.5, yScale=0.5, y= display.contentHeight/4 })

The end result is exactly what I want - everything looks correctly zoomed out.  But the transition seems a little off, like it’s zooming out with some space below then moves down.  I tried making two transitions, one for the xScale/yScale and one for the moving of the y, doesn’t do anything.  And when I do it without the transition, it still has a brief second or two where it looks to be zooming out but off centered, then quickly centers it.

Maybe I’m doing something wrong with the anchorPoints in the group?  When it’s done, everything is correctly zoomed, it’s the brief transition that looks ‘off’, like it’s shrinking then adjusting.  But even when I do it simultaneously it seems to still do it, subtle but it’s there and annoying… help!

Try settings anchorChildren to true:

https://docs.coronalabs.com/daily/api/type/GroupObject/anchorChildren.html

Scaling groups is tricky and getting the visual effect you want can be a challenge till you understand how groups anchor and resize based on their contents.

Also, recall that the origin of a group is <0,0> at the upper left. If I recall, scaling occurs around the center, so if the content is offset, the scaling will seem to make the content move towards the groups origin.

Thanks @roaminggamer 

I’ve been doing as you say and still can’t seem to get it to work.  I did a test and readjusted everything so all the anchor points are at default… Still acting a little strange.

When I do it , everything shrinks to half size as expected then soon soon as it stops shrinking it adjusts everything location- all this takes only a moment but just looks strange because the movement adjustment isn’t synchronized with the scale/shrink of the display group.

I need to step away I think and take a second look another time.  I think you are right with the anchor points and anchorChildren , I just can’t seem to get it to work.  I tried without transition and it basically shrinks everything, but the display objects are 200 or so points above normal location with blank background beneath… then it moves it back down (much like a transition tho I am not transitioning it) to be correctly positioned as if it was zoomed out.  :huh:

OK so I’m still up , whoops, and trying to do other work arounds to see if I can get something similar, so I tried this bit of code:

for i=camera.numChildren, 1, -1 do &nbsp; &nbsp; camera[i].yScale = 0.5 &nbsp; &nbsp; camera[i].xScale = 0.5 &nbsp; &nbsp; camera[i].y = 700 end

Which scales all the objects correctly, however, it’s not moving the position of them even though I have that last ‘camera[i].y = 700’  … and other combinations like ‘camera[i].y = camera[i].y + 500’       …Could be completely wrong in this approach but I’m stumped.  Alright sleep appreciate any more input

Anddddd… my perseverance has won… this seemed to do the trick…

for i=camera.numChildren, 1, -1 do &nbsp; &nbsp; camera[i].yScale = 0.5 &nbsp; &nbsp; camera[i].xScale = 0.5 end camera.y = display.contentHeight/2

I’m creating a game where there’s a button that lets you zoom out to ‘preview’ the entire level.  Though there isn’t any smooth transition zooming out… pressing the button will immediately and simultaneously become zoomed out using the above snippet.  Hopefully I can tweak some things so it’ll transition zoomed out but honestly I’m happy with this for now , woooooo sleep! 

EDIT UPDATE: I think the issue occurring because I was tracking an object with the Camera Perspective library , and with boundaries…If others have this issue maybe something to look at.  I also got a smooth transition working with the zoom.

Try settings anchorChildren to true:

https://docs.coronalabs.com/daily/api/type/GroupObject/anchorChildren.html

Scaling groups is tricky and getting the visual effect you want can be a challenge till you understand how groups anchor and resize based on their contents.

Also, recall that the origin of a group is <0,0> at the upper left. If I recall, scaling occurs around the center, so if the content is offset, the scaling will seem to make the content move towards the groups origin.

Thanks @roaminggamer 

I’ve been doing as you say and still can’t seem to get it to work.  I did a test and readjusted everything so all the anchor points are at default… Still acting a little strange.

When I do it , everything shrinks to half size as expected then soon soon as it stops shrinking it adjusts everything location- all this takes only a moment but just looks strange because the movement adjustment isn’t synchronized with the scale/shrink of the display group.

I need to step away I think and take a second look another time.  I think you are right with the anchor points and anchorChildren , I just can’t seem to get it to work.  I tried without transition and it basically shrinks everything, but the display objects are 200 or so points above normal location with blank background beneath… then it moves it back down (much like a transition tho I am not transitioning it) to be correctly positioned as if it was zoomed out.  :huh:

OK so I’m still up , whoops, and trying to do other work arounds to see if I can get something similar, so I tried this bit of code:

for i=camera.numChildren, 1, -1 do &nbsp; &nbsp; camera[i].yScale = 0.5 &nbsp; &nbsp; camera[i].xScale = 0.5 &nbsp; &nbsp; camera[i].y = 700 end

Which scales all the objects correctly, however, it’s not moving the position of them even though I have that last ‘camera[i].y = 700’  … and other combinations like ‘camera[i].y = camera[i].y + 500’       …Could be completely wrong in this approach but I’m stumped.  Alright sleep appreciate any more input

Anddddd… my perseverance has won… this seemed to do the trick…

for i=camera.numChildren, 1, -1 do &nbsp; &nbsp; camera[i].yScale = 0.5 &nbsp; &nbsp; camera[i].xScale = 0.5 end camera.y = display.contentHeight/2

I’m creating a game where there’s a button that lets you zoom out to ‘preview’ the entire level.  Though there isn’t any smooth transition zooming out… pressing the button will immediately and simultaneously become zoomed out using the above snippet.  Hopefully I can tweak some things so it’ll transition zoomed out but honestly I’m happy with this for now , woooooo sleep! 

EDIT UPDATE: I think the issue occurring because I was tracking an object with the Camera Perspective library , and with boundaries…If others have this issue maybe something to look at.  I also got a smooth transition working with the zoom.