Parallax Scrolling

This text comes from IMPHOBIA Issue XII - July 1996

Hi Coders,

The following minutes you're going to read a nice text about scrolling. So refill you're glass of Coke now. If Day = 31 Dec. then Coke = Champagne.

Parallax scrolling gives perspective to your animations. The scrolling consists of different levels moving at a different speed. The further away the object the slower it moves. If you don't believe me, look outside and wait 'till an airplane flies by :).

In this article we are going to use a 3 level parallax scrolly, meaning a very slow background (the clouds), a slow background (buildings) and a fast (depends on you're prog. lang.) foreground (cars).

The next paragraphs only count for 256 colors, resolution doesn't matter. So we're going to draw 5 pictures : the clouds, the buildings + mask, the cars + mask. For the 'normal' pictures we can use all the 256 colors. The transparent areas are colored using the color with index 0 in the palette. You can still use color index 0 on the non-transparent areas. For the masks we only use color Index 0 and index FFh. The transparant areas are colored using color index FFh the non-transparent using color index 0.

 So at least we can start coding by now.
 Step 1 : Draw the clouds on the screen
 Step 2 : Draw the mask of the buildings using the AND operator.
              Screen AND Mask buildings.
 Step 3 : Draw the buildings using the OR operator.
                 Screen OR Buildings.

 Step 4 : Draw the mask of the cars using the AND operator.
             Screen AND Mask cars.
 Step 5 : Draw the cars using the OR operator.
          Screen OR cars.

If you run this you will get a nice passive landscape with clouds, buildings and cars.

Scheme of what exactly happened :

The first pixels of the clouds are 5 3 7 9 1 2 (col. index 5, col. index 3, ...) The mask of the buildings looks like 0 255 0 255 0 255, which means:

 ************************
 * NT : Not Transparent *            NT T  NT T  NT T
 * T  : Transparent     *
 ************************

The first pixels of the clouds are 2 1 9 7 3 5 (It's a coincidence that they are the inversion of the clouds).

    5        3        7        9        1        2
 00000101 00000011 00000111 00001001 00000001 00000010 ORIGINAL CLOUDS
 AND
 00000000 11111111 00000000 11111111 00000000 11111111 MASK BUILDINGS
 =
 00000000 00000011 00000000 00001001 00000000 00000010 ORIG+MASK
 OR
 00000010 00000000 00001001 00000000 00000011 00000000 ORIGINAL BUILDINGS
 =
 00000010 00000011 00001001 00001001 00000011 00000010 LANDSCAPE

Time for some horizontal scrolling.

 ************************* X - P O S I T I O N ****************
 Frame * Clouds * Mask Building * Building * Mask Cars * Cars *
 **************************************************************
 0        0         0                 0            0           0
 1        1         2                 2            4           4
 2        2         4                 4            8           8
 ...

The clouds move at 1 Pixel/Frame, the buildings as 2 pxls/frm and the cars at 4 pxls/frm.

Why this stuff won't work in True Color ?!

Short Answer : True Color doesn't use a palette => no indexes.

Solution :
The pixels which in 256-color mode have color index 0, have in True Color the (0,0,0) RGB-Value. The pixels with color index FFh uses (255,255,255).

So we reached the end of my first article. I hope at least someone didn't loose his time reading this.

Greetings, >>> Xampagne <<<