Parallax scrolling: Difference between revisions

Revision as of 12:49, 28 November 2020

Revision as of 11:41, 8 December 2020

Line 1:

{{refimprove|date=September 2007}}

{{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 |accessdateaccess-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|accessdateaccess-date=2009-07-06|url-status=dead|archiveurlarchive-url=https://web.archive.org/web/20091007223458/http://mos.futurenet.com/pdf/net/NET165_tut_flash.pdf|archivedatearchive-date=2009-10-07}}</ref> since the 1930s. Parallax scrolling was popularized in [[2D computer graphics]] and [[video game]]s by the [[arcade games]] ''[[Moon Patrol]]''<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|accessdateaccess-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|accessdateaccess-date=2011-04-27}}</ref> and ''[[Jungle Hunt]]'',<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> both released in 1982. Some parallax scrolling had earlier been used by the 1981 arcade game ''[[Jump Bug]]''.<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>

== Methods ==

Line 42:

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|Sega Master System]], [[TurboGrafx-16|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 scan|raster effect]]" and is also useful for changing the system [[Palette (computing)|palette]] to provide a gradient background.

Some platforms (such as the Commodore 64, [[Amiga]], Sega 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 |accessdateaccess-date=2014-03-18 |url-status=dead |archiveurlarchive-url=https://web.archive.org/web/20140318183739/http://cgfm2.emuviews.com/txt/pcetech.txt |archivedatearchive-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)#Ports|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 (1991 video game)|Sonic the Hedgehog]]'', ''[[Sonic the Hedgehog 2 (16-bit)|Sonic The Hedgehog 2]]'', ''[[ActRaiser]]'', ''[[Lionheart (video game)|Lionheart]]'' and ''[[Street Fighter II]]'' used this effect well. If each scanline has its own layer, the ''[[Pole Position (video game)|Pole Position]]'' effect is produced, which creates a pseudo-3D road (or a pseudo-3D ball court as in ''[[NBA Jam (1993 video game)|NBA Jam]]'') on a 2D system.

Line 48:

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 (video game)|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 [[Tile engine|tiles]] on a screen can be scrolled individually.<ref>{{cite web|url=https://web.archive.org/web/20140102211938/http://mamedev.org/devwiki/index.php?title=Using_MAME%27s_tilemap_system|title=Using MAME's tilemap system - DevWiki|author=|date=2 January 2014|website=archive.org}}</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 |accessdateaccess-date=2016-08-08 |url-status=dead |archiveurlarchive-url=https://web.archive.org/web/20160304034742/http://cgfm2.emuviews.com/txt/s16tech.txt |archivedatearchive-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}}</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 ==

Line 62:

== 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&nbsp;2 that supported Internet&nbsp;Explorer&nbsp;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|accessdateaccess-date=28 June 2019|author=Brett Taylor|date=20 March 2007|url-status=live}}</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|accessdateaccess-date=28 June 2019|author=Matthias Kretschmann|date=23 May 2008|url-status=live}}</ref> However, it wasn't until 2011 and the introduction of [[HTML5]] and [[Cascading Style Sheets#CSS 3|CSS&nbsp;3]] [[Computer programming|coding]] that the technique became popular with [[World Wide Web|Web]] designers. Advocates argue it is a simple way to embrace the fluidity of the Web.<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=[https://archive.org/details/handcraftedcssmo0000cede/page/5 5]–}}</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 web|title=The Effects Of Parallax Scrolling On User Experience And Preference In Web Design|url=https://docs.lib.purdue.edu/cgttheses/27/|work=Purdue University|publisher=Purdue University|accessdateaccess-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>

== See also ==