Content deleted Content added
→The raster way: a bit more explanatory detail |
Rescuing 2 sources and tagging 0 as dead.) #IABot (v2.0.9.5 |
||
| (268 intermediate revisions by more than 100 users not shown) | |||
Line 1:
{{Short description|Technique in computer graphics}}
{{more citations needed|date=September 2007}}
[[File:Parallax_scroll.gif|thumb|"[[2.5D]]" parallax scrolling of city buildings]]
{{VG Graphics}}
'''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 computer graphics|2D]] scene of distance.<ref>{{cite news|title=Cap. O'Rourke to the rescue|url=https://news.google.com/newspapers?id=drgTAAAAIBAJ&sjid=S5ADAAAAIBAJ&pg=3478,303305&dq=parallax+scrolling|date=1988-09-01|publisher=New Straits Times Malaysia |access-date=2009-07-06}}</ref> The technique grew out of the [[multiplane camera]] technique used in [[traditional animation]]<ref name=art>{{cite web|title=The Art of Parallax Scrolling|url=http://mos.futurenet.com/pdf/net/NET165_tut_flash.pdf|first=Wyatt|last=Paul|date=August 2007|access-date=2009-07-06|url-status=dead|archive-url=https://web.archive.org/web/20091007223458/http://mos.futurenet.com/pdf/net/NET165_tut_flash.pdf|archive-date=2009-10-07}}</ref> since the 1930s.
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).<ref name=purcaru>{{cite web|url=https://books.google.com/books?id=lB4PAwAAQBAJ&pg=PA181|title=Games vs. Hardware. The History of PC video games: The 80's|first=Bogdan Ion|last=Purcaru|date=13 March 2014|publisher=Purcaru Ion Bogdan|via=Google Books}}</ref> 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.<ref>{{cite book |last1=Uduslivii |first1=Igor |title=iPhone Game Blueprints |date=26 December 2013 |publisher=[[Packt Publishing Ltd]] |isbn=978-1-84969-027-0 |page=339 |url=https://books.google.com/books?id=C5R4AgAAQBAJ&pg=PT339}}</ref> ''Moon Patrol'' is often credited with popularizing parallax scrolling.<ref>{{cite web|title=Chronology of the History of Video Games: Golden Age|url=https://www.thocp.net/software/games/golden_age.htm|first=Ted|last=Stahl|date=2006-07-26|access-date=2009-07-06|archive-url=https://web.archive.org/web/20090716033610/http://www.thocp.net/software/games/golden_age.htm|archive-date=2009-07-16|url-status=live}}</ref><ref>{{cite web|url=https://www.gamesradar.com/f/gamings-most-important-evolutions/a-20101008102331322035/p-3|title=Gaming's Most Important Evolutions|page=3|publisher=[[GamesRadar]]|date=October 8, 2010|access-date=2011-04-27|archive-date=2021-04-08|archive-url=https://web.archive.org/web/20210408070358/https://www.gamesradar.com/f/gamings-most-important-evolutions/a-20101008102331322035/p-3|url-status=dead}}</ref> ''[[Jungle Hunt|Jungle King]]'' (1982), later called ''Jungle Hunt'', also had parallax scrolling,<ref>{{cite web|title=Jungle Hunt Was a Terrible Waste of Quarters|url=http://retrovolve.com/jungle-hunt-was-a-terrible-waste-of-quarters/|access-date=2015-03-27|archive-url=https://web.archive.org/web/20150402132140/http://retrovolve.com/jungle-hunt-was-a-terrible-waste-of-quarters/|archive-date=2015-04-02|url-status=live}}</ref> and was released a month after ''Moon Patrol'' in June 1982.<ref>{{cite book |last1=Akagi |first1=Masumi |title=アーケードTVゲームリスト国内•海外編(1971-2005) |trans-title=Arcade TV Game List: Domestic • Overseas Edition (1971-2005) |date=13 October 2006 |publisher=Amusement News Agency |language=ja |___location=Japan |isbn=978-4990251215 |pages=13, 42 |url=https://archive.org/details/ArcadeGameList1971-2005/page/n14}}</ref>
{{Original research|section|date=March 2015}}
Some display systems support multiple background layers that can be [[Scrolling|scrolled]] independently in horizontal and vertical directions and [[Compositing|composited]] on one another. On such a display system, a game can produce parallax by simply changing each layer's horizontal position by a different amount. However, placing too much in front of the ''playfield'', the layer containing the objects with which the player interacts, obscures the action of the game and may be distractive to some users.▼
There are four main methods of [[parallax]] scrolling used in titles for [[arcade system board]], [[video game console]] and [[personal computer]] systems.{{citation needed|date=March 2015}}
In [[raster graphics]], the lines of pixels in an image are typically composited and refreshed in top-to-bottom order, and there is a slight delay, called [[horizontal blank]], between drawing one line and drawing the next line.▼
=== Layer method ===
Some display systems have only one layer. These include most of the classic 8-bit systems (such as the [[Nintendo Entertainment System]] and the original [[Game Boy]]). Games on such systems generally divide the layer into horizontal strips, each with a different position and rate of scrolling. Typically, strips higher up 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.▼
{{multiple image
| align = right
| direction = vertical
| header = Demonstration of the layer method
| width = 500
| image1 = The Whispered World parallax scrolling sample 1.jpg
| alt1 =
| caption1 = A side view of the layers used for parallax scrolling in ''[[The Whispered World]]''
| image2 = TWW parallax scrolling sample 2.jpg
More advanced raster techniques can produce interesting effects. A system can achieve breathtaking depth of field if layers with rasters are combined; ''[[Sonic the Hedgehog 2 (Megadrive)|Sonic the Hedgehog 2]]'', ''[[ActRaiser]]'', and ''[[Street Fighter II]]'' used this effect well. If each scanline has it's own layer, the ''[[Pole Position]]'' effect is produced, which creates a pseudo-3D road (or in the case of ''[[NBA Jam]]'', a pseudo-3D ball court) on a 2D system.▼
| alt2 =
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 (''[[F-Zero]]'', ''[[Super Mario Kart]]'') or can warp the playfield to create an extra challenge factor (''[[Tetanus On Drugs]]'').▼
| caption2 = The same image as above, viewed from the front
}}
▲Some display systems support multiple background layers that can be
If there is much in the way of the [[sprite (computer graphics)|sprite]]s (individually controllable moving objects drawn by hardware on top of or behind the layers) available on the display system, the programmer may want to make a pseudo-layer out of sprites. ''[[Star Force]]'', an overhead-view vertically-scrolling shooter 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.▼
=== Sprite method ===
▲
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<ref>{{cite web|url=http://www.codetapper.com/amiga/sprite-tricks/risky-woods/|title=Risky Woods|website=codetapper.com|access-date=2015-04-23|archive-url=https://web.archive.org/web/20150219002353/http://www.codetapper.com/amiga/sprite-tricks/risky-woods/|archive-date=2015-02-19|url-status=live}}</ref> 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 ===
<!-- linked from redirect [[Raster effect]] -->
▲In [[raster graphics]], the lines of pixels in an image are typically composited and refreshed in top-to-bottom order
Games designed for older graphical chipsets—such as those of the [[History of video game consoles (third generation)|third]] and [[History of video game consoles (fourth generation)|fourth]] generations of video game consoles, those of dedicated [[Handheld TV game|TV game]]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]], [[Nintendo Entertainment System]],
Some platforms (such as the Commodore 64, [[Amiga]], Master System,<ref>{{Cite web |url=https://www.smspower.org/uploads/Development/richard.txt |title=Archived copy |access-date=2018-09-04 |archive-url=https://web.archive.org/web/20171109095042/http://www.smspower.org/uploads/Development/richard.txt |archive-date=2017-11-09 |url-status=live }}</ref> PC Engine/TurboGrafx-16,<ref>{{cite web |url=http://cgfm2.emuviews.com/txt/pcetech.txt |title=Archived copy |access-date=2014-03-18 |url-status=dead |archive-url=https://web.archive.org/web/20140318183739/http://cgfm2.emuviews.com/txt/pcetech.txt |archive-date=2014-03-18 }}</ref> [[Mega Drive|Sega Mega Drive/Genesis]], [[Super Nintendo Entertainment System|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 [[Interrupt request|timers]] [[Memory management controller|inside game cartridges]] that generate [[Raster interrupt|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 (arcade game)#Home versions|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
▲If the display system supports rotation and scaling in addition to
Another advanced technique is row/column scrolling, where rows/columns of [[Tile engine|tiles]] on a screen can be scrolled individually.<ref>{{cite web|url=http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system|title=Using MAME's tilemap system - DevWiki|date=2 January 2014|archive-url=https://web.archive.org/web/20140102211938/http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system|archive-date=2014-01-02}}</ref> This technique is implemented in the [[Graphics processing unit|graphics chips]] of various [[List of Sega arcade system boards|Sega arcade system boards]] since the [[Sega Space Harrier]] and [[Sega System 16|System 16]],<ref>{{cite web |url=http://cgfm2.emuviews.com/txt/s16tech.txt |title=Archived copy |access-date=2016-08-08 |url-status=dead |archive-url=https://web.archive.org/web/20160304034742/http://cgfm2.emuviews.com/txt/s16tech.txt |archive-date=2016-03-04 }}</ref> the Sega Mega Drive/Genesis console,<ref>{{cite web|url=http://www.gamepilgrimage.com/content/sega-genesis-vs-super-nintendo|title=Sega Genesis vs Super Nintendo|date=2009-08-11|website=gamepilgrimage.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20150924020645/http://www.gamepilgrimage.com/content/sega-genesis-vs-super-nintendo|archive-date=2015-09-24|url-status=live}}</ref> and the [[CP System|Capcom CP System]],<ref>{{cite web|url=https://github.com/mamedev/mame/tree/master/src/mame/video/cps1.c|archive-url=https://hookagency.com/new-forgotten-world-clone-cp-system-code/|archive-date=25 May 2015|first=Paul|last=Leaman|title=New Forgotten World Clone – CP System Code|website=[[GitHub]] }}</ref> [[Irem M-92]]<ref>{{cite web|url=http://www.system16.com/hardware.php?id=747|title=System 16 - Irem M92 Hardware (Irem)|website=www.system16.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20141224152637/http://www.system16.com/hardware.php?id=747|archive-date=2014-12-24|url-status=live}}</ref> and [[Taito F3 System]]<ref>{{cite web|url=http://www.system16.com/hardware.php?id=665|title=System 16 - Taito F3 System Hardware (Taito)|website=www.system16.com|access-date=2014-09-26|archive-url=https://web.archive.org/web/20140421134650/http://www.system16.com/hardware.php?id=665|archive-date=2014-04-21|url-status=live}}</ref> [[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.
<gallery>
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
</gallery>
== Parallax scrolling in Web design ==
{{Section move from|Web design|sections=Parallax scrolling in Web design|date=June 2025}}
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.<ref>{{cite web|title=Parallax Backgrounds - a multi-layered javascript experiment|url=https://inner.geek.nz/archives/2007/03/20/parallax-backgrounds/|work=Glutnix|publisher=inner.geek.nz|access-date=28 June 2019|author=Brett Taylor|date=20 March 2007|archive-date=28 January 2019|archive-url=https://web.archive.org/web/20190128230104/https://inner.geek.nz/archives/2007/03/20/parallax-backgrounds/|url-status=dead}}</ref><ref>{{cite web|title=Showcasing the css parallax effect - 12+1 creative usages|url=https://kremalicious.com/showcasing-the-css-parallax-effect-12-creative-usages/|work=Glutnix|publisher=kremalicious.com|access-date=28 June 2019|author=Matthias Kretschmann|date=23 May 2008}}</ref>
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.<ref>{{cite web|title=How to Recreate Silverback's Parallax Effect|url=http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/|first=Paul|last=Annett|date=February 2008|access-date=2024-02-27|url-status=dead|archive-url=https://web.archive.org/web/20100719124948/http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/|archive-date=2010-07-19}}</ref> He demonstrated the effect on stage at SXSW Interactive 2009, with the help of audience participation and a man in a gorilla suit.<ref>{{cite web|title=Photo: Paul is amused by gorillas|url=https://www.flickr.com/photos/mn_francis/3354075259/in/photolist-67sJsG-67sGEE-4xqGuE-67PNcj-67KBmV-689ztc-67sM8j-67mxCL-67ow86-4xZ4jq-4CgVEn-CJ1Ka-67aT9H-E7Byr-67sHbN-CSF4e-4xUDWB-67oyUz-67PNm9-67fXQP-D1WeG-4yeU6u-DibvN-4xDyY3-4yoJA4-67ovHM-4xYTdL-4xYUe9-67eVL9-4xYUuy-CQuae-4y8Rwn-4y594r|access-date=27 February 2024|author=Mark Norman Francis|date=14 March 2009}}</ref><ref>{{cite web|title=Paul Annett from ClearLeft making people act out the design of silverbackapp.com|url=https://www.flickr.com/photos/robby1066/3352602235/in/photolist-67sJsG-67sGEE-4xqGuE-67PNcj-67KBmV-689ztc-67sM8j-67mxCL-67ow86-4xZ4jq-4CgVEn-CJ1Ka-67aT9H-E7Byr-67sHbN-CSF4e-4xUDWB-67oyUz-67PNm9-67fXQP-D1WeG-4yeU6u-DibvN-4xDyY3-4yoJA4-67ovHM-4xYTdL-4xYUe9-67eVL9-4xYUuy-CQuae-4y8Rwn-4y594r|access-date=27 February 2024|author=Robby Macdonell|date=14 March 2009}}</ref>
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.<ref name="CederholmMarcotte2010">{{cite book|author1=Dan Cederholm|author2=Ethan Marcotte|title=Handcrafted CSS: More Bulletproof Web Design|url=https://archive.org/details/handcraftedcssmo0000cede|url-access=registration|date=9 April 2010|publisher=New Riders|isbn=978-0-13-210481-4|pages=198–199}}</ref>
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".<ref>{{cite journal|title=The Effects Of Parallax Scrolling On User Experience And Preference In Web Design|url=https://docs.lib.purdue.edu/cgttheses/27/|journal=Purdue University|access-date=17 April 2014|author=Dede M. Frederick|date=18 April 2013|archive-url=https://web.archive.org/web/20140416183434/http://docs.lib.purdue.edu/cgttheses/27/|archive-date=2014-04-16|url-status=live}}</ref> 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."<ref>{{Cite journal|last=Frederick|first=Dede|title=The Effects of Parallax Scrolling on User Experience in Web Design|journal=Journal of User Experience|volume=10|issue=2}}</ref>
== See also ==
* [[2.5D]]
* [[Scrolling]]
* [[Skybox (video games)|Skybox]]
== References ==
{{Reflist}}
{{Clear}}
{{Computer graphics}}
{{Stereoscopy}}
[[Category:Video game design]]
[[Category:Video game development]]
[[Category:Parallax]]
[[Category:Responsive web design]]
[[Category:Ajax (programming)]]
[[Category:Adaptive web design]]
| |||