Adding layers to a game gives it the illusion depth and a feeling of being larger than it is. A layer can be thought of as an area that is either in front of or behind other areas. This is typically achieved by creating images that are displayed in a specified order that hides or reveals certain aspects of the game. There are a few different methods of incorporating layers into a game. Let's start off with the image layer method.

Image Layering

The most common method of layering is to use images that are displayed in a coordinated manner. Each image layer is typically the same size as the overall game screen. In the following example three separate image layers are used. The first layer is the sky and clouds image which is the farthest layer away from the game player. This layer image will be drawn first and acts as the backdrop for the game's scene. The second layer image contains pillars and will be drawn second. Anything that needs to be seen behind the pillars will be drawn before the pillar layer image. This will give the illusion of those objects being farther away from the player. The third image layer contains the ground and a bush in the foreground.

The flying birds are drawn in between the layers to give them a sense of depth. The birds are also drawn smaller as they recede into the distance once again adding the to illusion of depth. By keeping track of when to display layers and when to draw sprites in between them a world with a simulated distance to the background can be created. The following example program named Layers.BAS can be found in your .\tutorial\Lesson19\ directory.

As you can see the effect is fairly simple to achieve. The first layer image, the sky, contains no transparent areas since we want it to cover the entire scene. Once the sky layer has been drawn any sprites or objects that need to be the furthest away are then drawn. Lines 40 and 41 display the sky image and then a flying bird sprite drawn at half size. Not only will this bird be furthest away but by drawing it at half size adds to the illusion of distance.

The pillars image layer comes next. It contains a transparent area that includes everything except the pillars themselves. When our first bird drawn flies past the pillars the pillars will be drawn over the bird making it appear the bird is behind the pillars. Once the pillar layer is drawn any objects or sprites that should appear to move in front of the pillars need to be drawn. Lines 42 and 43 draw the pillar image and then a flying bird sprite is drawn at three quarters size. This bird will now appear closer than the first bird sprite that was drawn.

Finally the ground image layer is drawn. Once again, it contains a transparent area that encompasses everything except for the ground and bush. Another bird sprite is drawn this time at full size making it appear to be in front of everything. Notice also that the speed of each bird is varied depending on its distance. The farther away a moving object is the slower it moves which adds even more realism to the depth illusion.

Sprite Layering

Another way to layer images is to assign layer information to sprites. In the following example each sprite has been assigned a layer number it belongs to. Layer one is closest to the player while layer five is furthest away. By drawing the sprites from layer five to layer one the sprites closer to the player are guaranteed to be drawn over sprites further away. Also, as shown in the example, varying the size of the sprites according to their layer also adds to the illusion of depth on the screen. The following example program is included as SpriteLayers.BAS in your .\tutorial\Lesson19\ directory.

Within the TYPE definition on line 11 an integer variable named .layer has been added to assign the layer number each sprite belongs to. In line 32 a random layer is added to each bird sprite created. The FOR...NEXT statement in line 46 then cycles through the layers from 5 to 1. The FOR...NEXT statement in line 47 then cycles through the sprite array and if line 48 detects that the sprite belongs to the current layer it is processed and drawn to the screen. This mechanism ensures that sprites further away are drawn first. As the birds progress through their flights they are brought closer to the player by decreasing their layer number. Using a method such as this you could for instance have enemy ships in the background circling around waiting to come forward and attack the player. Only when a sprite's layer is equal to the player's layer can the two interact.

Parallax Scrolling

Parallax scrolling is used to give the illusion of depth to moving scenery. The process was pioneered by Moon Patrol in 1982 and was revolutionary for its time. I remember the first time I encountered Moon Patrol in the arcade. I was fascinated with the new use of graphics and subsequently spent my entire day waiting in line to play it. In honor of Moon Patrol let's recreate the effect in the next example program. The following example is included as MoonPatrol.BAS in your .\tutorial\Lesson19\ directory.

The background blue mountains and foreground green mountains are 512x128 pixel image strips. Each of the mountain images also contains a transparency layer to allow the image behind them to show through. The ground image strip was actually created procedurally by the game to allow for obstacles such as holes to appear. In this example the ground strip is a 512x64 pixel image strip used to complete the look of Moon Patrol's screen. The image strips are moved across the screen at varying speeds giving the parallax effect you see in the demo. Figure 4 below graphically demonstrates this process.

This example is as simple as parallax scrolling gets. The image strips are twice as wide as the screen. When the image strip's X coordinate reaches -256 the strip has run the entire course. Resetting the image strip's X coordinate back to 0 continues the illusion of a never ending scene scrolling by. If you look closely you'll see that each mountain strip image is actually two of the same image side by side. Instead of placing two images side by side as this example does a single image can be used and a copy placed by its side instead. The following example will revisit the image layers used in the image layering example to scroll the sky, pillars, and ground to the right and left by using the ARROW keys. This example has been included as Parallax.BAS in your .\tutorial\Lesson19\ directory.

As you can see in lines 18 through 23 two identical images are drawn side by side allowing the same image to repeat as the parallax motion continues. You get the same effect as with the Moon Patrol demo but this time the images are the same width as the screen.