![Parallax_scroll](https://upload.wikimedia.org/wikipedia/commons/d/d7/Parallax_scroll.gif)
Parallax scrolling is a technique in
computer graphics
Computer graphics deals with generating images with the aid of computers. Today, computer graphics is a core technology in digital photography, film, video games, cell phone and computer displays, and many specialized applications. A great de ...
where background images move past the camera more slowly than foreground images, creating an illusion of depth in a
2D scene of distance. The technique grew out of the
multiplane camera
The multiplane camera is a motion-picture camera that was used in the traditional animation process that moves a number of pieces of artwork past the camera at various speeds and at various distances from one another. This creates a sense of par ...
technique used in
traditional animation
Traditional animation (or classical animation, cel animation, or hand-drawn animation) is an animation technique in which each frame is drawn by hand. The technique was the dominant form of animation in cinema until computer animation.
Proc ...
since the 1930s.
Parallax scrolling was popularized in
2D computer graphics
2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models (such as 2D geometric models, text, and digital images) and by techniques specific to them. It may refer to the branch of computer ...
with its introduction to
video games
Video games, also known as computer games, are electronic games that involves interaction with a user interface or input device such as a joystick, controller, keyboard, or motion sensing device to generate visual feedback. This feedbac ...
in the early 1980s. Some parallax scrolling was used in the
arcade video game
An arcade video game takes player input from its controls, processes it through electrical or computerized components, and displays output to an electronic monitor or similar display. Most arcade video games are coin-operated, housed in an arc ...
''
Jump Bug'' (1981).
It used a limited form of parallax scrolling with the main scene scrolling while the starry night sky is fixed and clouds move slowly, adding depth to the scenery. The following year, ''
Moon Patrol
is a 1982 arcade video game developed and released by Irem. It was licensed to Williams for distribution in North America. The player controls a moon buggy which can jump over and shoot obstacles on a horizontally scrolling landscape as well as ...
'' (1982) implemented a full form of parallax scrolling, with three separate background layers scrolling at different speeds, simulating the distance between them. ''Moon Patrol'' is often credited with popularizing parallax scrolling. ''
Jungle King
''Alpinia purpurata'', commonly referred to as red ginger, also called ostrich plume and pink cone ginger, are native Malaysian plants with showy flowers on long brightly colored red bracts. They look like the bloom, but the true flower is the sma ...
'' (1982), later called ''Jungle Hunt'', also had parallax scrolling, and was released a month after ''Moon Patrol'' in June 1982.
Methods
There are four main methods of
parallax
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or semi-angle of inclination between those two lines. Due to foreshortening, nearby object ...
scrolling used in titles for
arcade system board
An arcade video game takes player input from its controls, processes it through electrical or computerized components, and displays output to an electronic monitor or similar display. Most arcade video games are coin-operated, housed in an arc ...
,
video game console
A video game console is an electronic device that outputs a video signal or image to display a video game that can be played with a game controller. These may be home consoles, which are generally placed in a permanent location connected to ...
and
personal computer
A personal computer (PC) is a multi-purpose microcomputer whose size, capabilities, and price make it feasible for individual use. Personal computers are intended to be operated directly by an end user, rather than by a computer expert or te ...
systems.
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
The multiplane camera is a motion-picture camera that was used in the traditional animation process that moves a number of pieces of artwork past the camera at various speeds and at various distances from one another. This creates a sense of par ...
. 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.
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
''Final Fight'' is a series of beat 'em up video games by Capcom, which began with the arcade release of ''Final Fight'' in 1989. Set in the fictional Metro City, the games focus on a group of heroic vigilantes who fights against the control and ...
'' for the Super NES used this technique for the layer immediately in front of the main playfield.
The
Amiga
Amiga is a family of personal computers introduced by Commodore International, Commodore in 1985. The original model is one of a number of mid-1980s computers with 16- or 32-bit processors, 256 KB or more of RAM, mouse-based GUIs, and sign ...
computer has sprites which can have any height and can be set horizontal with the copper co-processor, which makes them ideal for this purpose.
Risky Woods
''Risky Woods'' is a fantasy-themed, side-scrolling platform game developed by Dinamic Software and Zeus Software and published by Electronic Arts in 1992. It was released as in Japan.
Plot
The ancient Monk, monks who preserve the wisdom of th ...
on the
Amiga
Amiga is a family of personal computers introduced by Commodore International, Commodore in 1985. The original model is one of a number of mid-1980s computers with 16- or 32-bit processors, 256 KB or more of RAM, mouse-based GUIs, and sign ...
uses sprites multiplexed with the copper to create an entire fullscreen parallax background layer as an alternative to the system's dual playfield mode.
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
Sensible Software was a British software company founded by Jon Hare and Chris Yates that was active from March 1986 to June 1999. It released seven number-one hit games and won numerous industry awards.
The company was well known for the ex ...
.
Raster method
In
raster graphics
upright=1, The Smiley, smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Enlarging further, each pixel can be analyzed, with their colors constructed through combination of the values for ...
, 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
Horizontal blanking interval refers to a part of the process of displaying images on a computer monitor or television screen via raster scanning. CRT screens display images by moving beams of electrons very quickly across the screen. Once the be ...
) between drawing one line and drawing the next line.
Games designed for older graphical chipsets—such as those of the
third
Third or 3rd may refer to:
Numbers
* 3rd, the ordinal form of the cardinal number 3
* , a fraction of one third
* 1⁄60 of a ''second'', or 1⁄3600 of a ''minute''
Places
* 3rd Street (disambiguation)
* Third Avenue (disambiguation)
* Hi ...
and
fourth generations of video game consoles, those of dedicated
TV game
A handheld TV game or plug and play game is an integrated home video game console and game controller, usually battery powered, which connects directly to a television. The game software is built directly into the unit, which is typically designe ...
s, 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
Commodore 64
The Commodore 64, also known as the C64, is an 8-bit home computer introduced in January 1982 by Commodore International (first shown at the Consumer Electronics Show, January 7–10, 1982, in Las Vegas). It has been listed in the Guinness ...
,
Nintendo Entertainment System
The Nintendo Entertainment System (NES) is an 8-bit third-generation home video game console produced by Nintendo. It was first released in Japan in 1983 as the commonly known as the The NES, a redesigned version, was released in America ...
,
Sega Master System
The is an 8-bit
third-generation home video game console manufactured by Sega. It was originally a remodeled export version of the Sega Mark III, the third iteration of the SG-1000 series of consoles, which was released in Japan in 1985 and ...
,
PC Engine/TurboGrafx-16 and original
Game Boy
The is an 8-bit fourth generation handheld game console developed and manufactured by Nintendo. It was first released in Japan on April 21, 1989, in North America later the same year, and in Europe in late 1990. It was designed by the same ...
). 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 (such as the Commodore 64,
Amiga
Amiga is a family of personal computers introduced by Commodore International, Commodore in 1985. The original model is one of a number of mid-1980s computers with 16- or 32-bit processors, 256 KB or more of RAM, mouse-based GUIs, and sign ...
, Sega Master System, PC Engine/TurboGrafx-16,
Sega Mega Drive/Genesis
The Sega Genesis, known as the outside North America, is a 16-bit Fourth generation of video game consoles, fourth generation home video game console developed and sold by Sega. It was Sega's third console and the successor to the Master Syst ...
,
Super NES
The Super Nintendo Entertainment System (SNES), commonly shortened to Super NES or Super Nintendo, is a 16-bit home video game console developed by Nintendo that was released in 1990 in Japan and South Korea, 1991 in North America, 1992 in E ...
,
Game Boy
The is an 8-bit fourth generation handheld game console developed and manufactured by Nintendo. It was first released in Japan on April 21, 1989, in North America later the same year, and in Europe in late 1990. It was designed by the same ...
,
Game Boy Advance
The (GBA) is a 32-bit handheld game console developed, manufactured and marketed by Nintendo as the successor to the Game Boy Color. It was released in Japan on March 21, 2001, in North America on June 11, 2001, in the PAL region on June 22, 2 ...
and
Nintendo DS
The is a handheld game console produced by Nintendo, released globally across 2004 and 2005. The DS, an initialism for "Developers' System" or "Dual Screen", introduced distinctive new features to handheld games: two LCD screens working in tan ...
) provide a
horizontal blank interrupt
A raster interrupt (also called a horizontal blank interrupt) is an interrupt signal in a legacy computer system which is used for display timing. It is usually, though not always, generated by a system's graphics chip as the scan lines of a fra ...
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
A timer is a specialized type of clock used for measuring specific time intervals.
Timers can be categorized into two main types.
The word "timer" is usually reserved for devices that counts down from a specified time interval, while devices th ...
inside game cartridges that generate
interrupts
In digital computers, an interrupt (sometimes referred to as a trap) is a request for the processor to ''interrupt'' currently executing code (when permitted), so that the event can be processed in a timely manner. If the request is accepted, ...
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
is a Japanese video game series and media franchise created by Sega. The franchise follows Sonic, an anthropomorphic blue hedgehog who battles the evil Doctor Eggman, a mad scientist. The main ''Sonic the Hedgehog'' games are platformers mo ...
'', ''
Sonic The Hedgehog 2
is a 1992 platform game developed by Sega Technical Institute (STI) for the Sega Genesis. It follows Sonic the Hedgehog (character), Sonic as he attempts to stop Doctor Eggman from stealing the Chaos Emeralds to power his space stationnamed T ...
'', ''
ActRaiser
is a 1990 hybrid platformer, god game, and city-building game with light action RPG elements for the Super Nintendo Entertainment System developed by Quintet and published by Enix, combining traditional side-scrolling platforming with urban p ...
'', ''
Lionheart'', ''
Kid Chaos
Kid Chaos, also known as Haggis (born Stephen Harris), is a British rock bassist and guitarist who played in incarnations of hard rock bands Zodiac Mindwarp and the Love Reaction, The Cult and The Four Horsemen as well as guesting with ''Appetite ...
'' and ''
Street Fighter II
is a fighting game developed by Capcom and originally released for arcades in 1991. It is the second installment in the ''Street Fighter'' series and the sequel to 1987's ''Street Fighter''. It is Capcom's fourteenth game to use the CP Syst ...
'' used this effect well. If each scanline has its own layer, the ''
Pole Position
In a motorsports race, the pole position is usually the best and "statistically the most advantageous" starting position on the track. The pole position is usually earned by the driver with the best qualifying times in the trials before the rac ...
'' effect is produced, which creates a pseudo-3D road (or a pseudo-3D ball court as in ''
NBA Jam
''NBA Jam'' (sometimes "Jam" for short) is a long-running basketball video game series based on the National Basketball Association (NBA). Initially developed as arcade games by Midway, the game found popularity with its photorealistic digiti ...
'') on a 2D system.
If the display system supports rotation and scaling in addition to scrolling—an effect popularly known as
Mode 7
Mode 7 is a graphics mode on the Super Nintendo Entertainment System video game console that allows a background layer to be rotated and scaled on a scanline-by-scanline basis to create many different effects. The most famous of these effects i ...
—changing the rotation and scaling factors can draw a projection of a plane (as in ''
F-Zero
is a series of futuristic racing video games originally created by Nintendo Entertainment Analysis & Development, Nintendo EAD with multiple games developed by outside companies. The F-Zero (video game), first game was released for the Super Fa ...
'' and ''
Super Mario Kart
''Super Mario Kart'' is a Kart racing game, kart racing video game developed and published by Nintendo for the Super Nintendo Entertainment System. The first game in the Mario Kart, ''Mario Kart'' series, it was released in Japan and North Ameri ...
'') or can warp the playfield to create an extra challenge factor.
Another advanced technique is row/column scrolling, where rows/columns of
tiles
Tiles are usually thin, square or rectangular coverings manufactured from hard-wearing material such as ceramic, stone, metal, baked clay, or even glass. They are generally fixed in place in an array to cover roofs, floors, walls, edges, or o ...
on a screen can be scrolled individually. This technique is implemented in the
graphics chips
A video display controller or VDC (also called a display engine or display interface) is an integrated circuit which is the main component in a video-signal generator, a device responsible for the production of a TV video signal in a computin ...
of various
Sega arcade system boards since the
Sega Space Harrier and
System 16
Sega is a video game developer, publisher, and hardware development company headquartered in Tokyo, Japan, with multiple offices around the world. The company's involvement in the arcade game industry began as a Japan-based distributor of coin-o ...
, the Sega Mega Drive/Genesis console, and the
Capcom CP System,
Irem M-92 and
Taito F3 System
The Taito F3 Package System (Taito Cybercore in North America) is a 32-bit arcade system board released by Taito in 1992.
Specifications
* CPU: Motorola MC68EC020;
* Sound CPU: Motorola MC68000;
* Sound chip: Ensoniq ES5505 and ES5510 (DSP ...
arcade game
An arcade game or coin-op game is a coin-operated entertainment machine typically installed in public businesses such as restaurants, bars and amusement arcades. Most arcade games are presented as primarily games of skill and include arcade v ...
boards.
Example
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 as fast as the vegetation layer. The vegetation layer is moving two times as fast as the cloud layer.
Image:Sky back layer.png, Cloud Layer - Back
Image:Vegetation (middle layer).png, Vegetation Layer - Middle
Image:Ground (front layer).png, Ground Layer - Front
Image:Parallax scrolling example scene.gif, Animation
Parallax scrolling in Web design
One of the first implementations of parallax scrolling in the browser was created and shared in a blog post by web developer Glutnix in 2007, this included example code and a demo using JavaScript and CSS 2 that supported Internet Explorer 6 and other browsers of that era. However, it wasn't until 2011 and the introduction of
HTML5
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...
and
CSS 3 coding that the technique became popular with
Web
Web most often refers to:
* Spider web, a silken structure created by the animal
* World Wide Web or the Web, an Internet-based hypertext system
Web, WEB, or the Web may also refer to:
Computing
* WEB, a literate programming system created by ...
designers. Advocates argue it is a simple way to embrace the fluidity of the Web.
Proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides. However, a
Purdue University
Purdue University is a public land-grant research university in West Lafayette, Indiana, and the flagship campus of the Purdue University system. The university was founded in 1869 after Lafayette businessman John Purdue donated land and money ...
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".
See also
*
2.5D
*
Scrolling
In computer displays, filmmaking, television production, and other kinetic displays, scrolling is sliding text, images or video across a monitor or display, vertically or horizontally. "Scrolling," as such, does not change the layout of the text ...
References
{{Stereoscopy
Video game design
Video game development
Parallax
Responsive web design
Ajax (programming)
Adaptive web design