Scrolling Backgrounds

Last Updated 2/24/06

Whether you have a level that will run for an indefinite length or you're just too lazy to make a background for an entire level, scrolling backgrounds can be quite useful. This tutorial covers how to make such a background.

With a scrolling background, you see something like this:
While what you want will probably be a bit smoother, its a seemingly endless background.

What is actually happening is this:

The background is blitted multiple times, and with every frame is moves over slightly. When the background goes too far, its offset is reset.

The program loops through this process to give the illusion of an endless background. This is the basic premise of a scrolling background.

//The offsets of the background int bgX = 0, bgY = 0;

Since the background is moving, we have to have variables to store its offset.

It's typically better to have all scrolling done in a seperate class but eh, doing it locally in main function is less typing for me.

//While the user hasn't quit while( quit == false ) { //Start the frame timer fps.start(); //While there's an event to handle while( SDL_PollEvent( &event ) ) { //If the user has Xed out the window if( event.type == SDL_QUIT ) { //Quit the program quit = true; } } //Scroll background bgX -= 2; //If the background has gone too far if( bgX <= -background->w ) { //Reset the offset bgX = 0; }

After we do our event handling in the main loop, we scroll the background over to the left. Then we check if the background went too far to the left. If it did we restart our scrolling animation by moving the background back.

//Show the background apply_surface( bgX, bgY, background, screen ); apply_surface( bgX + background->w, bgY, background, screen ); //Show the dot apply_surface( 310, 230, dot, screen ); //Update the screen if( SDL_Flip( screen ) == -1 ) { return 1; } //Cap the frame rate while( fps.get_ticks() < 1000 / FRAMES_PER_SECOND ) { //wait } }

Then we show our background once at its offset, then once again right next to it and that should give us the illusion of an endless background.

Then we show the dot, update the screen, cap the frame rate and all that good stuff.

Download the media and source code for this tutorial .