One of the questions that I’m asked most often is how the background scrolling in 1945 works. To answer this question, I’ve removed some of the code from the original 1945 code, added a few things, and came up with this scrolling demo:

scrolling background demo

The best way to understand how the scrolling actually works is by downloading the source code and experimenting with the program.

Here are the main changes:

  • The screen size is now 640 by 544 - the reason for this you will see when you run the code.
  • Scrolling is no longer automatic - you may use the up and down arrow keys to scroll the background. This should help you observe better what is going on.
  • The program ends by pressing Q - I’m hoping that this change would help the menu bar catch your attention…
  • A minimum of instructions is provided in the title bar.
  • Pressing the Escape key toggles between two ways of putting the background on the screen - this is the highlight of the code example.

Basically, we are taking advantage of the fact that the background is just a repeating pattern, so all we have to do is draw a background that is a little larger than the actual screen (here, the background is actually 640 by 512, but the screen size is 1945 is 640 by 480), then just move this large picture across the screen, creating the illusion of movement. Once we hit the edge, we just wrap the image around, which I think does a good job of making us believe that the sea just goes on and on and on to infinity.

If all that sounded complicated, I encourage you to try the demo and toggle between the two modes and scroll the background - you’ll see what I mean, and how simple it really is :)

Feel free to ask questions, and I hope you find this helpful!

scrolling background source code

License

This work is published under a Creative Commons Attribution 2.5 License.