# How to make a scrolling background

I'm making a Shooter game like "1943" and "Jamestown". I am Using Visual Basic 2010. I was wondering how I would make the background scroll up to simulate moving forward. I would also like it to scroll slightly to the left and right when the player reaches the sides of the screen. Finally, how would I make this efficient? I was thinking about using a animated GIF or making a looping BitMap. Please could someone help me out?

## 2 Answers

The backgrounds in Jamestown are not looping bitmaps, because they are always changing from the start of the level to the end.

But if you only need a looping bitmap, and you only need it to loop vertically, the easiest way I know is the following (cross reference with the image below):

1. Draw the background twice, stacked vertically like on the image below. Of course the image you use must be seamlessly tileable. The red rectangle represents your screen.

2. Start moving both background instances down. You do this by adding some value to their vertical position each frame.

3. When they reach the position represented in the image (e.g. when topBackground.Y >= 0), subtract one background height from each of their vertical positions to bring them back to step 1.

4. Repeat.

There are more complex ways of handling the problem depending on whether you need to loop horizontally and vertically at the same time, or if you need to zoom and rotate the background. You can use these as reference if needed, although I'm not sure how you'd translate it to your platform:

• what you describe here is almost the way how 2D scrolling works on most hardware accelerated sprite systems (like NES) – tigrou Apr 4 '12 at 11:06

I would suggest against an animated GIF (at least to implement scrolling).

Instead, start with getting a single image onto the screen via whatever framework, technology stack or methodology you're most familiar with (or seems to make the most sense). e.g. WinForms, WPF, GDI+, XNA, HTML 5 Canvas.

Once you done this, start on making it move over time. There are quite a few ways to achieve this but most come back to the idea of incrementing the position by a small amount at regular intervals. (In XNA, its done in the Update Method. In Winforms and WPF it's done via the addition of a timer.)

After achieving this, you just need to extend the idea to an entire grid of images moving in a particular direction. There are various approaches to deal with the fact that your arena of play is probably going to be a lot larger than the screen... but best not to stress about these bridges until you actually need to cross them.

• I would never suggest using an animated GIF for animations in a game. Animating single frames of PNG images is almost always better. – Amplify91 Apr 11 '12 at 10:05
• It depends on the UI framework in question but, yes, animated GIFs are rarely a good first choice. – lzcd Apr 11 '12 at 23:29