Camera movement with transition.to

Solar2D General Questions/Discussion
#1

So I have a problem. I’m making a game, and when stuff moves on the screen, I want the camera to follow the player.
I’ve done that by putting everything in a display group, and setting the coordinates of that display group relative to the players’. Kind of like this:

displayGroup.x = - player.x + 200 -- [or any constant]

This works great, except that the camera movement is rigid, and I don’t like that. It feels like it’s nailed to the player.
So I want to make it smooth. Like “follow” the player, with a smooth animation to it. How do I do that?
I tried with transition.to.

transition.to( displayGroup, {time=10, x = - player.x + 200} )

But that doesn’t work at all. For once, the animation isn’t smooth AT ALL, and also that camera movement is completely erratic. It has no relation to the player’s movement.
What is wrong here?
Thanks! [import]uid: 13720 topic_id: 5195 reply_id: 305195[/import]

#2

I’ll bump this, maybe someone can help me… Anybody? :slight_smile: [import]uid: 13720 topic_id: 5195 reply_id: 17451[/import]

#3

Have you looked at the Egg Breaker example code? It does similar to what you’re looking for. You’ll want to just use an enterFrame listener to update the position, rather than a transition.to .

On a second note, it sounds like you’re also wanting to sort of ease the movement? You’ll want to do that programmatically as well. Check out some “programmatic animation” tutorials if you need help with this. [import]uid: 12405 topic_id: 5195 reply_id: 17533[/import]

#4

Thanks Adam. I’m just looking at this for the first time. For Florin, it looks like egg breaker is doing the following…

[lua]-- Camera follows bolder automatically
local function moveCamera()
if (boulder.x > 80 and boulder.x < 1100) then
game.x = -boulder.x + 80
end
end

Runtime:addEventListener( “enterFrame”, moveCamera )[/lua]

If you trace everything further back, the GAME object is a display group that all the game objects get inserted into.

Things like “SCORE” are a separate group so they stay in position while everything else moves.

I’m about to try to get this working in my own game - so I’ll let you know if I find anything interesting out. [import]uid: 14327 topic_id: 5195 reply_id: 17966[/import]

#5

Yes, I did that, that wasn’t a problem. While my player moves in one direction, the display group behind it containing all the other items moves in the opposite direction to create the “moving camera” effect. That’s ok, works. But my problem is that it feels too rigid. How can I make it smooth?
Like, when my player moves, the display group behind it behaves somewhat elastic, as opposite to “glued to the player”, like it feels now.
To better understand what I said, imagine that everything behind the player is linked to it through some kind of distance physics joint, so that when the player moves, the display group starts to move slowly, then gains speed as it approaches it’s “destination”, and when it’s about to reach the player’s position, slows down again. Do I make any sense?.. :slight_smile: [import]uid: 13720 topic_id: 5195 reply_id: 19021[/import]

#6

The most common (and easiest) way to accomplish this is by using the difference between the player (or the object you want to track) and the current camera position by X, and then adding that to the camera position.

For this example we say that X is 10, and all coordinates are on the X axis. For the y axis, you basicly do the same thing

[code]Frame 1:
Player is at 500, camera is at 0.
500 - 0 = 500
500 / 10 = 50
camerapos = 0 + 50 = 50
Frame 2:
Player is at 500, camera is at 50.
500 - 50 = 450
450 / 10 = 45
camerapos = 50 + 45 = 95
…

Frame 3:
Player is at 300 (he moved left), camera is at 95.
300 - 95 = 205
205 / 10 = 20.5
camerapos = 95 + 20.5 = 115.5
This may not make a lot of sense now, but try implementing it, it’s extremely smooth.
If you don’t succeed, ill come up with a quick example, just let me know :slight_smile:

PS: Don’t take these calculations for granted. I’m good with formulas and coming up with ways to calculate things, but doing it in my head is becoming more and more of a challenge since i finished school :stuck_out_tongue: [import]uid: 7980 topic_id: 5195 reply_id: 19129[/import]

#7

Hi can you give an example ? It will be nice to see how to use it… [import]uid: 13156 topic_id: 5195 reply_id: 30138[/import]

#8

Take a look at the Ghosts vs. Monsters sample app … it shows camera movement (left and right) via transition.to as well as manual camera movement with your finger.

Here’s the link:

http://developer.anscamobile.com/code/ghosts-vs-monsters [import]uid: 52430 topic_id: 5195 reply_id: 32239[/import]

#9

Ziao’s formula is spot on. Here is a compressed version:
[lua]
camera.x = camera.x + ((object.x - camera.x) / 10);
camera.y = camera.y + ((object.y - camera.y) / 10);
[/lua]
Just change the 10 to change the amount of dampening. [import]uid: 173326 topic_id: 5195 reply_id: 142372[/import]

#10

Ziao’s formula is spot on. Here is a compressed version:
[lua]
camera.x = camera.x + ((object.x - camera.x) / 10);
camera.y = camera.y + ((object.y - camera.y) / 10);
[/lua]
Just change the 10 to change the amount of dampening. [import]uid: 173326 topic_id: 5195 reply_id: 142372[/import]