|This article needs additional citations for verification. (September 2007)|
|Part of a series on:|
|Video game graphics|
Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1930s, and was popularized among video games in the 1982 arcade game Moon Patrol.
The layer method
Some display systems support multiple background layers that can be scrolled independently in horizontal and vertical directions and composited on one another, simulating a multiplane camera. On such a display system, a game can produce parallax by simply changing each layer's position by a different amount in the same direction. Layers that move more quickly are perceived to be closer to the virtual camera. Layers can be placed in front of the playfield—the layer containing the objects with which the player interacts—for various reasons such as to provide increased dimension, obscure some of the action of the game, or distract the player.
The sprite method
Programmers may also make pseudo-layers of sprites—individually controllable moving objects drawn by hardware on top of or behind the layers—if they are available on the display system. For instance Star Force, an overhead-view vertically scrolling shooter for NES, used this for its starfield, and Final Fight for the Super NES used this technique for the layer immediately in front of the main playfield.
The repeating pattern/animation method
Scrolling displays built up of individual tiles can be made to 'float' over a repeating background layer by animating the individual tiles' bitmaps in order to portray the parallax effect. Color cycling can be used to animate tiles quickly on the whole screen. This software effect gives the illusion of another (hardware) layer. Many games used this technique for a scrolling star-field, but sometimes a more intricate or multi-directional effect is achieved, such as in the game Parallax by Sensible Software.
The raster method
In raster graphics, the lines of pixels in an image are typically composited and refreshed in top-to-bottom order with a slight delay (called the horizontal blanking interval) between drawing one line and drawing the next line. Games designed for older graphical chipsets—such as those of the third and fourth generations of video game consoles, those of dedicated TV games, or those of similar handheld systems—take advantage of the raster characteristics to create the illusion of more layers.
Some display systems have only one layer. These include most of the classic 8-bit systems (such as the Nintendo Entertainment System, the original Game Boy, and the TurboGrafx-16). The more sophisticated games on such systems generally divide the layer into horizontal strips, each with a different position and rate of scrolling. Typically, strips higher on the screen will represent things farther away from the virtual camera or one strip will be held stationary to display status information. The program will then wait for horizontal blank and change the layer's scroll position just before the display system begins to draw each scanline. This is called a "raster effect" and is also useful for changing the system palette to provide a gradient background.
Some platforms (e.g., Super NES, Mega Drive/Genesis, Game Boy Advance, Game Boy, Nintendo DS) provide a horizontal blank interrupt for automatically setting the registers independently of the rest of the program. Others, such as the NES, require the use of cycle-timed code, which is specially written to take exactly as long to execute as the video chip takes to draw one scanline, or timers inside game cartridges that generate interrupts after a given number of scanlines have been drawn. Many NES games 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. A system can achieve a very effective depth of field if layers with rasters are combined; Sonic the Hedgehog, Sonic The Hedgehog 2, ActRaiser, Lionheart and Street Fighter II used this effect well. If each scanline has its own layer, the Pole Position effect is produced, which creates a pseudo-3D road (or a pseudo-3D ball court as in NBA Jam) on a 2D system. If the display system supports rotation and scaling in addition to scrolling—an effect popularly known as Mode 7—changing the rotation and scaling factors can draw a projection of a plane (as in F-Zero and Super Mario Kart) or can warp the playfield to create an extra challenge factor.
In the following animation, three layers are moving leftward at different speeds. Their speeds decrease from front to back and correspond to increases in relative distance from the viewer. The ground layer is moving 8 times faster than the vegetation layer. The vegetation layer is moving two times faster than the cloud layer.
Parallax scrolling in Web design
||This article may be written from a fan's point of view, rather than a neutral point of view. (May 2014)|
||This article appears to be written like an advertisement. (May 2014)|
Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web. Additionally, proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides. However, a Purdue University study, published in 2013, revealed the following findings: "... although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience."
- Parallax scrolling allows for the creation of dynamic, interactive user experience that has the potential to improve visual appeal.
- It enables content publisher to display content on a single page, therefore reducing navigation and clicks required for an end user to consume the content.
- With parallax scrolling, a user can be "led" around a website according to a designer's or UX expert's intent.
- Because parallax scrolling involves the use of heavy animation, it can take web pages longer to load.
- Parallax scrolling does not function smoothly across all browsers.
- Parallax scrolling can make it difficult or frustrating for the end user easily consume content due to excessive scrolling.
With the rise of mobile users navigating the internet, designers or UX expert's must translate the effect of the experience for mobile device to avoid compatibility problems.
- "Cap. O'Rourke to the rescue". New Straits Times Malaysia. 1988-09-01. Retrieved 2009-07-06.
- Paul, Wyatt (August 2007). "The Art of Parallax Scrolling". Retrieved 2009-07-06.
- Stahl, Ted (2006-07-26). "Chronology of the History of Video Games: Golden Age". Retrieved 2009-07-06.
- "Gaming's Most Important Evolutions". GamesRadar. October 8, 2010. p. 3. Retrieved 2011-04-27.
- Dan Cederholm; Ethan Marcotte (9 April 2010). Handcrafted CSS: More Bulletproof Web Design. New Riders. pp. 5–. ISBN 978-0-13-210481-4.
- Dede M. Frederick (18 April 2013). "The Effects Of Parallax Scrolling On User Experience And Preference In Web Design". Purdue University. Purdue University. Retrieved 17 April 2014.