I'm implementing a 2D side scroller for iOS (using C/C++ with OpenGL) (beat'em up style like double dragon/final fight ).

My scenes are composed of one cyclical background image ( the end of the image connects perfectly with the beginning ). This is to produce a cyclical scroll effect.

I was wondering how could I implement a camera that follows my player movement ?

( Resources / Links are greatly appreciated with explanations :) )


Presumably you have a coordinate system for your level, so that you always know where any individual entity in the level is (or, more likely, where those entities are spawned so that you know when they should become active and start engaging the player). You've also got your player entity in there, and that's the one you want your camera to track. The camera itself needs a position in the level, too -- I will assume here that the position of the camera in the world corresponds to the center of the screen, but you could just as easily choose another point of reference.

The simple solution is to always have the player centered in the screen, so the camera's position is always set to the player's position every frame. This tends to be somewhat unpleasant for player's, however. A better solution is to allow the player to move around within the center region of the screen and only scroll when the player character gets near the edge of the screen -- since you know the camera's position and the width of the screen, you can use that to compute two borders. When the player's X coordinate falls outside of the range of one of those borders, adjust the camera's X coordinate appropriately.

To scroll your background, you can do what notabene suggested and simply adjust the UV coordinates of the quad rendering the background (ideally this would be done by setting a shader parameter and doing the offset in the shader, instead of mapping and unmapping the quad's vertex buffer every frame, but you could do either). The important part there is that the addressing mode be set to wrap.

  • \$\begingroup\$ Thanks for the explanation, do you have any resources that I could look that somewhat describe your approach ? \$\endgroup\$ – Mr.Gando Jan 31 '11 at 13:28
  • \$\begingroup\$ I don't offhand, unfortunately, it's a pretty broad topic. Is there a specific part of my answer you'd like clarification about? Alternatively you could try your hand at implementing something and then post another question when you run in to specific problems. \$\endgroup\$ – user1430 Jan 31 '11 at 16:16

The most easy thing to handle which came to my mind is just to draw fullscreen quad with your background texture. And move UVs in x (so move only U). And set UV border method to repeat.

edit: Texture coords are between 0-1. But that doesn't mean that you cannot specify any other values. UV border method says how will gpu handle value beyond 1 and under 0. You can set it to clamp, mirror, repeat. In opengl you can do it this way:


nice article is here: http://www.flipcode.com/archives/Advanced_OpenGL_Texture_Mapping.shtml

  • \$\begingroup\$ Hey, thanks for the answer, I was wondering what do you mean when you say " And set UV border method to repeat." . Thanks ! \$\endgroup\$ – Mr.Gando Jan 31 '11 at 13:27
  • \$\begingroup\$ I edited my answer for you. Hope it will help. \$\endgroup\$ – Notabene Jan 31 '11 at 14:35
  • \$\begingroup\$ But i have to say that Josh's answer is much more complex and you can learn a lot from it. \$\endgroup\$ – Notabene Jan 31 '11 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.