맨위로가기

시차 스크롤링

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

시차 스크롤링은 여러 개의 배경 레이어를 서로 다른 속도로 움직여 깊이감을 표현하는 기술로, 아케이드, 비디오 게임 콘솔, 개인용 컴퓨터 등에서 사용된다. 레이어, 스프라이트, 반복 패턴/애니메이션, 래스터 방식 등 다양한 구현 방법이 있으며, 특히 래스터 방식은 구형 그래픽 칩셋을 활용하여 레이어의 환영을 만들 수 있다. 게임에서는 '소닉 더 헤지혹' 시리즈와 '스트리트 파이터 II' 등에서 활용되었으며, 웹 디자인에서도 입체감을 부여하고 사용자 경험을 향상시키는 데 사용되지만, 사용자 경험을 항상 개선하는 것은 아니라는 연구 결과도 있다.

더 읽어볼만한 페이지

  • 반응형 웹 디자인 - 어도비 뮤즈
    어도비 뮤즈는 어도비에서 개발한 웹사이트 제작 소프트웨어이며, 테마와 위젯을 제공하여 정적 HTML 파일을 생성하고, 2012년에 출시되어 2020년에 기술 지원이 종료되었다.
  • 반응형 웹 디자인 - JQuery Mobile
    jQuery Mobile은 다양한 모바일 플랫폼과 데스크톱 브라우저를 지원하며 HTML5 기반 UI 구성과 AJAX 기반 탐색을 통해 모바일 웹 페이지 제작을 돕는 jQuery 기반의 사용자 인터페이스 라이브러리이다.
  • Ajax - 구글 문서도구
    구글 문서도구는 구글에서 제공하는 웹 기반 워드 프로세서로, 문서 작성, 편집, 공유 기능을 제공하며, 다양한 문서 형식 지원, 실시간 공동 작업, 머신러닝 기반 기능을 제공하고, 구글 드라이브를 통해 문서 및 파일을 함께 이용할 수 있다.
  • Ajax - AngularJS
    AngularJS는 동적 웹 애플리케이션 개발을 용이하게 하기 위해 설계된 오픈 소스 자바스크립트 프레임워크로, MVC 패턴 적용, 의존성 주입, HTML 확장 디렉티브 제공, 양방향 데이터 바인딩 등의 특징을 가지며, 장기 지원은 종료되었지만 웹 개발에 중요한 영향을 미쳤다.
  • 웹 디자인 - 웹 접근성
    웹 접근성은 장애가 있는 사람들이 웹을 사용할 수 있도록 기술 및 디자인 원칙을 적용하는 것이며, 웹 콘텐츠, 저작 도구, 사용자 에이전트의 접근성 향상을 위한 지침과 법률, 인공지능 기술 활용을 통한 접근성 개선 노력이 이루어지고 있다.
  • 웹 디자인 - 접근성
    접근성은 장애인을 포함한 모든 사람이 정보와 서비스에 차별 없이 접근하도록 보장하는 개념으로, 윤리적 책임, 사회적 형평성, 상업적 이익, 공익적 가치 때문에 중요하며, 물리적 환경, 정보 접근, 서비스 접근 등 다양한 영역에서 보조 기술과 적응 기술을 통해 구현되지만, 완전한 확보를 위해서는 지속적인 노력과 정책적 지원이 필요하다.
시차 스크롤링
시차 스크롤링
시차 스크롤링 데모
시차 스크롤링 데모
유형시각 효과
사용 분야컴퓨터 그래픽스
비디오 게임
웹 디자인
기술적 세부 사항
설명배경 이미지를 다른 속도로 움직여 원근감을 표현하는 기술
목적2차원 환경에서 3차원 깊이감을 시뮬레이션
역사
최초 사용1930년대 디즈니 스튜디오의 다중 촬영 카메라
비디오 게임1981년 아케이드 게임 정글 헌트
활용 예시
비디오 게임문 패트롤
스페이스 해리어
스트리트 파이터 1987
파이널 파이트
액트레이저
웹 디자인웹사이트에 깊이감과 몰입감을 더하기 위해 사용

2. 방법

시차 스크롤링은 아케이드 시스템 기판, 비디오 게임 콘솔 및 개인용 컴퓨터 시스템의 타이틀에서 사용되는 네 가지 주요 방법으로 구현된다.

== 레이어 방식 ==

여러 개의 배경 레이어를 생성하고, 각 레이어를 서로 다른 속도로 움직여 시차 스크롤링을 구현한다. 레이어가 많을수록 더욱 깊이 있는 표현이 가능하지만, 시스템 부하가 커질 수 있다.

위 애니메이션은 3개의 레이어로 구성되어 있으며, 각 레이어가 왼쪽 방향으로 움직이는 속도에 차이가 있다. 맨 앞에 있는 레이어는 중간에 있는 레이어보다 8배 빠르게 움직이고 있고, 중간 레이어는 구름이 있는 배경 레이어보다 2배 빠르게 움직인다.

일부 디스플레이 시스템은 여러 개의 배경 레이어를 지원하여 다중 평면 카메라를 시뮬레이션한다. 이러한 시스템에서 각 레이어의 위치를 동일한 방향으로 다른 양만큼 변경하여 시차를 생성할 수 있다. 더 빠르게 움직이는 레이어는 가상 카메라에 더 가깝게 인식된다. 플레이어와 상호 작용하는 개체를 포함하는 레이어인 ''플레이필드'' 앞에 레이어를 배치하여 증가된 차원을 제공하거나, 게임의 일부 액션을 가리거나, 플레이어의 주의를 분산시키는 등의 효과를 낼 수 있다.

== 스프라이트 방식 ==

프로그래머는 디스플레이 시스템에서 사용할 수 있는 경우, 스프라이트의 의사 계층을 만들 수 있다. 예를 들어 패미컴용 수직 스크롤 슈팅 게임인 ''스타 포스''는 별 배경에 이 방식을 사용했으며, 슈퍼 패미컴용 ''파이널 파이트''는 메인 플레이 필드 바로 앞에 있는 레이어에 이 기술을 사용했다.

아미가 컴퓨터는 모든 높이를 가질 수 있고 코퍼 보조 프로세서로 수평으로 설정할 수 있는 스프라이트를 가지고 있어 이 목적에 이상적이다.[9] 아미가의 리스키 우즈는 시스템의 듀얼 플레이필드 모드 대신 코퍼와 멀티플렉싱된 스프라이트를 사용하여 전체 화면의 시차 배경 레이어를 생성한다.[9]

스프라이트는 화면에 동시에 표시할 수 있는 수에 제한이 있지만, 화면 상단에서 표시된 스프라이트를 화면 하단에서 재사용함으로써 보이는 스프라이트 표시 수를 늘리는 기법(스프라이트 더블러)이 존재한다. 하드웨어의 처리 능력에 따라 분할 수를 늘릴 수 있으며, 4배 정도까지 늘릴 수 있는 라이브러리가 존재한다. 수평 귀선 기간 내에 스프라이트 IC를 조작할 수 없는 하드웨어에서는 이 방법을 사용할 수 없다. 마찬가지로 유지하는 패턴을 교체함으로써, 의사적으로 정의 수도 변경 가능하다. 하지만, 구조상, 분할 라인을 넘을 경우, 캐릭터가 잘려서 표시된다.

스프라이트 단독으로 래스터 스크롤을 적용하여 화면 밖으로 이동시킴으로써 위에서 아래로 서서히 사라지거나 나타나는 등의 표현이 가능하다.

== 반복 패턴/애니메이션 방식 ==

반복되는 패턴이나 애니메이션을 사용하여 시차 효과를 표현할 수 있다. 타일로 구성된 스크롤 디스플레이는 시차 효과를 위해 개별 타일의 비트맵을 애니메이션화하여 반복되는 배경 레이어 위로 '떠다니는' 것처럼 보이게 할 수 있다. 색상 순환을 사용하면 전체 화면에서 타일을 빠르게 애니메이션화할 수 있다. 이 소프트웨어 효과는 다른 (하드웨어) 레이어의 환상을 제공한다. 많은 게임에서 이 기술을 스크롤하는 별밭에 사용했지만, 때로는 Sensible Software의 게임 ''Parallax''에서처럼 더 복잡하거나 다방향의 효과가 달성되기도 한다.

같은 배경 패턴을 세로 또는 가로로 반복하여 배열한 후, 하드웨어 또는 소프트웨어로 패턴의 내용을 직접 변경하여 유사 스크롤을 구현할 수 있다. 변화에 속도 차이를 둔 패턴을 사용하면 그대로 래스터 스크롤처럼 보이게 된다. 패밀리 컴퓨터 후기 소프트웨어, PC 엔진 등 배경 면이 하나밖에 없는 하드웨어에서 다중 스크롤을 표현하거나, 하드웨어 스크롤이 없는 컴퓨터에서 화면을 부드럽게 스크롤하는 방법으로도 널리 사용되었다.

== 래스터 방식 ==

래스터 그래픽스에서 이미지의 픽셀 선은 일반적으로 위에서 아래로 구성되고 새로 고쳐지며, 한 줄을 그리는 것과 다음 줄을 그리는 사이에 약간의 지연(수평 블랭킹 간격)이 있다.[10]

3세대 및 4세대 비디오 게임 콘솔, 전용 휴대용 TV 게임 또는 유사한 휴대용 시스템과 같은 구형 그래픽 칩셋용으로 설계된 게임은 래스터 특성을 활용하여 더 많은 레이어의 환상을 만든다.

일부 디스플레이 시스템은 레이어가 하나만 있다. 여기에는 대부분의 고전적인 8비트 시스템(예: 코모도어 64, 패미컴, 세가 마스터 시스템, PC 엔진/터보그래픽스-16 및 오리지널 게임보이)이 포함된다. 이러한 시스템의 보다 정교한 게임은 일반적으로 레이어를 수평 스트립으로 나누며, 각 스트립은 서로 다른 위치와 스크롤 속도를 갖는다. 일반적으로 화면 상단에 있는 스트립은 가상 카메라에서 더 멀리 떨어진 물체를 나타내거나, 한 스트립은 상태 정보를 표시하기 위해 고정된다. 그런 다음 프로그램은 수평 블랭크를 기다리고 디스플레이 시스템이 각 주사선을 그리기 시작하기 직전에 레이어의 스크롤 위치를 변경한다. 이것을 "래스터 효과"라고 하며 시스템 팔레트를 변경하여 그라데이션 배경을 제공하는 데에도 유용하다.

일부 플랫폼(예: 코모도어 64, 아미가, 마스터 시스템,[11] PC 엔진/터보그래픽스-16, 세가 메가 드라이브/제네시스, 슈퍼 NES, 게임보이, 게임보이 어드밴스 및 닌텐도 DS)는 프로그램의 나머지 부분과 독립적으로 레지스터를 자동으로 설정하기 위한 수평 블랭크 인터럽트를 제공한다. NES와 같은 다른 시스템에서는 비디오 칩이 한 스캔 라인을 그리는 데 걸리는 시간과 정확히 동일한 시간이 걸리도록 특별히 작성된 주기 시간 코드를 사용하거나, 지정된 수의 스캔 라인이 그려진 후 타이머 게임 카트리지 내부가 인터럽트를 생성해야 한다. 많은 NES 게임은 이 기술을 사용하여 상태 표시줄을 그리고 NES용 ''닌자 거북이 II: 아케이드 게임''과 ''바이스: 프로젝트 둠''은 배경 레이어를 서로 다른 속도로 스크롤하는 데 사용한다.

더욱 발전된 래스터 기술은 흥미로운 효과를 낼 수 있다. 래스터가 있는 레이어를 결합하면 매우 효과적인 피사계 심도를 얻을 수 있다. ''소닉 더 헤지혹'', ''소닉 더 헤지혹 2'', ''액트레이저'', ''라이온하트'', ''키드 카오스'' 및 ''스트리트 파이터 II''는 이 효과를 잘 사용했다. 각 스캔 라인에 자체 레이어가 있는 경우, ''폴 포지션'' 효과가 생성되어 2D 시스템에서 유사 3D 도로(또는 ''NBA 잼''과 같은 유사 3D 볼 코트)를 만든다.

디스플레이 시스템이 스크롤 외에 회전 및 스케일링을 지원하는 경우(일반적으로 모드 7이라고 함), 회전 및 스케일링 계수를 변경하면 평면의 투영을 그리거나(예: ''F-Zero'' 및 ''슈퍼 마리오 카트'') 플레이 필드를 왜곡하여 추가적인 도전 요소를 만들 수 있다.

또 다른 고급 기술은 화면의 타일 행/열을 개별적으로 스크롤할 수 있는 행/열 스크롤링이다.[12] 이 기술은 세가 스페이스 해리어 및 시스템 16 이후 다양한 세가 아케이드 시스템 보드의 그래픽 칩, 세가 메가 드라이브/제네시스 콘솔,[14] 및 캡콤 CP 시스템,[15] Irem M-92[16] 및 타이토 F3 시스템[17] 아케이드 게임 보드에 구현된다.

== 래스터 스크롤의 원리 ==

래스터 그래픽스에서 이미지의 픽셀 선은 일반적으로 위에서 아래로 구성되고 새로 고쳐지며, 한 줄을 그리는 것과 다음 줄을 그리는 사이에 약간의 지연(수평 블랭킹 간격)이 있다.[10]

디스플레이는 다음의 반복으로 영상을 표시한다.


  • 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.
  • 1라인 아래의 맨 왼쪽으로 이동한다 ('''수평 귀선 기간''')
  • 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.


(중략)

  • (최하 라인) 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.
  • 맨 위 라인의 맨 왼쪽으로 이동한다 (수직 귀선 기간)


래스터 스크롤은 이 '''수평 귀선 기간'''을 하드웨어 인터럽트로 감지하여 인터럽트 루틴 내에서 스크롤 레지스터를 조작한다. 수평 귀선 기간마다 잇따라 스크롤량을 변화시킴으로써, 실제로 그려지는 화면상에서는 화면의 일부 라인만 가로로 이동하는 것처럼 보인다.

4번째 라인을 그리기 직전에 오른쪽으로 1 도트 스크롤하고, 6번째 라인을 그리기 전에 원래대로 되돌리면(왼쪽으로 1 도트 스크롤) 다음과 같이 보인다.

□□□□□□□□□□□□□□

□□■■■□□□■■■■□□

□■■□■■□□■■□■■□

□□■■□■■□□■■■■□

□□■■■■■□□■■□■■

□■■□■■□□■■■■□□

□□□□□□□□□□□□□□

3세대 및 4세대 비디오 게임 콘솔, 전용 휴대용 TV 게임 또는 유사한 휴대용 시스템과 같은 구형 그래픽 칩셋용으로 설계된 게임은 래스터 특성을 활용하여 더 많은 레이어의 환상을 만든다.

(이하 래스터 방식과 동일 내용 중복)

== 행/열 스크롤링 ==

모니터가 가로로 배치된 경우, 각 라인을 가로 방향으로 스크롤하여 이미지를 가로 방향으로 이동시키거나 왜곡할 수 있다. 세로로 배치된 모니터의 경우 가로 래스터 스크롤 처리가 세로 래스터 스크롤로 바뀌어 읽힐 수 있지만, 이는 여기서 설명하는 세로 래스터 스크롤과는 다른 처리 방식이므로 주의해야 한다.

다중 가로 스크롤을 통해 깊이 있는 지면을 표현하거나, 擬似(의사) 3D 레이싱 게임에서 코스를 표현하고, 화면을 물결치게 하여 공간이나 눈앞이 왜곡되는 효과를 연출할 수 있다. 이러한 기술은 세가의 아케이드 시스템 보드, 메가 드라이브, 캡콤의 CP 시스템 등에서 구현되었다.

2. 1. 레이어 방식

여러 개의 배경 레이어를 생성하고, 각 레이어를 서로 다른 속도로 움직여 시차 스크롤링을 구현한다. 레이어가 많을수록 더욱 깊이 있는 표현이 가능하지만, 시스템 부하가 커질 수 있다.

위 애니메이션은 3개의 레이어로 구성되어 있으며, 각 레이어가 왼쪽 방향으로 움직이는 속도에 차이가 있다. 맨 앞에 있는 레이어는 중간에 있는 레이어보다 8배 빠르게 움직이고 있고, 중간 레이어는 구름이 있는 배경 레이어보다 2배 빠르게 움직인다.

일부 디스플레이 시스템은 여러 개의 배경 레이어를 지원하여 다중 평면 카메라를 시뮬레이션한다. 이러한 시스템에서 각 레이어의 위치를 동일한 방향으로 다른 양만큼 변경하여 시차를 생성할 수 있다. 더 빠르게 움직이는 레이어는 가상 카메라에 더 가깝게 인식된다. 플레이어와 상호 작용하는 개체를 포함하는 레이어인 ''플레이필드'' 앞에 레이어를 배치하여 증가된 차원을 제공하거나, 게임의 일부 액션을 가리거나, 플레이어의 주의를 분산시키는 등의 효과를 낼 수 있다.

2. 2. 스프라이트 방식

프로그래머는 디스플레이 시스템에서 사용할 수 있는 경우, 스프라이트의 의사 계층을 만들 수 있다. 예를 들어 패미컴용 수직 스크롤 슈팅 게임인 ''스타 포스''는 별 배경에 이 방식을 사용했으며, 슈퍼 패미컴용 ''파이널 파이트''는 메인 플레이 필드 바로 앞에 있는 레이어에 이 기술을 사용했다.

아미가 컴퓨터는 모든 높이를 가질 수 있고 코퍼 보조 프로세서로 수평으로 설정할 수 있는 스프라이트를 가지고 있어 이 목적에 이상적이다.[9] 아미가의 리스키 우즈는 시스템의 듀얼 플레이필드 모드 대신 코퍼와 멀티플렉싱된 스프라이트를 사용하여 전체 화면의 시차 배경 레이어를 생성한다.[9]

스프라이트는 화면에 동시에 표시할 수 있는 수에 제한이 있지만, 화면 상단에서 표시된 스프라이트를 화면 하단에서 재사용함으로써 보이는 스프라이트 표시 수를 늘리는 기법이다. 스프라이트 더블러라고도 불린다. 하드웨어의 처리 능력에 따라 분할 수를 늘릴 수 있으며, 4배 정도까지 늘릴 수 있는 라이브러리가 존재한다. 수평 귀선 기간 내에 스프라이트 IC를 조작할 수 없는 하드웨어에서는 이 방법을 사용할 수 없다. 마찬가지로 유지하는 패턴을 교체함으로써, 의사적으로 정의 수도 변경 가능하다. 하지만, 구조상, 분할 라인을 넘을 경우, 캐릭터가 잘려서 표시된다.

스프라이트 단독으로 래스터 스크롤을 적용하여 화면 밖으로 이동시킴으로써 위에서 아래로 서서히 사라지거나 나타나는 등의 표현이 가능하다.

2. 3. 반복 패턴/애니메이션 방식

반복되는 패턴이나 애니메이션을 사용하여 시차 효과를 표현할 수 있다. 타일로 구성된 스크롤 디스플레이는 시차 효과를 위해 개별 타일의 비트맵을 애니메이션화하여 반복되는 배경 레이어 위로 '떠다니는' 것처럼 보이게 할 수 있다. 색상 순환을 사용하면 전체 화면에서 타일을 빠르게 애니메이션화할 수 있다. 이 소프트웨어 효과는 다른 (하드웨어) 레이어의 환상을 제공한다. 많은 게임에서 이 기술을 스크롤하는 별밭에 사용했지만, 때로는 Sensible Software의 게임 ''Parallax''에서처럼 더 복잡하거나 다방향의 효과가 달성되기도 한다.

같은 배경 패턴을 세로 또는 가로로 반복하여 배열한 후, 하드웨어 또는 소프트웨어로 패턴의 내용을 직접 변경하여 유사 스크롤을 구현할 수 있다. 변화에 속도 차이를 둔 패턴을 사용하면 그대로 래스터 스크롤처럼 보이게 된다. 패밀리 컴퓨터 후기 소프트웨어, PC 엔진 등 배경 면이 하나밖에 없는 하드웨어에서 다중 스크롤을 표현하거나, 하드웨어 스크롤이 없는 컴퓨터에서 화면을 부드럽게 스크롤하는 방법으로도 널리 사용되었다.

2. 4. 래스터 방식

래스터 그래픽스에서 이미지의 픽셀 선은 일반적으로 위에서 아래로 구성되고 새로 고쳐지며, 한 줄을 그리는 것과 다음 줄을 그리는 사이에 약간의 지연(수평 블랭킹 간격)이 있다.[10]

3세대 및 4세대 비디오 게임 콘솔, 전용 휴대용 TV 게임 또는 유사한 휴대용 시스템과 같은 구형 그래픽 칩셋용으로 설계된 게임은 래스터 특성을 활용하여 더 많은 레이어의 환상을 만든다.

일부 디스플레이 시스템은 레이어가 하나만 있다. 여기에는 대부분의 고전적인 8비트 시스템(예: 코모도어 64, 패미컴, 세가 마스터 시스템, PC 엔진/터보그래픽스-16 및 오리지널 게임보이)이 포함된다. 이러한 시스템의 보다 정교한 게임은 일반적으로 레이어를 수평 스트립으로 나누며, 각 스트립은 서로 다른 위치와 스크롤 속도를 갖는다. 일반적으로 화면 상단에 있는 스트립은 가상 카메라에서 더 멀리 떨어진 물체를 나타내거나, 한 스트립은 상태 정보를 표시하기 위해 고정된다. 그런 다음 프로그램은 수평 블랭크를 기다리고 디스플레이 시스템이 각 주사선을 그리기 시작하기 직전에 레이어의 스크롤 위치를 변경한다. 이것을 "래스터 효과"라고 하며 시스템 팔레트를 변경하여 그라데이션 배경을 제공하는 데에도 유용하다.

일부 플랫폼(예: 코모도어 64, 아미가, 마스터 시스템,[11] PC 엔진/터보그래픽스-16, 세가 메가 드라이브/제네시스, 슈퍼 NES, 게임보이, 게임보이 어드밴스 및 닌텐도 DS)는 프로그램의 나머지 부분과 독립적으로 레지스터를 자동으로 설정하기 위한 수평 블랭크 인터럽트를 제공한다. NES와 같은 다른 시스템에서는 비디오 칩이 한 스캔 라인을 그리는 데 걸리는 시간과 정확히 동일한 시간이 걸리도록 특별히 작성된 주기 시간 코드를 사용하거나, 지정된 수의 스캔 라인이 그려진 후 타이머 게임 카트리지 내부가 인터럽트를 생성해야 한다. 많은 NES 게임은 이 기술을 사용하여 상태 표시줄을 그리고 NES용 ''닌자 거북이 II: 아케이드 게임''과 ''바이스: 프로젝트 둠''은 배경 레이어를 서로 다른 속도로 스크롤하는 데 사용한다.

더욱 발전된 래스터 기술은 흥미로운 효과를 낼 수 있다. 래스터가 있는 레이어를 결합하면 매우 효과적인 피사계 심도를 얻을 수 있다. ''소닉 더 헤지혹'', ''소닉 더 헤지혹 2'', ''액트레이저'', ''라이온하트'', ''키드 카오스'' 및 ''스트리트 파이터 II''는 이 효과를 잘 사용했다. 각 스캔 라인에 자체 레이어가 있는 경우, ''폴 포지션'' 효과가 생성되어 2D 시스템에서 유사 3D 도로(또는 ''NBA 잼''과 같은 유사 3D 볼 코트)를 만든다.

디스플레이 시스템이 스크롤 외에 회전 및 스케일링을 지원하는 경우(일반적으로 모드 7이라고 함), 회전 및 스케일링 계수를 변경하면 평면의 투영을 그리거나(예: ''F-Zero'' 및 ''슈퍼 마리오 카트'') 플레이 필드를 왜곡하여 추가적인 도전 요소를 만들 수 있다.

또 다른 고급 기술은 화면의 타일 행/열을 개별적으로 스크롤할 수 있는 행/열 스크롤링이다.[12] 이 기술은 세가 스페이스 해리어 및 시스템 16 이후 다양한 세가 아케이드 시스템 보드의 그래픽 칩, 세가 메가 드라이브/제네시스 콘솔,[14] 및 캡콤 CP 시스템,[15] Irem M-92[16] 및 타이토 F3 시스템[17] 아케이드 게임 보드에 구현된다.

모니터가 가로로 배치된 경우에 대해 설명한다. 모니터를 세로로 배치하면 가로 래스터 스크롤 처리가 그대로 세로 래스터 스크롤로 바뀌어 읽힐 수 있지만, 여기서 설명하는 세로 래스터 스크롤과는 다른 처리가 되므로 주의해야 한다. 각 라인을 가로 방향으로 스크롤시켜 이미지를 가로 방향으로 이동시키거나 왜곡할 수 있다.

  • 다중 가로 스크롤, 깊이 있는 지면 표현, 擬似(의사) 3D 레이스 게임의 코스 표현, 화면을 물결치게 하여 공간이나 눈앞이 왜곡되는 표현 등

2. 4. 1. 래스터 스크롤의 원리 (일본어판 추가)

래스터 그래픽스에서 이미지의 픽셀 선은 일반적으로 위에서 아래로 구성되고 새로 고쳐지며, 한 줄을 그리는 것과 다음 줄을 그리는 사이에 약간의 지연(수평 블랭킹 간격)이 있다.[10]

디스플레이는 다음의 반복으로 영상을 표시한다.

  • 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.
  • 1라인 아래의 맨 왼쪽으로 이동한다 ('''수평 귀선 기간''')
  • 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.


(중략)

  • (최하 라인) 왼쪽에서 오른쪽으로, 가로 방향으로 1라인 분의 신호를 출력한다.
  • 맨 위 라인의 맨 왼쪽으로 이동한다 (수직 귀선 기간)


래스터 스크롤은 이 '''수평 귀선 기간'''을 하드웨어 인터럽트로 감지하여 인터럽트 루틴 내에서 스크롤 레지스터를 조작한다. 수평 귀선 기간마다 잇따라 스크롤량을 변화시킴으로써, 실제로 그려지는 화면상에서는 화면의 일부 라인만 가로로 이동하는 것처럼 보인다.

4번째 라인을 그리기 직전에 오른쪽으로 1 도트 스크롤하고, 6번째 라인을 그리기 전에 원래대로 되돌리면(왼쪽으로 1 도트 스크롤) 다음과 같이 보인다.

□□□□□□□□□□□□□□

□□■■■□□□■■■■□□

□■■□■■□□■■□■■□

□□■■□■■□□■■■■□

□□■■■■■□□■■□■■

□■■□■■□□■■■■□□

□□□□□□□□□□□□□□

3세대 및 4세대 비디오 게임 콘솔, 전용 휴대용 TV 게임 또는 유사한 휴대용 시스템과 같은 구형 그래픽 칩셋용으로 설계된 게임은 래스터 특성을 활용하여 더 많은 레이어의 환상을 만듭니다.

일부 디스플레이 시스템은 레이어가 하나만 있습니다. 여기에는 대부분의 고전적인 8비트 시스템(예: 코모도어 64, 패미컴, 세가 마스터 시스템, PC 엔진/터보그래픽스-16 및 오리지널 게임보이)이 포함됩니다. 이러한 시스템의 보다 정교한 게임은 일반적으로 레이어를 수평 스트립으로 나누며, 각 스트립은 서로 다른 위치와 스크롤 속도를 갖습니다. 일반적으로 화면 상단에 있는 스트립은 가상 카메라에서 더 멀리 떨어진 물체를 나타내거나, 한 스트립은 상태 정보를 표시하기 위해 고정됩니다. 그런 다음 프로그램은 수평 블랭크를 기다리고 디스플레이 시스템이 각 스캔 라인을 그리기 시작하기 직전에 레이어의 스크롤 위치를 변경합니다. 이것을 "래스터 효과"라고 하며 시스템 팔레트를 변경하여 그라데이션 배경을 제공하는 데에도 유용합니다.

일부 플랫폼(예: 코모도어 64, 아미가, 마스터 시스템,[11] PC 엔진/터보그래픽스-16, 세가 메가 드라이브/제네시스, 슈퍼 NES, 게임보이, 게임보이 어드밴스 및 닌텐도 DS)는 프로그램의 나머지 부분과 독립적으로 레지스터를 자동으로 설정하기 위한 수평 블랭크 인터럽트를 제공합니다. NES와 같은 다른 시스템에서는 비디오 칩이 한 스캔 라인을 그리는 데 걸리는 시간과 정확히 동일한 시간이 걸리도록 특별히 작성된 주기 시간 코드를 사용하거나, 지정된 수의 스캔 라인이 그려진 후 타이머 게임 카트리지 내부가 인터럽트를 생성해야 합니다. 많은 NES 게임은 이 기술을 사용하여 상태 표시줄을 그리고 NES용 ''닌자 거북이 II: 아케이드 게임''과 ''바이스: 프로젝트 둠''은 배경 레이어를 서로 다른 속도로 스크롤하는 데 사용합니다.

더욱 발전된 래스터 기술은 흥미로운 효과를 낼 수 있습니다. 래스터가 있는 레이어를 결합하면 매우 효과적인 피사계 심도를 얻을 수 있습니다. ''소닉 더 헤지혹'', ''소닉 더 헤지혹 2'', ''액트레이저'', ''라이온하트'', ''키드 카오스'' 및 ''스트리트 파이터 II''는 이 효과를 잘 사용했습니다. 각 스캔 라인에 자체 레이어가 있는 경우, ''폴 포지션'' 효과가 생성되어 2D 시스템에서 유사 3D 도로(또는 ''NBA 잼''과 같은 유사 3D 볼 코트)를 만듭니다.

디스플레이 시스템이 스크롤 외에 회전 및 스케일링을 지원하는 경우(일반적으로 모드 7이라고 함), 회전 및 스케일링 계수를 변경하면 평면의 투영을 그리거나(예: ''F-Zero'' 및 ''슈퍼 마리오 카트'') 플레이 필드를 왜곡하여 추가적인 도전 요소를 만들 수 있습니다.

또 다른 고급 기술은 화면의 타일 행/열을 개별적으로 스크롤할 수 있는 행/열 스크롤링입니다.[12] 이 기술은 세가 스페이스 해리어 및 시스템 16 이후 다양한 세가 아케이드 시스템 보드의 그래픽 칩, 세가 메가 드라이브/제네시스 콘솔,[14] 및 캡콤 CP 시스템,[15] Irem M-92[16] 및 타이토 F3 시스템[17] 아케이드 게임 보드에 구현됩니다.

2. 4. 2. 행/열 스크롤링 (영어판 추가)

모니터가 가로로 배치된 경우, 각 라인을 가로 방향으로 스크롤하여 이미지를 가로 방향으로 이동시키거나 왜곡할 수 있다. 세로로 배치된 모니터의 경우 가로 래스터 스크롤 처리가 세로 래스터 스크롤로 바뀌어 읽힐 수 있지만, 이는 여기서 설명하는 세로 래스터 스크롤과는 다른 처리 방식이므로 주의해야 한다.

다중 가로 스크롤을 통해 깊이 있는 지면을 표현하거나, 擬似(의사) 3D 레이싱 게임에서 코스를 표현하고, 화면을 물결치게 하여 공간이나 눈앞이 왜곡되는 효과를 연출할 수 있다. 이러한 기술은 세가의 아케이드 시스템 보드, 메가 드라이브, 캡콤의 CP 시스템 등에서 구현되었다.

3. 활용 사례

다음 애니메이션에서 세 개의 레이어가 서로 다른 속도로 왼쪽으로 이동한다. 속도는 앞쪽에서 뒤쪽으로 갈수록 감소하며, 시청자로부터의 상대적인 거리가 증가하는 것에 해당한다. 지면 레이어는 식생 레이어보다 8배 더 빠르게 움직인다. 식생 레이어는 구름 레이어보다 두 배 더 빠르게 움직인다.

'''게임'''

패밀리 컴퓨터・MSX2 등 레이어 기능을 갖지 않은 하드웨어에서 화면을 상하로 분할하여, 상태나 점수를 표시한 채 다른 한쪽 화면을 스크롤하는 기법(예: 슈퍼 마리오 브라더스 3)도 주사 타이밍에 의한 인터럽트 처리로 이루어진다. 라인 분할 스크롤 (라인 스크롤)이라고도 불린다.

상하 방향으로 분할하고 싶은 위치에서 인터럽트를 발생시켜 표시 페이지나 스크롤 위치, 화면 모드, 맵 파츠 등을 전환함으로써 화면 상하에서 다른 표시를 하는 것이 가능해진다.

이것을 모든 주사선에서 실행하면 래스터 스크롤이 되므로 래스터 스크롤의 전신 기술이라고 할 수 있지만, 모든 주사선에서 처리를 실행하는 것을 상정하지 않은 경우에는 처리가 따라가지 못해 "화면이 깨지는" 경우가 있다 (패미컴판 드래곤 퀘스트 III 그리고 전설로…의 여행의 문 등).

화면 표시의 세로 스크롤의 가로 방향의 복수 분할(세로 셀 스크롤, 세로 래스터 스크롤)을 할 수 있는 하드웨어에서, 래스터 스크롤을 조합함으로써, 각도 제한 하에 화면 전체가 회전한 것처럼 보이게 할 수 있다.


: 슈퍼 패미컴의 많은 소프트웨어에서 사용되었다. 수평 라인마다 화면을 분할하여 각 화면 모드를 전환하고, 각 모드 특유의 특수 처리를 표시 화면 내에서 개별적으로 사용한다.

: 슈퍼 마리오 카트에서는 원경이나 점수 표시를 BG 레이어가 여러 개 사용 가능한 모드 0으로 묘사하고, 지면의 코스 부분을 확대 축소 회전 가능한 모드 7로 묘사했다. 파이널 판타지 VI에서의 비공정 비행 장면에서는 원경을 세로 래스터 스크롤이 가능한 모드 2를 사용하여 앞서 언급한 유사 회전 처리로 묘사하고, 지표면을 확대 축소 회전 가능한 모드 7로 묘사했으며, 지평선의 기울기를 스프라이트의 마스크로 표현함으로써, 당시로서는 박력 있는 현실적인 비행 장면을 구현했다.

  • MSX2

: MSX2의 일부 소프트웨어에서 사용. 화면을 상하로 분할하고, TMS9918 호환의 캐릭터 그래픽 모드, V9938의 비트맵 저해상도 16색/256색과 고해상도 4색/16색의 임의의 각 모드를 조합하여 표시한다. 상단 화면을 스크롤 고정된 점수 표시, 하단 화면을 게임 화면으로 하는 기법이 일반적이다. 모드 전환을 동반하지 않는 단순한 화면 분할은 드래곤 버스터의 드래곤과의 대결 장면과 같이 패미컴에서도 사용 예가 있다.

  • 폴 포지션
  • F1 레이스 (패미컴 버전)
  • 북두의 권 (세가 마크 III 버전)
  • 슈퍼 모나코 GP (메가 드라이브 버전)
  • 아일톤 세나 슈퍼 모나코 GP II (메가 드라이브 버전)
  • F1 (메가 드라이브)
  • 섹터 존
  • 맥스 맥스
  • 서머 카니발 '92 렛카
  • 다라이어스 II, 메탈 블랙, 레이포스, 다라이어스 외전
  • 젝세크스
  • 액슬레이
  • 악마성 드라큘라 XX
  • 팔랑크스
  • 나이아스, 아쿠아레스
  • 스트리트 파이터 II
  • 익스 랜서
  • 매지컬 체이스
  • 썬더 포스 시리즈 (II・III・IV・V)
  • 소닉 더 헤지혹 시리즈 (1・2・3・소닉 & 너클즈)
  • 건스타 히어로즈
  • 즛즛 교의 야망
  • 키라키라 스타 나이트 DX


'''웹 디자인'''

웹 페이지에서 시차 스크롤링을 사용하여 입체감을 부여하고 사용자 경험을 향상시킬 수 있다. 2007년 Glutnix가 처음으로 자바스크립트와 CSS를 사용한 시차 스크롤링 구현 방법을 제시했다.[18][19] 2008년 Paul Annett는 CSS만으로 시차 효과를 만드는 방법을 설명했다.[20] 그는 SXSW Interactive 2009에서 관객 참여와 고릴라 의상을 입은 남자의 도움을 받아 무대에서 해당 효과를 시연했다.[21][22]

옹호자들은 웹의 유연성을 수용하는 간단한 방법이라고 주장하며, Silverback 웹사이트를 그들이 처음 접한 예로 언급했다.[23] 지지자들은 시차 배경을 사용하여 사용자의 참여를 높이고 웹사이트가 제공하는 전반적인 경험을 개선하는 도구로 사용한다. 그러나 2013년에 발표된 퍼듀 대학교 연구에 따르면 "... 시차 스크롤링이 사용자 경험의 특정 측면을 향상시키기는 하지만, 반드시 전반적인 사용자 경험을 개선하는 것은 아니다"라는 결과가 나왔다.[24] Dede Frederick, James Mohler, Mihaela Vorvoreanu 및 Ronald Glotzbach의 2010년 이후에 진행된 미정의 연구에서는 시차 스크롤링이 "특정 사람들에게 메스꺼움을 유발할 수 있다"고 언급했다.[25]

웹사이트 예시는 다음과 같다.

  • [http://www.drugtreatment.com/]
  • http://www.paranorman.com/

3. 1. 게임

패밀리 컴퓨터・MSX2 등 레이어 기능을 갖지 않은 하드웨어에서 화면을 상하로 분할하여, 상태나 점수를 표시한 채 다른 한쪽 화면을 스크롤하는 기법(예: 슈퍼 마리오 브라더스 3)도 주사 타이밍에 의한 인터럽트 처리로 이루어진다. 라인 분할 스크롤 (라인 스크롤)이라고도 불린다.

상하 방향으로 분할하고 싶은 위치에서 인터럽트를 발생시켜 표시 페이지나 스크롤 위치, 화면 모드, 맵 파츠 등을 전환함으로써 화면 상하에서 다른 표시를 하는 것이 가능해진다.

이것을 모든 주사선에서 실행하면 래스터 스크롤이 되므로 래스터 스크롤의 전신 기술이라고 할 수 있지만, 모든 주사선에서 처리를 실행하는 것을 상정하지 않은 경우에는 처리가 따라가지 못해 "화면이 깨지는" 경우가 있다 (패미컴판 드래곤 퀘스트 III 그리고 전설로…의 여행의 문 등).

화면 표시의 세로 스크롤의 가로 방향의 복수 분할(세로 셀 스크롤, 세로 래스터 스크롤)을 할 수 있는 하드웨어에서, 래스터 스크롤을 조합함으로써, 각도 제한 하에 화면 전체가 회전한 것처럼 보이게 할 수 있다.
: 슈퍼 패미컴의 많은 소프트웨어에서 사용되었다. 수평 라인마다 화면을 분할하여 각 화면 모드를 전환하고, 각 모드 특유의 특수 처리를 표시 화면 내에서 개별적으로 사용한다.

: 슈퍼 마리오 카트에서는 원경이나 점수 표시를 BG 레이어가 여러 개 사용 가능한 모드 0으로 묘사하고, 지면의 코스 부분을 확대 축소 회전 가능한 모드 7로 묘사했다. 파이널 판타지 VI에서의 비공정 비행 장면에서는 원경을 세로 래스터 스크롤이 가능한 모드 2를 사용하여 앞서 언급한 유사 회전 처리로 묘사하고, 지표면을 확대 축소 회전 가능한 모드 7로 묘사했으며, 지평선의 기울기를 스프라이트의 마스크로 표현함으로써, 당시로서는 박력 있는 현실적인 비행 장면을 구현했다.

  • MSX2

: MSX2의 일부 소프트웨어에서 사용. 화면을 상하로 분할하고, TMS9918 호환의 캐릭터 그래픽 모드, V9938의 비트맵 저해상도 16색/256색과 고해상도 4색/16색의 임의의 각 모드를 조합하여 표시한다. 상단 화면을 스크롤 고정된 점수 표시, 하단 화면을 게임 화면으로 하는 기법이 일반적이다. 모드 전환을 동반하지 않는 단순한 화면 분할은 드래곤 버스터의 드래곤과의 대결 장면과 같이 패미컴에서도 사용 예가 있다.

  • 폴 포지션
  • F1 레이스 (패미컴 버전)
  • 북두의 권 (세가 마크 III 버전)
  • 슈퍼 모나코 GP (메가 드라이브 버전)
  • 아일톤 세나 슈퍼 모나코 GP II (메가 드라이브 버전)
  • F1 (메가 드라이브)
  • 섹터 존
  • 맥스 맥스
  • 서머 카니발 '92 렛카
  • 다라이어스 II, 메탈 블랙, 레이포스, 다라이어스 외전
  • 젝세크스
  • 액슬레이
  • 악마성 드라큘라 XX
  • 팔랑크스
  • 나이아스, 아쿠아레스
  • 스트리트 파이터 II
  • 익스 랜서
  • 매지컬 체이스
  • 썬더 포스 시리즈 (II・III・IV・V)
  • 소닉 더 헤지혹 시리즈 (1・2・3・소닉 & 너클즈)
  • 건스타 히어로즈
  • 즛즛 교의 야망
  • 키라키라 스타 나이트 DX

3. 2. 웹 디자인

웹 페이지에서 시차 스크롤링을 사용하여 입체감을 부여하고 사용자 경험을 향상시킬 수 있다. 2007년 Glutnix가 처음으로 자바스크립트와 CSS를 사용한 시차 스크롤링 구현 방법을 제시했다.[18][19] 2008년 Paul Annett는 CSS만으로 시차 효과를 만드는 방법을 설명했다.[20] 그는 SXSW Interactive 2009에서 관객 참여와 고릴라 의상을 입은 남자의 도움을 받아 무대에서 해당 효과를 시연했다.[21][22]

옹호자들은 웹의 유연성을 수용하는 간단한 방법이라고 주장하며, Silverback 웹사이트를 그들이 처음 접한 예로 언급했다.[23] 지지자들은 시차 배경을 사용하여 사용자의 참여를 높이고 웹사이트가 제공하는 전반적인 경험을 개선하는 도구로 사용한다. 그러나 2013년에 발표된 퍼듀 대학교 연구에 따르면 "... 시차 스크롤링이 사용자 경험의 특정 측면을 향상시키기는 하지만, 반드시 전반적인 사용자 경험을 개선하는 것은 아니다"라는 결과가 나왔다.[24] Dede Frederick, James Mohler, Mihaela Vorvoreanu 및 Ronald Glotzbach의 2010년 이후에 진행된 미정의 연구에서는 시차 스크롤링이 "특정 사람들에게 메스꺼움을 유발할 수 있다"고 언급했다.[25]

웹사이트 예시는 다음과 같다.


  • http://www.paranorman.com/

4. 장점 및 단점

4. 1. 장점

4. 2. 단점

5. 각주

참조

[1] 뉴스 Cap. O'Rourke to the rescue https://news.google.[...] New Straits Times Malaysia 1988-09-01
[2] 웹사이트 The Art of Parallax Scrolling http://mos.futurenet[...] 2007-08-00
[3] 웹사이트 Games vs. Hardware. The History of PC video games: The 80's https://books.google[...] Purcaru Ion Bogdan 2014-03-13
[4] 서적 iPhone Game Blueprints https://books.google[...] Packt Publishing Ltd 2013-12-26
[5] 웹사이트 Chronology of the History of Video Games: Golden Age https://www.thocp.ne[...] 2006-07-26
[6] 웹사이트 Gaming's Most Important Evolutions https://www.gamesrad[...] GamesRadar 2010-10-08
[7] 웹사이트 Jungle Hunt Was a Terrible Waste of Quarters http://retrovolve.co[...]
[8] 서적 アーケードTVゲームリスト国内•海外編(1971-2005) https://archive.org/[...] Amusement News Agency 2006-10-13
[9] 웹사이트 Risky Woods http://www.codetappe[...]
[10] 웹사이트 Archived copy https://www.smspower[...] 2018-09-04
[11] 웹사이트 Archived copy http://cgfm2.emuview[...] 2014-03-18
[12] 웹사이트 Using MAME's tilemap system - DevWiki http://mamedev.org/d[...] 2014-01-02
[13] 웹사이트 Archived copy http://cgfm2.emuview[...] 2016-08-08
[14] 웹사이트 Sega Genesis vs Super Nintendo http://www.gamepilgr[...] 2009-08-11
[15] 웹사이트 New Forgotten World Clone – CP System Code https://github.com/m[...]
[16] 웹사이트 System 16 - Irem M92 Hardware (Irem) http://www.system16.[...]
[17] 웹사이트 System 16 - Taito F3 System Hardware (Taito) http://www.system16.[...]
[18] 웹사이트 Parallax Backgrounds - a multi-layered javascript experiment https://inner.geek.n[...] inner.geek.nz 2007-03-20
[19] 웹사이트 Showcasing the css parallax effect - 12+1 creative usages https://kremalicious[...] kremalicious.com 2008-05-23
[20] 웹사이트 How to Recreate Silverback's Parallax Effect http://thinkvitamin.[...] 2008-02-00
[21] 웹사이트 Photo: Paul is amused by gorillas https://www.flickr.c[...] 2009-03-14
[22] 웹사이트 Paul Annett from ClearLeft making people act out the design of silverbackapp.com https://www.flickr.c[...] 2009-03-14
[23] 서적 Handcrafted CSS: More Bulletproof Web Design https://archive.org/[...] New Riders 2010-04-09
[24] 간행물 The Effects Of Parallax Scrolling On User Experience And Preference In Web Design https://docs.lib.pur[...] 2013-04-18
[25] 간행물 The Effects of Parallax Scrolling on User Experience in Web Design
[26] 간행물 ゲームに活きる画像技術


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com