Everything2
Near Matches
Ignore Exact
Full Text
Everything2

parallax scroll

created by WWWWolf

(idea) by mfk (5.6 mon) (print)   ?   (I like it!) 1 C! Sun Mar 31 2002 at 23:43:51

Parallax scrolling is an extremely nifty effect seen mostly in 2D games. It gives a three-dimensional feel at little performance expense; this made it used in nearly all 2D games. Parallax scrolling works on the idea of perspective - objects far away will not move as fast as objects nearby. The scene is divided up into different layers-a bitmapped foreground, background, etc. The closer the camera is to a layer, the faster that layer will scroll, while distant objects like the background will move slowly. Thus, this technique creates the illusion of depth commonly seen in 2D games.

Sonic the Hedgehog 3 deserves special mention for showing what exactly is possible with parallax scrolling. In Icecap Zone, lots of middle grounds are used, with little windows in the background giving the player a small view of the outside world. Hydrocity Zone took it to the extreme; the player's perspective of the water surface would actually change if the player was above or below water. All in all, it's an important part of 2D programming.


(idea) by yerricde (8.7 mon) (print)   ?   (I like it!) 2 C!s Mon Apr 01 2002 at 0:55:14

Parallax scrolling gives a 2D game a greater sense of depth and immersion by creating the illusion of a third dimension. There are three main methods of parallax scrolling on video game console systems.

The layer way

If your display system supports multiple background layers, you can scroll them by simply changing each layer's horizontal offset by a different amount. However, you don't want to place too much in front of the layer containing the objects with which the player interacts; otherwise, you'll obscure the action, which is annoying, and annoying games don't sell.

Most of the time, in a side-scrolling platform game, you apply parallax only to the x dimension. This gives the illusion that the camera is panning up and down while dollying sideways. In an overhead-view game, apply parallax equally to both dimensions.

pseudocode

This pseudocode assumes a display system with three layers (such as that of the Super NES), numbered 0 to 2, and a library function set_scroll() that takes a pair of pixel coordinates, pokes the proper values into the display and (if necessary) rewrites the tiles at the edges of the scroll area. layer_depth[] is an array containing the distance of each layer from the camera. The layer_depth of the player's layer is defined as 256. camera_x and camera_y are what you'd expect, variables that follow the hero(ine).
external function set_scroll(size_t layer_idx, int x_off, int y_off);

for layer from 0 to 2:
  set_scroll(layer, camera_x * 256 / layer_depth[layer], camera_y);
Use of a fixed-point variable to store camera_x provides a smoother scroll when the hero(ine) is moving slowly.

The raster way

To parallax-scroll within one layer (necessary on classic 8-bit systems such as Nintendo Entertainment System and the original Game Boy), divide the layer into sub-layers and change the layer's horizontal scroll value just before the display system begins to draw each scanline. This shifts the entire scanline and thus lets you scroll parts of a layer at different rates. For example, scroll the scanlines at the top of the screen (clouds) slowly, the middle of the screen (playfield) at normal speed, and keep the bottom of the screen (status bar) fixed.

In general, poking at the hardware before each scanline is called a raster effect. It's also useful for changing the system palette to provide a gradient background. Some platforms (Super NES, Sega Genesis, Game Boy Advance) provide horizontal-blank raster interrupts or DMA mechanisms for automatically setting the registers at the right times; others, such as the NES and Game Boy, require the use of cycle-timed code, where the main loop takes exactly as long as a display cycle. Many NES games such as the classic Super Mario Brothers use this technique to draw their status bars, and Teenage Mutant Ninja Turtles II: The Arcade Game and Vice: Project Doom for NES use it to scroll background layers at different rates.

More advanced raster techniques can produce interesting effects. You can achieve breathtaking depth of field if you combine layers with rasters; Sonic the Hedgehog 2, ActRaiser, and Street Fighter II used this effect well. If you make each scanline its own sub-layer, you get the Pole Position effect, which creates a pseudo-3D road (or in NBA Jam's case, a pseudo-3D ball court) on a 2D system. If your display system supports rotation and scaling in addition to scrolling, changing the rotation and scaling factors can draw a projection of a plane (F-Zero, Super Mario Kart) or can warp the image to create an extra challenge factor (Tetanus On Drugs). Source code for this "Mode 7" technique is available at www.pineight.com and www.gbadev.org.

The sprite way

If you have a lot of sprites (individually controllable moving objects drawn by hardware on top of or behind the layers) available on your display system, you may want to make a pseudo-layer out of sprites. Star Force, an overhead-view vertically-scrolling shooter for for NES, used this for its starfield, and Final Fight for Super NES used this technique for the layer immediately in front of the main playfield. But watch out for sprite flicker; you'll want to heed these tips for preventing sprite flicker on old consoles.

To implement this, treat each sprite as a layer, as described above. If you have several sprites at the same depth, you may be able to arrange your data structures in such a way as to minimize the time spent in slow divisions.

©

Copyright © 2002 Damian Yerrick.
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the writeup entitled "GNU Free Documentation License".

printable version
chaos

badly designed scrollbars preventing sprite flicker on old consoles parallax Tetanus on Drugs
Computer and video games : Glossary of terms sanxion Indecent.com Speculation: How a Lightsaber works
Being really smart and taking lots and lots of drugs Sonic the Hedgehog NES PPU plasma effects
Ranger X Mode 7 Shadow of the Beast raster interrupts
Sprite Super Street Fighter II Turbo Revival Rocket Knight Adventures GNU Free Documentation License
F-Zero Star Force Super Mario Brothers Sega Genesis
Y'know, if you log in, you can write something here, or contact authors directly on the site. Create a New User if you don't already have an account.
  Epicenter
Login
Password

password reminder
register

Everything2 Help

Cool Staff Picks
Drink up!
Both Good & Evil in the Hearts of Men and Women
Robot is to follow the sun
I never thought it would be like this
English Civil War
The lightning men
Scientology v. the Internet
Japan's 21st century crisis
Losing weight safely
Tell me a story about trains
The Texas Chain Saw Massacre
Frito Pie
Nuclear Cats Get New Home
URL escape sequences
New Writeups
XWiz
Trism(review)
artman2003
Briefcase Full of Souls - Part I(fiction)
Dreamvirus
Alan Ladd(person)
waverider37
Harold Holt(person)
The Debutante
Until death do us part(fiction)
Ysardo
a brother to a sister(personal)
antigravpussy
your warm whispers(personal)
Clarke
Multiculturalism(idea)
aneurin
Earl of Landaff(person)
Heitah
Pseudocide(idea)
XWiz
Google Knol(lede)
Mythi
July 24, 2008(personal)
locke baron
The fall of Earth(fiction)
BookReader
Fear the Cold(dream)
Pavlovna
Kathleen MacInnes(person)
This affordable entertainment brought to you by The Everything Development Company