I'm working on a game in Allegro for C++. I'm stumped about how to scroll the screen.

I'm trying to make the screen scroll with the player, as it does in classic side-scroller games such as Super Mario Brothers. What is the approach I should take to implement such behavior?


2 Answers 2


You need to know two basic things:

  • The size of your screen, in whatever units you are most comfortable with (that is, tiles or pixels, or whatever -- as long as all your measurements use the same unit you're basically fine). This is essentially the size of the "viewport" into your level or world.

  • The position of the focus point of your view (that is, where in the world your "viewport" is looking at or centered on).

When you go to prepare a frame for rendering, you take the focus point of your viewport, and use that plus the known size of the viewport to figure out where the edges of the viewport within the world are. Something like

var viewportLeft = focusPoint.X - (viewportSize.Width / 2);
var viewportRight = focusPoint.X + (viewportSize.Width / 2);
var viewportTop = focusPoint.Y + (viewportHeight / 2);
var viewportBottom = focusPoint.Y - (viewportHeight / 2);

For example, if you defined your world with tiles, and the whole world was 1000 tiles long, and your focus point was at (500, 40) and your viewport was 200 tiles wide, then viewportLeft (the first tiles you see on the screen) would be 400 and viewportRight (the last tile you see on the screen) would be 600. Similarly for the vertical dimension.

Then, you simply only render the tiles that are within that viewport, and you have a system that allows you to center your viewport anywhere with the world. To have your viewport follow your player, simply set the focus point to the player's location every frame.

I specifically suggest tracking the focus point distinctly from the player position so that you can have more flexibility. For example, by doing what I said above and setting the focus point to the player position every frame, you may find the camera feels too rigidly attached to the player. You may want to simulate some sort of "elasticity" in how the view follows the player, or implement special behavior when the player is near the edge of the level (as is very typical in side-scrolling games). Divorcing the two also allows you to easily implement those automatic-scrolling levels from Mario games -- simply increment the X position of the focus point by a fixed amount every frame, for example.


The basic idea is keeping the player in the center of the screen while moving your level in the opposite direction the player moves. You should know the position of the player, and offset everything in your level by (-1)*player.pos.xy every frame. For a background, you might want it to seem like it is a bit farer, so you should offset it by (-1)player.pos.xy(1/distance). I think it is the most basic approach.

You might want to implement a tile-based level which can be done several ways, I think a perfect tilemap for beginners is just a text file, with a special character for every tile type, for example a text file containing 100*100 dots would correspond to a 100*100 tiled level with "air" everywhere. Replace a dot with a _ which your engine would read as a platform that you can stand on, # for an other object, etc.

The basic movement would be like keeping a velocity vector and a position vector in your Player class for example, and every frame update your player like player.pos+=player.velocity. I'd also keep a movespeed, jumpspeed and an acceleration. In my first simple game I did jumping by giving an upward y velocity to the player, and substract a constant gravity value from that velocity, and in simple games I think it suffices.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .