시차 스크롤

Parallax scrolling
도시 건물의 '2.5D' 시차 스크롤
Vg graphics.svg
시리즈의 일부
비디오 게임 그래픽스
종류들
토픽
리스트

시차 스크롤은 컴퓨터 그래픽스에서 배경 이미지가 전경 이미지보다 더 느리게 카메라를 지나쳐 [1]2D 거리 장면에서 깊이 착각을 일으키는 기술이다.이 기술은 1930년대부터 전통적인 애니메이션에[2] 사용된 멀티팬 카메라 기술에서 발전했다.

시차 스크롤은 1980년대 초 비디오 게임에 도입되면서 2D 컴퓨터 그래픽스에서 대중화되었습니다.아케이드 비디오 게임인 Jump Bug(1981)[3]에서 시차 스크롤이 사용되었다.별이 총총한 밤하늘을 고정한 채 구름이 천천히 움직이는 동안 주요 장면이 스크롤되는 시차 스크롤의 제한된 형태를 사용해 풍경에 깊이를 더했다.이듬해, Moon Patrol(1982)은 완전한 형태의 시차 스크롤을 구현했으며, 세 개의 다른 배경 레이어가 서로 다른 속도로 스크롤하여 [4]그 사이의 거리를 시뮬레이션했다.Moon Patrol은 [5][6]시차 스크롤을 대중화한 것으로 종종 알려져 있다.정글헌트로 불린 정글킹(1982년)도 시차 [7]스크롤을 해 1982년 [8]6월 문패트롤 이후 한 달 만에 개봉했다.

방법들

아케이드 시스템 보드, 비디오 게임 콘솔 및 PC [citation needed]시스템의 타이틀에 사용되는 시차 스크롤에는 크게 4가지 방법이 있습니다.

레이어 방식

레이어 방법의 데모
Whispered World에서 시차 스크롤에 사용되는 레이어 측면도
상기와 같은 이미지(정면에서 본 것)

일부 디스플레이 시스템은 수평 및 수직 방향으로 독립적으로 스크롤하여 서로 합성할 수 있는 여러 배경 레이어를 지원하며 멀티판 카메라를 시뮬레이션합니다.이러한 표시시스템에서 게임은 각 층의 위치를 같은 방향으로 다른 양만큼 바꾸는 것만으로 시차를 발생시킬 수 있다.레이어 이동 속도가 빨라질수록 가상 카메라에 가까운 것으로 인식됩니다.레이어는 플레이필드(플레이어가 상호작용하는 오브젝트를 포함하는 레이어) 앞에 배치될 수 있습니다.예를 들어, 플레이어의 액션을 확대하거나, 게임의 액션을 흐리게 하거나, 플레이어의 주의를 분산시키기 위해서입니다.

사이다법

또한 디스플레이 시스템에서 사용 가능한 경우 프로그래머는 스프라이트의 의사 레이어(하드웨어가 레이어 위 또는 뒤에 그리는 개별적으로 제어 가능한 이동 객체)를 만들 수도 있습니다.예를 들어, NES의 오버헤드 뷰 수직 스크롤 슈터인 Star Force는 스타필드에 이 기술을 사용했고, Final Fight for the Super NES는 메인 플레이필드 바로 앞에 있는 레이어에 이 기술을 사용했습니다.

Amiga 컴퓨터에는 높이와 수평으로 설정할 수 있는 스프라이트가 있어 이 용도에 매우 적합합니다.

Amiga의 Risk Woods는 구리와 다중화된 스프라이트를 사용하여 시스템의 듀얼 플레이필드 모드 대신 전체 화면 시차 배경[9] 레이어를 만듭니다.

반복 패턴/애니메이션 방법

개별 타일로 구성된 스크롤 디스플레이는 시차 효과를 나타내기 위해 개별 타일의 비트맵을 애니메이션화함으로써 반복적인 배경 레이어 위에 '플로팅'할 수 있습니다.컬러 사이클링을 사용하면 전체 화면에서 타일을 빠르게 애니메이션화할 수 있습니다.이 소프트웨어 효과는 다른 (하드웨어) 레이어처럼 착각하게 합니다.많은 게임들이 스크롤 스타필드에 이 기술을 사용했지만 Sensive Software의 게임 Parallax와 같이 더 복잡하고 다방향적인 효과를 얻을 수 있습니다.

래스터법

래스터 그래픽스에서는, 일반적으로, 화상의 픽셀의 라인은, 1개의 라인을 그리는 것과 다음의 라인을 그리는 것 사이의 약간의 지연(수평 블랭크 간격이라고 불린다)으로 위에서 아래로 합성 및 갱신됩니다.3, 4세대 비디오 게임 콘솔, 전용 TV 게임 또는 이와 유사한 핸드헬드 시스템 등의 오래된 그래픽 칩셋용으로 설계된 게임에서는 래스터 특성을 활용하여 더 많은 레이어를 구현합니다.

일부 디스플레이 시스템에는 레이어가 하나만 있습니다.여기에는 코모도어 64, 닌텐도 엔터테인먼트 시스템, 세가 마스터 시스템, PC 엔진/터보그래프x-16 및 오리지널 게임보이 등 대부분의 클래식한 8비트 시스템이 포함됩니다.이러한 시스템에서 보다 정교한 게임은 일반적으로 수평 스트립으로 레이어를 분할하고 각각 다른 위치와 스크롤 속도를 가집니다.통상, 화면의 상부에 있는 스트립은, 가상 카메라로부터 멀리 떨어져 있는 것을 나타내거나, 상태 정보를 표시하기 위해서 1개의 스트립이 정지해 있습니다.그런 다음 프로그램은 수평 공백이 될 때까지 기다렸다가 디스플레이 시스템이 각 스캔 라인을 그리기 시작하기 직전에 레이어의 스크롤 위치를 변경합니다.이것은 "래스터 효과"라고 불리며 그라데이션 배경을 제공하도록 시스템 팔레트를 변경하는 데도 유용합니다.

일부 플랫폼(예: Commodore 64, Amiga, Sega Master System,[10] PC Engine/TurboGrafx-16,[11] Sega Mega Drive/Genesis, Super NES, Game Boy, Game Boy Advance 및 닌텐도 DS)은 나머지 프로그램의 레지스터를 독립적으로 자동으로 설정하는 수평 공백 인터럽트를 제공합니다.NES와 같은 다른 기기들은 비디오 칩이 하나의 스캔라인을 그리는 데 걸리는 시간만큼 정확하게 실행되도록 특별히 작성된 사이클 타임 코드나 일정 수의 스캔라인을 그린 후에 인터럽트를 생성하는 게임 카트리지 내부의 타이머를 사용해야 합니다.많은 NES 게임들이 상태 표시줄을 그리기 위해 이 기술을 사용하고 있으며, Teenge Mutent Ninja Teenge Mutent Ninja Turtle II: 아케이드 게임과 NES용 프로젝트 둠은 다른 속도로 배경 레이어를 스크롤하기 위해 사용합니다.

더 발전된 래스터 기술은 흥미로운 효과를 낼 수 있습니다.시스템은 래스터와 레이어가 결합되면 매우 효과적인 필드 깊이를 얻을 수 있습니다. Sonic the Hogso, Sonic The Hogso 2, ActRaiser, Lionheart, Kid Chaos 및 Street Fighter II는 이 효과를 잘 사용했습니다.각 스캔 라인에 자체 레이어가 있으면 폴 포지션 효과가 생성되어 2D 시스템에 의사 3D 로드(또는 NBA Jam과 같은 의사 3D 볼 코트)가 생성됩니다.

디스플레이 시스템이 스크롤(일반적으로 Mode 7로 알려진 효과) 외에 회전 및 스케일링 기능을 지원하는 경우 회전 및 스케일링 계수를 변경하면 평면 투영을 그릴 수 있으며(F-Zero 및 Super Mario Cart에서와 같이) 플레이필드를 휘어 추가적인 도전 계수를 생성할 수 있습니다.

또 다른 고급 기술은 화면상의 타일 행/[12]컬럼을 개별적으로 스크롤할 수 있는 행/컬럼 스크롤입니다.이 기술은 Sega Space Harrier와 System 16,[13] Sega Mega Drive/Genesis [14]콘솔 및 Capcom CP 시스템,[15] Irem M-92[16] 및 Taito F3 시스템[17] 아케이드 게임 보드 이후 다양한 Sega 아케이드 시스템 보드의 그래픽 칩에 구현되어 있습니다.

예

다음 애니메이션에서는 세 개의 층이 서로 다른 속도로 왼쪽으로 이동하고 있습니다.속도는 전방에서 후방으로 감소하며 보는 사람과의 상대적인 거리 증가에 대응합니다.지층은 식물층보다 8배 빠른 속도로 움직이고 있다.식생층은 구름층보다 두 배 빠르게 움직이고 있다.

  • Cloud Layer - Back

    클라우드 레이어 - 후면

  • Vegetation Layer - Middle

    식생층 - 중간

  • Ground Layer - Front

    접지층 - 전면

  • Animation

    애니매이션

웹 디자인에서의 시차 스크롤

브라우저에서의 시차 스크롤의 첫 번째 구현 중 하나는 2007년 웹 개발자인 Glutnix에 의해 블로그 투고에서 작성 및 공유되었습니다.이 예에는 Internet Explorer 6과 그 [18][19]시대의 다른 브라우저를 지원하는 JavaScript와 CSS 2를 사용한 데모도 포함되어 있습니다.하지만, 2011년 HTML5와 CSS3 코딩의 도입이 되어서야 이 기술은 웹 디자이너들에게 인기를 끌게 되었다.지지자들은 이것이 [20]웹의 유동성을 수용하는 간단한 방법이라고 주장한다.지지자들은 사용자의 관심을 높이고 웹사이트에서 제공하는 전반적인 경험을 개선하기 위한 도구로 시차 배경을 사용합니다.그러나 2013년에 발표된 Purdue University의 연구에 따르면 다음과 같은 결과가 나타났습니다. "... 시차 스크롤은 사용자 경험의 특정 측면을 향상시켰지만, 전체적인 사용자 경험을 향상시키지는 못했습니다."[21]

「 」를 참조해 주세요.

레퍼런스

  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: 제목으로 아카이브된 복사(링크)
  11. ^ "Archived copy". Archived from the original on 2014-03-18. Retrieved 2014-03-18.{{cite web}}: CS1 maint: 제목으로 아카이브된 복사(링크)
  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: 제목으로 아카이브된 복사(링크)
  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". 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. ^ Dan Cederholm; Ethan Marcotte (9 April 2010). Handcrafted CSS: More Bulletproof Web Design. New Riders. pp. 5–. ISBN 978-0-13-210481-4.
  21. ^ 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.