Parallax scrolling

Last updated
"2.5D" parallax scrolling of city buildings Parallax scroll.gif
"2.5D" parallax scrolling of city buildings

Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance. [1] The technique grew out of the multiplane camera technique used in traditional animation [2] since the 1930s.

Contents

Parallax scrolling was popularized in 2D computer graphics with its introduction to video games in the early 1980s. Some parallax scrolling was used in the arcade video game Jump Bug (1981). [3] 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 (1982) implemented a full form of parallax scrolling, with three separate background layers scrolling at different speeds, simulating the distance between them. [4] Moon Patrol is often credited with popularizing parallax scrolling. [5] [6] Jungle King (1982), later called Jungle Hunt, also had parallax scrolling, [7] and was released a month after Moon Patrol in June 1982. [8]

Methods

There are four main methods of parallax scrolling used in titles for arcade system board, video game console and personal computer systems.[ citation needed ]

Layer method

Demonstration of the layer method
The Whispered World parallax scrolling sample 1.jpg
A side view of the layers used for parallax scrolling in The Whispered World
TWW parallax scrolling sample 2.jpg
The same image as above, viewed from the front

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.

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 Amiga 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 on the Amiga uses sprites multiplexed with the copper to create an entire fullscreen parallax background layer [9] 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.

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 Commodore 64, Nintendo Entertainment System, Master System, PC Engine/TurboGrafx-16 and original Game Boy). 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, Master System, [10] PC Engine/TurboGrafx-16, [11] Sega Mega Drive/Genesis, Super NES, Game Boy, Game Boy Advance and 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 , Kid Chaos 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.

Another advanced technique is row/column scrolling, where rows/columns of tiles on a screen can be scrolled individually. [12] This technique is implemented in the graphics chips of various Sega arcade system boards since the Sega Space Harrier and System 16, [13] the Sega Mega Drive/Genesis console, [14] and the Capcom CP System, [15] Irem M-92 [16] and Taito F3 System [17] arcade game 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.

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. [18] [19]

In a February 2008 tutorial on web design blog Think Vitamin, web designer Paul Annett explained how he had created a parallax effect using CSS and without JavaScript for the website of Silverback, a usability testing app. [20] He demonstrated the effect on stage at SXSW Interactive 2009, with the help of audience participation and a man in a gorilla suit. [21] [22]

Advocates argue it is a simple way to embrace the fluidity of the Web, citing the Silverback website as the first example they had come across. [23]

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". [24] A undated study occurring during or after 2010 by Dede Frederick, James Mohler, Mihaela Vorvoreanu, and Ronald Glotzbach noted that parallax scrolling "may cause certain people to experience nausea." [25]

See also

Related Research Articles

<span class="mw-page-title-main">Neo Geo (system)</span> Cartridge-based arcade system board and home video game console

The Neo Geo, stylized as NEO•GEO and also written as NEOGEO, is a ROM cartridge-based video gaming system released on April 26, 1990, by Japanese game company SNK Corporation. Designed as both an arcade system board and home video game console, the Neo Geo was marketed as the first 24-bit system; its CPU is actually a 16/32-bit 68000 with an 8-bit Z80 coprocessor, while its GPU chipset has a 24-bit graphics data bus. It was a very powerful system when released, more powerful than any video game console at the time, and many arcade systems such as rival Capcom's CPS, which did not surpass it until the CP System II in 1993. Neo Geo hardware production lasted seven years; it was succeeded by Hyper Neo Geo 64.

<span class="mw-page-title-main">Amiga Original Chip Set</span> Chipset used in Amiga personal computer

The Original Chip Set (OCS) is a chipset used in the earliest Commodore Amiga computers and defined the Amiga's graphics and sound capabilities. It was succeeded by the slightly improved Enhanced Chip Set (ECS) and the greatly improved Advanced Graphics Architecture (AGA).

2.5D perspective refers to gameplay or movement in a video game or virtual reality environment that is restricted to a two-dimensional (2D) plane with little to no access to a third dimension in a space that otherwise appears to be three-dimensional and is often simulated and rendered in a 3D digital environment.

<span class="mw-page-title-main">ANTIC</span> Computer graphics chip

Alphanumeric Television Interface Controller (ANTIC) is an LSI ASIC dedicated to generating 2D computer graphics to be shown on a television screen or computer display.

<i>Moon Patrol</i> 1982 video game

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 shoot aerial attackers. Designed by Takashi Nishiyama, Moon Patrol is often credited with the introduction of full parallax scrolling in side-scrolling games. Cabinet art for the Williams version was done by Larry Day. Most of the home ports were from Atari, Inc., sometimes under the Atarisoft label.

<span class="mw-page-title-main">Scrolling</span> Sliding motion vertically or horizontally over display devices

In computer displays, filmmaking, television production, video games 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 or pictures but moves the user's view across what is apparently a larger image that is not wholly seen. A common television and movie special effect is to scroll credits, while leaving the background stationary. Scrolling may take place completely without user intervention or, on an interactive device, be triggered by touchscreen or a keypress and continue without further intervention until a further user action, or be entirely controlled by input devices.

<span class="mw-page-title-main">Sprite (computer graphics)</span> 2D bitmap displayed over a larger scene

In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene, most often in a 2D video game. Originally, the term sprite referred to fixed-sized objects composited together, by hardware, with a background. Use of the term has since become more general.

<i>Kung-Fu Master</i> (video game) 1984 video game

Kung-Fu Master, known as Spartan X in Japan, is a 1984 beat 'em up game developed and published by Irem for arcades. It was distributed by Data East in North America. Designed by Takashi Nishiyama, the game was based on Hong Kong martial arts films. It is a loose adaptation of the Jackie Chan, Sammo Hung and Yuen Biao film Wheels on Meals (1984), called Spartan X in Japan, with the protagonist Thomas named after Jackie Chan's character in the film. The game is also heavily inspired by the Bruce Lee film Game of Death (1972), which was the basis for the game's concept. Nishiyama, who had previously designed the side-scrolling shooter Moon Patrol (1982), combined fighting elements with a shoot 'em up gameplay rhythm. Irem and Data East exported the game to the West without the Spartan X license.

<span class="mw-page-title-main">Mode 7</span> Graphics mode on the Super NES video game console

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 depth effects. It also supports wrapping effects such as translation and reflection.

<span class="mw-page-title-main">Namco System 11 and System 12</span> 32-bit arcade system board by Namco and Sony Computer Entertainment

The Namco System 11 is a 32-bit arcade system board developed jointly by Namco and Sony Computer Entertainment. Released in 1994, the System 11 is based on a prototype of the PlayStation, Sony's first home video game console, using a 512 KB operating system and several custom processors. The Namco System 12 is an upgraded version of the System 11 that was released in 1996, featuring faster processing power.

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 beam of the monitor has reached the edge of the screen, it is switched off, and the deflection circuit voltages are returned to the values they had for the other edge of the screen; this would have the effect of retracing the screen in the opposite direction, so the beam is turned off during this time. This part of the line display process is the Horizontal Blank.

<i>RayForce</i> 1993 video game

RayForce is a vertically scrolling shooter by Taito for the Taito F3 arcade hardware and released in 1994. It was ported to the Sega Saturn in 1995, Microsoft Windows in 1997, then rereleased for iOS in 2012 and Android in 2017.

A raster 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 frame are being readied to send to the monitor for display. The most basic implementation of a raster interrupt is the vertical blank interrupt.

<i>Jim Power: The Lost Dimension in 3-D</i> 1993 video game

Jim Power: The Lost Dimension in 3-D is a platform game from French developer Loriciel and published by Electro Brain for the Super Nintendo Entertainment System and MS-DOS in 1993. A Sega Genesis version was created, but its release was cancelled despite being completed. In 2021, Piko Interactive recovered this version and crowdfunded a release, alongside a new Nintendo Entertainment System port. A version for the Nintendo Switch and PlayStation 4 was released on June 2, 2022.

A side-scrolling video game is a video game viewed from a side-view camera angle where the screen follows the player as they move left or right. The jump from single-screen or flip-screen graphics to scrolling graphics during the golden age of arcade games was a pivotal leap in game design, comparable to the move to 3D graphics during the fifth generation.

A variety of computer graphic techniques have been used to display video game content throughout the history of video games. The predominance of individual techniques have evolved over time, primarily due to hardware advances and restrictions such as the processing power of central or graphics processing units.

A vertically scrolling video game or vertical scroller is a video game in which the player views the field of play principally from a top-down perspective, while the background scrolls from the top of the screen to the bottom to create the illusion that the player character is moving in the game world.

<span class="mw-page-title-main">Stereoscopic video game</span> Video game which uses stereoscopic technologies

A stereoscopic video game is a video game which uses stereoscopic technologies to create depth perception for the player by any form of stereo display. Such games should not be confused with video games that use 3D game graphics on a mono screen, which give the illusion of depth only by monocular cues but lack binocular depth information.

Composite artifact colors is a technique commonly used to address several graphic modes of some 1970s and 1980s home computers. With some machines, when connected to an NTSC TV or monitor over composite video outputs, the video signal encoding allowed for extra colors to be displayed, by manipulating the pixel position on screen, not being limited by each machine's hardware color palette.

References

  1. ↑ "Cap. O'Rourke to the rescue". New Straits Times Malaysia. 1988-09-01. Retrieved 2009-07-06.
  2. ↑ Paul, Wyatt (August 2007). "The Art of Parallax Scrolling" (PDF). Archived from the original (PDF) on 2009-10-07. Retrieved 2009-07-06.
  3. ↑ Purcaru, Bogdan Ion (13 March 2014). "Games vs. Hardware. The History of PC video games: The 80's". Purcaru Ion Bogdan – via Google Books.
  4. ↑ Uduslivii, Igor (26 December 2013). iPhone Game Blueprints. Packt Publishing Ltd. p. 339. ISBN   978-1-84969-027-0.
  5. ↑ Stahl, Ted (2006-07-26). "Chronology of the History of Video Games: Golden Age". Archived from the original on 2009-07-16. Retrieved 2009-07-06.
  6. ↑ "Gaming's Most Important Evolutions". GamesRadar. October 8, 2010. p. 3. Retrieved 2011-04-27.
  7. ↑ "Jungle Hunt Was a Terrible Waste of Quarters". Archived from the original on 2015-04-02. Retrieved 2015-03-27.
  8. ↑ Akagi, Masumi (13 October 2006). アーケードTVゲームリスト国内•海外編(1971-2005) [Arcade TV Game List: Domestic • Overseas Edition (1971-2005)] (in Japanese). Japan: Amusement News Agency. pp. 13, 42. ISBN   978-4990251215.
  9. ↑ "Risky Woods". codetapper.com. Archived from the original on 2015-02-19. Retrieved 2015-04-23.
  10. ↑ "Archived copy". Archived from the original on 2017-11-09. Retrieved 2018-09-04.{{cite web}}: CS1 maint: archived copy as title (link)
  11. ↑ "Archived copy". Archived from the original on 2014-03-18. Retrieved 2014-03-18.{{cite web}}: CS1 maint: archived copy as title (link)
  12. ↑ "Using MAME's tilemap system - DevWiki". 2 January 2014. Archived from the original on 2014-01-02.
  13. ↑ "Archived copy". Archived from the original on 2016-03-04. Retrieved 2016-08-08.{{cite web}}: CS1 maint: archived copy as title (link)
  14. ↑ "Sega Genesis vs Super Nintendo". gamepilgrimage.com. 2009-08-11. Archived from the original on 2015-09-24. Retrieved 2014-09-26.
  15. ↑ Leaman, Paul. "New Forgotten World Clone – CP System Code". GitHub . Archived from the original on 25 May 2015.
  16. ↑ "System 16 - Irem M92 Hardware (Irem)". www.system16.com. Archived from the original on 2014-12-24. Retrieved 2014-09-26.
  17. ↑ "System 16 - Taito F3 System Hardware (Taito)". www.system16.com. Archived from the original on 2014-04-21. Retrieved 2014-09-26.
  18. ↑ Brett Taylor (20 March 2007). "Parallax Backgrounds - a multi-layered javascript experiment". Glutnix. inner.geek.nz. Retrieved 28 June 2019.
  19. ↑ Matthias Kretschmann (23 May 2008). "Showcasing the css parallax effect - 12+1 creative usages". Glutnix. kremalicious.com. Retrieved 28 June 2019.
  20. ↑ Annett, Paul (February 2008). "How to Recreate Silverback's Parallax Effect". Archived from the original on 2010-07-19. Retrieved 2024-02-27.
  21. ↑ Mark Norman Francis (14 March 2009). "Photo: Paul is amused by gorillas" . Retrieved 27 February 2024.
  22. ↑ Robby Macdonell (14 March 2009). "Paul Annett from ClearLeft making people act out the design of silverbackapp.com" . Retrieved 27 February 2024.
  23. ↑ Dan Cederholm; Ethan Marcotte (9 April 2010). Handcrafted CSS: More Bulletproof Web Design . New Riders. pp. 198–199. ISBN   978-0-13-210481-4.
  24. ↑ Dede M. Frederick (18 April 2013). "The Effects Of Parallax Scrolling On User Experience And Preference In Web Design". Purdue University. Archived from the original on 2014-04-16. Retrieved 17 April 2014.
  25. ↑ Frederick, Dede. "The Effects of Parallax Scrolling on User Experience in Web Design". Journal of User Experience. 10 (2).
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.