next »

[Hinchy]

I'm working on a remake of an old game of mine in Flash where there are two characters onscreen. I want to be able to have a scrolling camera for the game, but the problem with that is is that most times where I've scrolled a camera in a flash game, I've only had one character, so I could leave the character in the same place, and just scroll the level. However, now that I have two, I want the player to be able to switch camera between characters. I technically did it with a virtual camera in the old version of this game, however, it was really shoddy and the character positions would lag as the camera scrolled. Not ideal.

So, I ask you guys - how do you do your cameras in Flash games?

[Mikademus]

If it isn't important that both players are always on-screen, can't you simply interpolate asymptotically between the positions? Then you'd get a nice accel/deccel when you switch camera focus, and switching would still be very quick.

[Hinchy]

I feel really really bad (and stupid) for saying this but I have no clue what "interpolate asymptotically" means. If you could elaborate I'd be really thankful. 

Camera switching is not the actual issue, as it's simply a matter of changing the scroll position to match the other character. I'm asking how you scroll it at all when normally all I'd do is have the character be in a static position and move the world, which doesn't work if you have two independently moving characters.

[kometbomb]

Well, how about not making the world player centered then? Make it camera centered.

[Theotherguy]

I'm working on a remake of an old game of mine in Flash where there are two characters onscreen. I want to be able to have a scrolling camera for the game, but the problem with that is is that most times where I've scrolled a camera in a flash game, I've only had one character, so I could leave the character in the same place, and just scroll the level. However, now that I have two, I want the player to be able to switch camera between characters. I technically did it with a virtual camera in the old version of this game, however, it was really shoddy and the character positions would lag as the camera scrolled. Not ideal.

So, I ask you guys - how do you do your cameras in Flash games?

I am not familiar with flash, but this is how I do it in all my games:

The first thing you need to do is make your player and everything in your game world live in the same coordinate space. The player should not be static, but should be a dynamic object that is part of your game world.

The next thing you need to do is seperate your game world completely from your view of it. Represent everything in your game world as arbitrary units, which are separate from pixels. What I like to do is have a constant like "1 meter = 30 pixels at 1.0 zoom," or in other words, the number of pixels in a game unit at normal zoom could be your method of conversion.

Once you have done that, you can implement a camera. There are some good articles here on TIGSource for making 2D cameras, but the basic gist of it is that you scale, pan, and rotate everything you render based on the zoom, pan, and rotation of your camera. The easiest way to do this is to multiply all of the pixel locations in your scene  by what is known as a "Transformation Matrix." Again, I'm not familiar with flash, so I'm not sure if this would be easier or harder than in OpenGL (which I am familiar with).

Here is something on matrix transforms (requires some knowledge of linear algebra):
http://en.wikipedia.org/wiki/Matrix_transformation

Here is something on 2D orthographic cameras (in XNA, but the same principles apply):
http://www.paradeofrain.com/tutorials/xna-camera-2d/

Finally, once you have a camera, you can have it focus on an arbitrary position in your game world by panning it and zooming it around. The best way (in my opinion) of doing this is by giving your camera a physical position in space with a mass, and moving it around using something called a PID controller. If you want to focus on both players at once, you can focus on the point in space that is equidistant from both of them, and then zoom so that the distance between them is equal to or smaller than the width of the screen.

Here is my article on PID controllers:
http://forums.tigsource.com/index.php?topic=10130.0

Sorry, I hope I could help. That's the most general solution, and is the one I use, but it might not be best for your game.

[Mikademus]

I feel really really bad (and stupid) for saying this but I have no clue what "interpolate asymptotically" means. If you could elaborate I'd be really thankful.

Hyper-technical link: http://en.wikipedia.org/wiki/Asymptote

Easier answer: assume you will move the camera between A and B. It will take one second to do this. During this second you will update the camera 10 times. (These figures are just for the sake of the explanation). In linear interpolation each position is simply 10% further toward the goal from the origin (toward B from A). If you instead update by a curvilinearly the first and last positions will be near each other and the middle ones will be further apart, a movement which will appear like an acceleration followed by a deceleration. When you update asymptotically you don't use fixed steps but take elapsed time into consideration, and always interpolate between the current position and the goal, which will have the effect of the position never fully reaching the goal. This doesn't matter if your camera updating is continuous, and will create very soft and smooth velocity curves for your camera.

[Hinchy]

Well, how about not making the world player centered then? Make it camera centered.

right, that's what I want to do, but when I incorporate a scrolling camera to transform the coordinate space, the characters lag behind the environment.

I feel really really bad (and stupid) for saying this but I have no clue what "interpolate asymptotically" means. If you could elaborate I'd be really thankful.

Hyper-technical link: http://en.wikipedia.org/wiki/Asymptote

Easier answer: assume you will move the camera between A and B. It will take one second to do this. During this second you will update the camera 10 times. (These figures are just for the sake of the explanation). In linear interpolation each position is simply 10% further toward the goal from the origin (toward B from A). If you instead update by a curvilinearly the first and last positions will be near each other and the middle ones will be further apart, a movement which will appear like an acceleration followed by a deceleration. When you update asymptotically you don't use fixed steps but take elapsed time into consideration, and always interpolate between the current position and the goal, which will have the effect of the position never fully reaching the goal. This doesn't matter if your camera updating is continuous, and will create very soft and smooth velocity curves for your camera.

this is useful but completely irrelevant to what I was looking for. regardless it'll help me out though, so thanks!

I'm working on a remake of an old game of mine in Flash where there are two characters onscreen. I want to be able to have a scrolling camera for the game, but the problem with that is is that most times where I've scrolled a camera in a flash game, I've only had one character, so I could leave the character in the same place, and just scroll the level. However, now that I have two, I want the player to be able to switch camera between characters. I technically did it with a virtual camera in the old version of this game, however, it was really shoddy and the character positions would lag as the camera scrolled. Not ideal.

So, I ask you guys - how do you do your cameras in Flash games?

I am not familiar with flash, but this is how I do it in all my games:

The first thing you need to do is make your player and everything in your game world live in the same coordinate space. The player should not be static, but should be a dynamic object that is part of your game world.

The next thing you need to do is seperate your game world completely from your view of it. Represent everything in your game world as arbitrary units, which are separate from pixels. What I like to do is have a constant like "1 meter = 30 pixels at 1.0 zoom," or in other words, the number of pixels in a game unit at normal zoom could be your method of conversion.

Once you have done that, you can implement a camera. There are some good articles here on TIGSource for making 2D cameras, but the basic gist of it is that you scale, pan, and rotate everything you render based on the zoom, pan, and rotation of your camera. The easiest way to do this is to multiply all of the pixel locations in your scene  by what is known as a "Transformation Matrix." Again, I'm not familiar with flash, so I'm not sure if this would be easier or harder than in OpenGL (which I am familiar with).

Here is something on matrix transforms (requires some knowledge of linear algebra):
http://en.wikipedia.org/wiki/Matrix_transformation

Here is something on 2D orthographic cameras (in XNA, but the same principles apply):
http://www.paradeofrain.com/tutorials/xna-camera-2d/

Finally, once you have a camera, you can have it focus on an arbitrary position in your game world by panning it and zooming it around. The best way (in my opinion) of doing this is by giving your camera a physical position in space with a mass, and moving it around using something called a PID controller. If you want to focus on both players at once, you can focus on the point in space that is equidistant from both of them, and then zoom so that the distance between them is equal to or smaller than the width of the screen.

Here is my article on PID controllers:
http://forums.tigsource.com/index.php?topic=10130.0

Sorry, I hope I could help. That's the most general solution, and is the one I use, but it might not be best for your game.

I will look at those articles and check back. Thanks!

[increpare]

Well, how about not making the world player centered then? Make it camera centered.

right, that's what I want to do, but when I incorporate a scrolling camera to transform the coordinate space, the characters lag behind the environment.

why are they going out of sync?

[Hinchy]

Well, how about not making the world player centered then? Make it camera centered.

right, that's what I want to do, but when I incorporate a scrolling camera to transform the coordinate space, the characters lag behind the environment.

why are they going out of sync?

I'm not entirely sure. But when the camera moves, the characters lag in strange ways, creating a lag when the camera scrolls at a constant speed (not ideal) or even worse, a sort of "bouncy castle" effect when the camera is at a dynamic speed. the characters will be in the position that is approximately ((position they should be in) - (amount the camera has moved this frame)).

[mewse]

when the camera moves, the characters lag in strange ways, creating a lag when the camera scrolls at a constant speed (not ideal) or even worse, a sort of "bouncy castle" effect when the camera is at a dynamic speed. the characters will be in the position that is approximately ((position they should be in) - (amount the camera has moved this frame)).

I don't know coding in Flash, but this is a common problem in any camera-based game if you have things happening in the wrong order.

In a regular game, you have two phases each frame:  an "Update" and a "Draw".  The update is responsible for moving things around;  players, monsters, cameras, etc.  The draw is responsible for actually drawing things to the screen.

When I've seen behaviour like you're describing, it usually means that the game hasn't separated its update from its draw;  it's smashed the two together, so that each object in the world updates its position and draws itself, then the next object in the world updates its position and draws itself, and etc.  If you do this, then you'll have things appear to 'lag' as you describe;  objects updated/drawn before the camera is updated will draw with the previous camera position, and objects updated/drawn after the camera is updated will draw with the updated camera position.

Assuming that I'm correct that that's what's happening in your case, the simple fix is to move the camera's update from the middle of your frame processing to the start of the frame processing.  Doing this will make your camera always be one frame out from where it really ought to be, but at least everything in your game will have the same one frame camera lag, so it won't look as visually jarring as it does now.

The correct (but harder) fix is to separate your Update logic from your Draw logic, so you can update every object in the world, and then draw everything.  If you do this, then you want to move your camera updating code to the END of the update process, so that the camera can update itself based upon where the player ended up moving to.

[Hinchy]

The only problem is with flash, you don't program the draw phase - Flash does it all itself. Worsely, there's no way to sort out exactly when it happens at all. If anyone with Flash experience can prove me wrong, I would love you forever.

[bateleur]

Worsely, there's no way to sort out exactly when it happens at all. If anyone with Flash experience can prove me wrong, I would love you forever.

The way you handle this in Flash is by executing most of your code inside an enter frame handler. That way, assuming your game is successfully running within its assigned frame rate the answer to "exactly when it happens" is "between this frame callback and the next".

Example code:

Code:

function myGameInitFunction() {
 ...
 myGameDisplayObject.addEventListener(Event.ENTER_FRAME, myMainGameLoop);
 ...
}

function myMainGameLoop(evt:Event) {
 // Process one frame's worth of game activity
 ...
}

(Note: That's AS3 code, but AS2 works similarly except you use onEnterFrame. Don't use AS2. Really.)

[Hinchy]

Unfortunately there are specific reasons I must use AS2.
I'd use it if I could.

By the way I love you forever.