Map Scrolling

Side scrolling is essential for 2D games. Most of them rely on this feature to move the character across the level, and they do so in a very clever way. Instead of having one big screen, the level is divided in parts and they move along the screen, instead of the character.

Since we're using scratch, the screen resolution is 480x360 pixels, so we'll create our level with double the size of that(960x720) and then we will divide it in four parts.

 You can break it in as many parts as you want, but in order to do so you will have to calculate the dimension of each part and work out the level resolution accordingly.

Moving on to coding, we will first use this template:


The code for each of the sprites used for the back ground is similar to this:

Going back 1 layer puts the sprite behind the aim. The x and y position of the sprite puts their centre inn one of the four corners. With each in their respective corners, the full image is complete.

The following code moves around the sniper scope through the level up to a certain position x or y. The variable scrollx is that limit. If we don't use this limitation the player will scroll infinitely until he is out of the level map. Each one of the four codes sets this limit to one of the four corners.

Moving the scope

Limits of the screen

Now for something a teensy bit more advanced. The next template shows a sniper game with some more details to it, especially in the level design. Note that the building sprites have windows without background and that there are some weird grey shapes as sprites there. The grey shapes are the inside of the building, thanks to them we can put our target inside the building without any problem. All we have to do is put the building sprite on layer 1, the character on layer 2 and the grey background on layer 3.

Placing the building

Placing character inside building

Placing grey background behind character