Scaling game to show more on-screen when object moves, virtual camera zooming

Games
#1

I’m trying to make a game similar to Tiny Wings, but a bit simpler. The concept is similar, an object will fly to the right and up at different speeds.

Right now, I’m just moving the background group to the left to make it seem like the object is moving right, but I’m having trouble figuring out how to scale the group so that I can still see the ground as I fly higher in the air. In other words, I’m trying to ‘zoom out’ as I fly higher in the air so I can see my object as well as the ground.

Any suggestions are helpful, thanks!! [import]uid: 42110 topic_id: 7716 reply_id: 307716[/import]

#2

i would probably divide the normal height of the screen by the height of the rectangle containing both the bird and the ground… this should give you your ratio to scale by i think

eg

normal screen height = 400
bird is y = -400 (800 pixels up from the bottom)
therfore height of container = 800
ratio = 400/800 = 0.5

so scaling your screen by 0.5 would show everything. [import]uid: 6645 topic_id: 7716 reply_id: 27487[/import]

#3

jmp, thanks for the input!! That worked wonderfully after calculating the setting the y-reference point.

Now I’m stumped with the x-scaling… I’m scaling by the same factor to keep everything from distorting, but I’m having trouble setting the x-reference pont for the scaling factor.

I tried many different reference points, but nothing is doing what I want. I tried setting the game.xReference point to be the bird.x position, which I think should be correct, but everything still moves out of screen after scaling. [import]uid: 42110 topic_id: 7716 reply_id: 27556[/import]

#4

Your reference point is probably right but I think you’ll need to move the actual x position relatively too. Will have to think about it, not done it before

In angry birds the bird stays mostly horizontally at the same position on your screen until the “camera” reaches the right edge and so stops following. There’s some easing to make it smoother. I would probably scale from bottom left if possible. Again not sure yet [import]uid: 6645 topic_id: 7716 reply_id: 27568[/import]

#5

I’m trying to do something similar and am curious how you’re doing the scaling on your “camera”. To simulate a camera zoom I’m scaling a parent display group containing all my game’s objects and layers based on the position of certain objects in the game. But scaling the group appears to be relative, rather than absolute, which is causing me problems.

For example, I scale the group to 0.5 to zoom out, but if I then scale to 1.0 in an attempt to zoom back in to the original scale, nothing happens. Obviously(?) scaling something by 1 is not going to change anything, but how can I get back to the default scale of the group? (In my example I could simply scale by 2.0, but in the actual game the scaling operation is updating every frame with a new factor something like 0.9435, so calculating back to the original zoom level seems impossible.)

If I understand the API correctly image objects DO scale using absolutes, so maybe all I’m asking is how to scale a group the same way. [import]uid: 9422 topic_id: 7716 reply_id: 27801[/import]

#6

Seems I jumped the gun a little and posted my question when 20 more minutes of experimentation gave me my answer. Anyway, for those who might benefit:

To scale a display group in an absolute way set the xScale and yScale properties, for example:

exampleDisplayGroup.xScale = 1.5
exampleDisplayGroup.yScale = 1.5

To scale a display group in a relative way use the scale method, for example:

exampleDisplayGroup:scale(1.5,1.5)
[import]uid: 9422 topic_id: 7716 reply_id: 27811[/import]

#7

Thanks for the information, very helpful to me! i am able to scale and “zoom out” pretty well. and im able to “zoom in” again but on the zoom back in it is very rigid and does not look smooth at all. maybe you could give me a tip or show me an example from your code.
here is what i have:

  
 if(event.target.type=="tire" and event.other.type=="zoomout" ) then  
 if ( event.phase == "began" ) then  
 cameraActive = false  
 gameScreen.xReference = tireObject.x  
 gameScreen.yReference = tireObject.y  
 transition.to( gameScreen, { time = 600, xScale=.50, yScale=.50, transition=easing.inOutExpo } )  
 end  
end  
 if(event.target.type=="tire" and event.other.type=="zoomin" ) then  
 if ( event.phase == "began" ) then  
 cameraActive = true  
 gameScreen.xReference = 0  
 gameScreen.yReference = 0  
 transition.to( gameScreen, { time = 600, xScale=1, yScale=1, transition=easing.inOutExpo } )  
 end  
end

i may be making this too complicated, any suggestions?
i think my problem is that when i zoom out i make my groups reference point my tire (main character) and then when i want it to zoom back in i need to set the group back to 0,0. which seems to work but the screen goes crazy for a second. [import]uid: 19620 topic_id: 7716 reply_id: 27950[/import]

#8

@rxmarccall
You could try putting “xReference = 0,yReference = 0” INSIDE the gameScreen transition.to {…} of line 14, and delete line 12 and 13. I think that would cause the x- and yReferences to transition smoothly from the tire back to 0,0, rather than jolting abruptly. [import]uid: 9422 topic_id: 7716 reply_id: 27973[/import]

#9

I still haven’t figured out how to xScale correctly…

if (boulder.y \< 80) then  
  
 localGroup.yReference = display.contentHeight  
 localGroup.yScale = display.contentHeight/(400-boulder.y)  
 localGroup.xReference = -localGroup.x  
 localGroup.xScale = display.contentHeight/(400-boulder.y)  
  
 end  
 localGroup.xReference = 0

My boulder has a force applied so it travels to the right, and my localGroup (background) moves to the left so the boulder is always on the screen with:

localGroup.x = -boulder.x + 140

Is something wrong with my xReference point?

Thanks! [import]uid: 42110 topic_id: 7716 reply_id: 29962[/import]

#10

What ended up working for me was to put all the groups I wanted to zoom into a new parent group (I called it zoomDisplayGroup). That way, even though all the groups and objects inside it were scaling and sliding around, I could perform the actual camera zoom on a stationary group which simplified things a lot.

Since you’re keeping your moving boulder centered in x by sliding the group it’s in to the left, if THAT group was inside a non-moving parent group you could simply set the xReference for the parent group to be display.contentCenterX. The “camera” should then scale in x centered on the boulder. [import]uid: 9422 topic_id: 7716 reply_id: 29967[/import]

#11

Xenon, your the man. what you suggested also solved my problem that i was having earlier, thanks!!! [import]uid: 19620 topic_id: 7716 reply_id: 30002[/import]

#12

Woohoo! Thanks Xenon, that solved the problem!! [import]uid: 42110 topic_id: 7716 reply_id: 30211[/import]

#13

I call that killing two angry birds with one tiny wing! [import]uid: 9422 topic_id: 7716 reply_id: 30368[/import]

#14

Haha i dont even know what to say to that except that i laughed =D [import]uid: 19620 topic_id: 7716 reply_id: 30437[/import]

#15

Too bad I just found this post. I did the same exact approach as Xenon about two weeks ago. ZoomGroup that changes with velocity. I have been working on implementing some other transitions such as zoom origin point and transitions speeds and types but I am running into some road blocks. To see what I mean look at istunt2 it has amazing camera effects. Zoom in and out, change of reference points and great transitions between them. Really amazing.

I wouldn’t mind trying to create an API to share with everyone but I am getting stuck. I keep having to use the enterframe event for the transitions. This doesn’t allow me to use the transition library. It seems Xenon has find a way that I could use them.

Camera effects are great to give the sense of speed that you want in such a small screen.

I found an issue with sprites origin on the other hand. It seems that as I scale below .5 the sprite the same sprite that was smooth at 1 jiggles at .5

Does anyone know what that is? [import]uid: 8192 topic_id: 7716 reply_id: 31747[/import]