Last updated: Feb 2, 2011 (first version)

Level 7 update on Jan 17, 2012 (added animated GIF and expanded a bit more on the details, correcting things from plan changes)

Level 3 update on Jun 4, 2012 (fixed field of view formulas)

Parallax scrolling is a form of scrolling where objects are made to seem to be more distant by having them move at different speeds relative to the foreground. An object at double the distance appears to move half as fast, but also be twice as big. This distance/size offset is what I refer to as "scaling".

The animated GIF above, one of my precursors to game design, shows parallax scrolling very well. Note how the "mountains" up close move twice as fast as those directly behind. They also appear twice as big as those behind. The closest mountains move 3 times faster than the third-closest and third-closest mountains appear to be 1/3 the size. Carry this out to the edge of visiblity where the most distant are 7 times farther. Yet, everything in the scenery lines up for perfect seamless looping. Compare what you see in this animated GIF to what you see in the Sentus Mountains world. For every 2 pixels the closest mountains move, the next closest moves 1. For every 3 pixels the closest mountains move, the third-closest moves 1.

While there are numerous games that use parallax scrolling, especially in fourth generation system games, Platform Masters is much different. It takes the use of parallax scrolling to an extreme that no other game even comes close to. Most games may use like 5 layers to maybe 20 at the most (I'm aware of 5 at the highest - 20 is an estimate). They also tend to have the entire scene scroll vertically by the same amount. Most of these games don't utilize parallax scrolling in the most realistic way. Move 4 pixels and mountains move once and 2 pixels moves a large-looking tree once? That makes absolutely no sense and yet, this is fairly common in most parallax scrolling games. Oh, and don't forget the need to move 32 pixels vertically to get both to move 1 pixel.

Platform Masters uses parallax scrolling at its greatest potential by not only making all objects realistically to scale, but also using not 7 layers like the animated GIF has, not 30 like my most complex animated GIF***, not even a few hundred, but a few thousand layers. Seriously, roughly 5000 layers are used to get the scene the way it is in Platform Masters. World 1, Jeremy's House, is the perfect example on how this all comes to be. The clouds alone use nearly 3000 layers (though not all of them are drawn, for optimization reasons (want to play a game that only gets 15 fps?)) and, by looking at them, you can't tell if they're an actual 2D texture rendered on a 3D flat plane or purely 2D. Ground decals amplify this further, using around 2000 layers. There often a few dozen scenery layers, up to 192 textured ground layers, another 240 or so untextured ground layers, and more. All of this is put together to create the highly-accurate-looking 3D effects. Even the effects of having closer objects in front of further objects is done as well.

How does parallax scrolling create the 3D effects? It all comes down to a formula that's surprisingly simple (and its direct derivatives): "Pixels*Scaling = CU". ("CU/Scaling = Pixels" and "CU/Pixels = Scaling" are the direct derivatives*.) If you know the object's scaling (size and distance, basically the Z position) and how many pixels it covers, you can determine how big or tall the object is or how far apart objects are. Consider, for example, a series of small hills that are only 32 pixels tall and have a scaling of 16. This formula tells me that the hills reach 512 CU high.

The coordinate unit, CU, is the game's backend unit of measure (unlike meters that other games use) as a consequence. It is based on the distance travelled at 1 mph for 1/10 of a second. This term originated from my animation creation, of which dates clear back to 2002. Each CU is exactly 11/75 of a foot (1.76 inches, 4.4704 cm). With this, it's entirely possible to know how tall the hills are in real world units: "512*11/75" or 75.093 feet. Whether large objects like mountains, small objects like springs or a blade of grass, or even astronomical objects like the Moon (the Moon essentially has a scaling of over 12.6 million), this system works for pretty much everything.

Platform Masters is purely 2D at its heart. It has an X axis (increasing left to right (west to east as I usually consider it, though not always)) and a Y axis (increasing down to up). 3D uses 3 axes, a Z axis (increasing backward to forward (south to north as I consider it, though not always)) in addition to the X and Y axes. So then, where does the Z axis come in with parallax scrolling and where does the depth come from?

Scaling is what provides the depth. Unlike the X and Y axes, however, scaling can't be in CU, unless I use a ridiculously wide 179.776° field of view**. Normally, field of view hovers around 60 to 70° in games (to the best of what I can tell). This causes each scaling unit to be 886.81 to 731.21 CU (130.07 to 107.24 feet, 39.64 to 32.69 meters), weird and not-so-friendly numbers. Given this, the higher the field of view, the fewer the CU per scaling unit. By using 73.74°, I get something that's easy to work with - exactly 2048/3 CU per scaling unit. This means, for every 3 scaling units of distance I have, the object will be 64 blocks into the distance. With the overall design of the game, this is quite convenient. If I used 512 or 1024 CU per scaling unit, I'd have the field of view too wide (90°) or too narrow (53.13°). Thus, the 2048/3 makes the most sense. Since 2048 is a power of 2, this makes things easier as most of the human-made parts of the scenery (roads, houses, bridges, etc.) use a power of 2 as the base in some form or another. This provides a field of view of slightly less than 73.74°, a bit wider than normal, but reasonably close. This field of view is hinted at by looking at Carnivalesta's stars from a high place, especially Polaris (the north star that the edge of the Big Dipper "points" to) and Casseopia (the bright "W" in the sky).

3D games have fog. Platform Masters is not 3D and neither is that animated GIF above, but they also have fog that otherwise exactly replicates what a 3D game does. The intensity of fog is dependent solely on distance and visibility. An object 1/3 of the way to the edge of visibility will have its texture 1/3 of the way from its original color to the color of the fog. At or greater than the visibility distance and the texture is a solid color - that of the fog color. You can see this effect in the real world too, though the real world is more complicated. Still, the otherwise linear fade with distance is quite accurate in the real world most of the time (from my experiences). Wait for a foggy day or a blizzard and look at a row of trees extending far into the distance. You'll find that these trees gradually turn into the color of the fog at a nearly linear rate. At 1/4 the distance of the visibility, the trees are quite detailed though at 3/4 the visibility, the fog color dominates. At and beyond the visibility, you can't see any of the trees.

Footnotes:

* Direct derivatives come from solving for the other variables using the rules of algebra without further extention. Indirect derivatives have further adjustments, such as extra variables or a slightly different approach, of which may include a direct derivative. The formula for calculating fog is an indirect derivative to that of calculating transparency - an extra constant and an extra set of parentheses are added.

** The formulas to determine these requires a calculator: "CUPerScalingUnit = ScreenWidth/2 / tan(FieldOfView/2)" and "FieldOfView = atan((ScreenWidth/2)/CUPerScalingUnit)*2". ScreenWidth is the width of the screen (1024 in the case of Platform Masters). FieldOfView is, well, the field of view. "tan" is the tangent function (no wonder why you need a calculator) and "atan" is the arctangent function (another reason for a calculator).

*** You can find this record-breaking animated GIF on my main site along with the bulk of my other animated GIFs.