이 글은 2015년 GDC에서 Itay Keren (https://twitter.com/itayke)이 게임 Mushroom 11 (http://mushroom11.com/)을 만들면서 연구했던 내용을 발표하고, 이후 구글 문서 Scroll back (원문 링크)으로 공개한 내용을 번역한 것입니다. 내용이 좋아서 원저자에게 동의를 얻은 뒤 전문 번역해서 올립니다. 글을 시작하기 전에 몇 가지 말씀드릴 것은 아래와 같습니다.

  • 원글은 하나의 문서로 되어 있지만, 번역 글은 두 개로 나누었습니다. Gif 용량이 커서 한 글에 모두 넣으니 편집하기도 어렵고 로딩하기에도 좀 괴롭더라고요. 양쪽 글 모두에 상호 링크를 걸었고 맥락에는 큰 문제가 없도록 했습니다.
  • 용어는 최대한 영어 표현을 따랐습니다. 카메라 테크닉에 대해 원저자가 새로 명명한 용어들이 많은데요. 처음에는 이를 최대한 한국어 표현으로 다듬으려 했지만(예: 엣지 스냅-> 가장자리 끊기 등), 오히려 의미가 모호해질 때가 더 많아서, projected foucs만 예측 포커스로 옮겼고 나머지는 대부분 영어 표현을 따랐습니다.
  • 제 나름 공을 들였지만 아쉬운 부분이 많습니다. 앞뒤 문맥에 일관성을 맞추려고 노력했지만, 여러 번에 나눠 번역하다 보니 마음만큼 제대로 하지 못한 부분도 있습니다. 또한 제 자신이 비주얼 프로그래머가 아니라 게임 디자이너이다 보니, 기술적 이해도가 부족해서 문장이 간결하지 못한 경우들이 있습니다. 해당 부분은 피드백 주시면 최대한 보완해보겠습니다.
  • 원문은 정말 좋은 글입니다. 2D 카메라의 기본을 잘 다루고 있어서, 자신의 게임에 맞춰 새로운 카메라를 고민하려고 한다면 좋은 출발점이 될 글이라고 생각합니다. 제 자신에게도 많이 도움이 됐고, 그래서 영어가 부담스러운 분들께 도움이 되면 좋을 듯해서 한국어로 옮겼지만, 제 번역글은 아무래도 원문에 비해서는 열화된 부분이 있을 것입니다. 아쉬운 부분이 있다면 원문을 좀 더 참고해주시면 좋겠네요.
  • 마지막으로 방대한 내용을 훌륭하게 정리해서 게임 개발자들에게 공유하고, 이를 한국어로 옮기는 것에도 흔쾌히 허락해준 Itay Karen에게 감사드립니다.

아래부터는 원문 번역입니다.


 

개괄

Screen Shot 2016-03-21 at 6.28.13 AM.png

제 게임 Mushroom 11(http://mushroom11.com/)을 개발하는 동안, 저는 디자인/기술적인 면에서 여러 난제에 부딪쳤습니다. 동적으로 모양을 변하게 만드는 것이나 버텍스 애니메이션 등에 대해 참고 자료가 있을 거라고 생각하지는 않았지만, 카메라 웍에 대한 얘기가 별로 없었다는 것에 대해선 꽤 놀랐어요. 게임 역사에서 30년 넘게 다뤄온 주제잖아요.

그래서 저는 2D 게임들을 역사에 따라 쭉 훑어보고, 어떤 난제들이 있었고, 그 난제들에 대해 어떻게 접근했고, 각자의 해법이 어떻게 진화해왔는지 적어보기로 했습니다. 해법들이 수없이 많고 다양한 데에 비해 그에 대한 적절한 용어도 부족했기 때문에, 저는 그것들을 모아서 그룹으로 분류하고, 제가 용어를 만들어 붙였습니다. 그냥 제 개인 참고 자료로 삼으려고 말예요.

스크롤링

스크롤 또는 패닝은 한 화면의 크기보다 더 큰 씬을 보여주려는 모든 방법을 가리킵니다. 스크롤에는 난제들이 많아요. 플레이어가 어디를 보게 선택할 것인지, 우리 디자이너들은 플레이어가 무엇에 집중하길 바라는지, 그리고 이를 어떻게 하면 플레이어 입장에서 끊김없이 부드럽게 이어지면서도 편안하게 만들지 같은 것들 말이죠.

제 글은 2D 카메라 시스템에 집중하겠지만, 일반적인 개념들은 3D에도 잘 적용되는 것이 많습니다.

신경학 배경 지식

다른 게임들을 살펴보기 전에 스크롤 관련 신경학 배경 지식을 살짝 다뤄볼게요. 그럼 우리의 시각과 인지에 대해 좀 더 잘 이해할 수 있을 테고, 그 결과 어떻게 하면 스크롤이 잘못될 지를 알 수 있을 겁니다.

sc04

망막의 중심와(fovea-centralis)는 우리 안구 안쪽에 있는 수용체로서 중심 시각이 뚜렷하고 자세히 보이게 하는 일을 합니다. 제2, 제3의 수용체 대인 부중심와(parafovea)와 중심와주위(perifovea)는 이미지와 동작을 패턴으로 축소시켜, 변화를 빨리 인지할 수 있게 하는 것에 뛰어납니다. 익숙한 경고 모양을 인지하거나 동작의 속도나 방향이 변하는 일 같은 것 말이죠.

이런 시각 입력 신호는 뇌의 편도체로 바로 연결되는 통로를 이용해서, 시각 피질이 입력 신호를 해독하는 동안에도 경고 반응을 할 수 있도록 해요. 뇌를 훈련시키면, 특히 주변 시각에서 움직이는 것을 마음대로 고정할 수 있게 훈련하면 꽤 쓸만하답니다.

sc05

내이 속의 전정계는 평형 유지와 공간 방향 제시를 담당합니다. 특정한 세부적인 것에 시각을 집중하면서도 몸이 평형을 유지할 수 있는 건 전정계에서 신호를 보내기 때문이에요.

저도 그렇지만, 차 안에서 책을 읽으면 메스껍거나 현기증이 나는 사람들이 있어요. 몸은 가속되는데 그에 맞는 시각적 피드백이 부족하기 때문이에요.

그 반대도 마찬가지에요. 중심와주위가 배경의 변화를 빨리 알아차리면, 전정계에서 그에 맞는 피드백이 올 거라고 기대하죠. 그런데 컴퓨터 앞에 똑바로 앉아있어서 그 피드백이 안 오면 결과가 똑같을 수 있어요.

그러니 이 감각 신호, 즉 시각계와 전정계가 충돌할 때, 몸이 불편하거나 멀미가 날 수 있어요. 3D, 특히 VR에서 이런 현상이 더 심하긴 하지만, 2D 게임에서도 이런 일이 꽤 많아요.

주의 집중, 인터랙션, 편안함

스크롤에서 생기는 문제를 이해하기 위해, 그 구성요소들을 다음의 3대 도전 거리로 분류해봤습니다.

sc06

  • 주의 집중: 카메라를 이용해서 게임 정보와 피드백을 충분히 제공하는 것 (플레이어가 봐야할 것)
  • 인터랙션: 화면에 표시되는 것에 대해 플레이어가 명확하게 컨트롤 할 수 있게 할 것. 배경 변화를 예측가능하게 하고 컨트롤에 밀접하게 연관시킬 것. (플레이어가 보고 싶어하는 것)
  • 편안함: 배경 변화를 쉽게 만들고 맥락에 맞출 것 (플레이어가 봐야할 것과 보고 싶어하는 것이 어떻게 부드럽고 편안하게 조화를 이루는가)

스크롤의 노스탤지어

nostalgiastrip

자, 그럼 1980년대로 떠나볼까요? 30년 뒤인 현재로서는 상상하기도 어려운 기술적 제한들을 디자이너들이 완전히 새로운 디자인 구조를 발명해서 극복하던 시절이죠.

지난 10년 간 있었던 여러 뛰어난 인디 게임들도 참고 자료로 넣었습니다. 인디 아티스트들에게서 기대할 법한 혁신, 집중, 세심함들을 항상 선보이려던 게임들인데요. 카메라 웍도 물론 예외가 아니죠.

액션 좇아가기

컨트롤하는 대상에 집중하라.

기초부터 시작해보죠. 대체로 여러분의 플레이어는 메인 캐릭터에 대해 조작권을 갖고 있습니다. 즉, 플레이어의 주의 집중이 캐릭터에서 이뤄져야 한다는 뜻입니다. 그 캐릭터를 카메라로 바싹 좇아가는 식으로 말이죠.

80년대 초반, 스크롤은 어려운 일이었습니다. 개발자들은 CPU나 메모리 용량, 메모리 분할 등의 기술적 한계를 마주해야만 했습니다. 이런 난제들이 있음에도 이 한계들을 우아하게 극복하는 훌륭한 횡스크롤 게임들이 출시되었습니다. 하지만 대부분은 동작을 겨우 알아볼 수 있을 정도로 단순하거나 저해상도였죠.

rallyx_240

Rally-X © 1980 Namco

  • 포지션 락: 카메라는 플레이어 위치에 고정됨
  • 노트: 이 글에서 다루는 용어는 제 자신이 참고하고 작업하려고 만든 거에요. 하지만, 유용하다고 생각하거나, 개선안을 주거나, 제게 피드백을 주시면 기쁘겠네요.

1980년이라는 옛날에, ‘랠리엑스(Rally-X)’같은 게임이 기술적 한계를 극복하고 제대로 된 이중축 카메라를 선보인 건 정말 대단한 일입니다. 이 게임은 기본적인 포지션 락(position lock) 메커니즘을 이용, 포커스를 항상 자동차에 맞춰 카메라 동작을 완전히 예측가능하게 만들었죠.

kungfu_long_240

Kung-Fu Master © 1984 Irem

  • 포지션 락
  • 엣지 스냅: 카메라 위치의 가장자리(엣지)를 특정 값으로 고정함
  • 엣지 스냅은 게임마다 다 언급하기엔 너무 흔한 거라 지금부터는 무시할게요.

‘쿵푸마스터(Kung-Fu Master)’는 포지션 락을 훌륭하게 다룬 또다른 예입니다. 타카시 니시야마가 디자인했는데, 이 분은 ‘문패트롤(Moon Patrol)’도 디자인했고, 후에 ‘스트리트파이터(Street Fighter)’도 만드셨죠.

이 게임은 제가 엣지 스냅(edge snap)이라고 부르는 또 다른 기본적인 메커니즘도 사용하고 있어요. 각 레벨의 가장자리에서 카메라 움직임을 끊어버려서, 캐릭터가 앵커 포인트에서 멀어질 수 있게 하는 거죠.

terraria_240

Terraria © 2011 Re-Logic

  • 포지션 락

포지션 락 방식은 기본적이지만 아주 유용합니다. Terraria처럼 화면에 비해 캐릭터가 작고 점프도 낮은 제작 어드벤처 게임에서는, 모든 방향에 대해 충분한 공간을 보여주기 때문에 아주 잘 통합니다.

카메라 모션 제한걸기

불필요하거나 예측불가능하게 부딪치는 걸 피하라.

꼭 필요한 게 아니라면 카메라를 움직이지 않을 방법은 없을까요? 30년 전에는 화면을 스크롤하는 것에 여러 문제가 있었습니다. CPU를 많이 써야 했고 화면의 주요한 부분을 리프레쉬시켜야 했습니다. 성공 사례에서조차 당시에는 픽셀이 커다랬기 때문에 스크롤이 뚝뚝 끊기는 것처럼 보였습니다. 그렇다면 가장 훌륭한 접근 방식은 필요한만큼만 최소한으로 스크롤하는 것이었습니다. 그중 하나는 캐릭터가 특정 윈도우 안에서만 움직이도록 하되 캐릭터가 그 윈도우의 가장자리를 밀 때만 스크롤하는 것이었습니다.

jumpbug_240

Jump Bug © 1981 Hoei/Coreland (Alpha Denshi)

  • 카메라 윈도우: 플레이어가 윈도우 가장자리에 닿으면 그 방향으로 카메라 위치를 밀어냄

‘점프 버그(Jump Bug)’는 최초의 플랫포머 게임이라 널리 알려져 있는데요. 기술적으로 보면, 플레이어는 자동으로 반복해서 점프할 뿐이고, 컨트롤은 왼쪽과 오른쪽 중 어디로 갈 것인지, 얼마나 높이 점프할 것인지에 한정되어 있었습니다. 게임의 대부분은 카메라가 자동으로 움직여서 플레이어가 계속 올라가게 강제하는 것이었습니다. 당시의 다른 많은 스크롤 게임처럼 장애물을 피하면서 말이죠.

하지만 마지막 레벨에서 사용된 카메라 윈도우(camera window) 테크닉은, 많은 디자이너들이 그런 게 있는 지도 몰랐던 문제를 풀어냈고, 이후 수천 개의 플랫포머가 그 뒤를 따르는 표준을 만들었습니다. 카메라 윈도우 테크닉은 또한 여러 문제도 만들어냈는데요. 플레이어가 출구를 향해 점프할 때 플레이어의 전방이나 위에서 뭐가 다가오는지는 아주 조금만 보여줄 수 있다는 것도 그 중 하나죠.

rastan_long_240

Rastan Saga © 1987 Taito

  • 카메라 윈도우

제가 정말 좋아하는 게임 중 하나인 ‘라스탄 사가(Rastan Saga)’에서는, 플레이어가 두 방향으로 움직일 수 있고 그에 따라 여러 다양한 경로를 선택할 수 있는 방식을 도입했습니다. 카메라와 게임 메카닉의 관계를 정말로 진화시킨 최초의 게임들 중 하나이기도 하죠. 이 게임에서 카메라 윈도우의 높이는 통상 점프 높이와 같습니다. 따라서 캐릭터가 윈도우 안에서 이미 움직이지 않았다면, 점프를 하는 것만으로는 수직 카메라 이동이 일어나지 않았습니다. 재빠른 카메라를 원하는 얼간이들의 수요를 없애버렸죠.

이 방식의 주요 결점은, 위에서 다가오는 적은 덜 눈에 띈다는 겁니다. 특히 캐릭터가 윈도우 안에서 이미 수직으로 움직였을 땐 말이죠. 또한 왼쪽으로 움직일 때(성에서는 그럴 일이 많았어요.)는 전방 시야가 아주 좁았기 때문에 정말로 불편했어요.

fez_2_240_longB

Fez © 2012 Polytron Corporation

  • 카메라 윈도우* (수평) – 차원 이동 동안에도 강제됨
  • 포지션 락 (수직)
선형 보간 스무딩
  • 리전 기반 앵커
  • 수동 조작 – 오른쪽 스틱으로 좀 더 멀리 패닝할 수 있음
  • 노트: 회색으로 흐리게 표시한 건 이 글의 더 뒤에 다룰 카메라 테크닉임

카메라 윈도우 테크닉은 현대 게임에도 여전히 쓰이고 있습니다. ‘페즈(Fez)’에서 차원 이동을 하는 중에도 수평적인 카메라 윈도우가 어떻게 유지되는지 보세요. 사실 이동 축은 캐릭터를 윈도우 안에 두는 쪽으로 결정됩니다. 페즈에서 카메라 윈도우를 선택한 것은 통상적인 선택은 아녜요. 이런 독특한 게임 메커닉을 위해 아주 이상적인 카메라 해법을 택한 것이죠. 관련해선 나중에 더 보죠. 수직적으로는 단순한 포지션 락을 쓰는데, 선형 보간 스무딩(lerp smoothing)으로 좀 더 부드럽게 다듬었죠. 이건 뒤에 더 얘기할게요.

스냅

윈도우 안에서 카메라가 휙 나가버리지 않게 고치자

카메라 윈도우로 카메라 움직임을 제한하는 것을 보여드렸는데요. 하지만 점프 버그나 라스탄 사가에서 봤던 것처럼, 플레이어가 윈도우 안에서 휙 나가버리면 단점들이 있었습니다. 여기 그에 대한 몇 가지 해결책이 있어요.

shinobi_cam

Shinobi © 1987 Sega

  • 포지션 스냅 (수직) – 플레이어 뒤쪽에 카메라 포커스를 맞춰 윈도우 밖으로 나가는 일을 계속해서 줄임
  • 카메라 윈도우 (수직)
  • 포지션 락 (수평)
  • 스태틱 포워드 포커스

아마도 제가 제일 좋아하는 고전 게임일 ‘시노비(Shinobi)’에는 플랫폼 여러 개 사이를 아주 높이 뛰는 점프가 있어요. 디자이너들은 독특한 카메라 시스템을 갖고 나타났죠. 수직적으로는 캐릭터가 많은 플랫폼들을 오가기 때문에, 시노비는 수직 카메라 윈도우를 아주 넓게 씁니다. 항상 그런 것처럼 윈도우는 카메라를 즉시 당기죠. 넓은 (또는 키가 큰) 윈도우에 생기는 문제는, 캐릭터가 탑뷰가 아주 작은 윈도우의 꼭대기에 낄 수 있다는 거에요. 라스탄 사가에서 봤던 것처럼 말이죠. 시노비는 닌자 쪽으로 천천히 카메라를 계속 정렬시켜서, 액션에 포커스를 맞추는 한편 대부분의 경우 카메라가 빠르게 움직이는 걸 최소화합니다.

marioworld_platformsnap_240.gif

Super Mario World © 1990 Nintendo

  • 리전 기반 앵커
  • 플랫폼 스냅: 플레이어가 플랫폼에 착지할 때만 카메라가 플레이어에 스냅함
  • 카메라 윈도우 (수직): 가능한 곳에서만
  • 듀얼 포워드 포커스: 트레쉬 홀드가 트리거함
  • 수동 조작 (수평): 컨트롤러로 추가 패닝할 수 있음

‘수퍼 마리오 월드(Super Mario World)’가 선보인 많은 기능 중 하나는 플랫폼 스냅(platform snap)입니다. 여느 카메라 윈도우와 마찬가지로, 카메라는 캐릭터가 윈도우의 가장자리를 건드릴 때까지 정지해있습니다. 하지만 마리오가 어쩔 수 없이 플랫폼에 착지할 때면, 착지와 동시에 카메라가 해당 위치로 즉시 스냅합니다.

(미야모토의 작품을 언급한 건 이게 처음인데요. 당연히 한참 더 있습니다. 게임 메커닉을 영리하게 만드는 것 뿐만 아니라, 아주 작은 디테일도 신경 쓰며 주의를 기울이는 것이 정말로 위대한 디자이너를 만드는 길이죠.)

rayman_5_240

Rayman © 1995 Ubisoft

  • 플랫폼 스냅
: 가능한 곳에서
  • 카메라 윈도우 (수직)
: 가능한 곳에서
  • 리전 기반 앵커
  • 듀얼 포워드 포커스
: 가능한 곳에서
  • 선형 보간 스무딩
: 가능한 곳에서

같은 아이디어를 오리지널 ‘레이맨(Rayman)’에서도 볼 수 있어요. 화면의 꼭대기는 카메라 윈도우의 꼭대기로 기능합니다. 레이맨이 점프할 때는 카메라가 움직이지 않다가, 착지하면 부드럽게 스냅하는 걸 주의해서 보세요. 카메라 윈도우의 높이가 레이맨의 점프 높이보다 살짝 높기 때문에 아주 영리한 해법이에요. 다시 한 번 카메라 시스템이 게임 디자인의 통합적인 부분이라는 것을 보여줍니다.

awesomenauts_240

Awesomenauts © 2012 Ronimo Games

  • 카메라 윈도우 (수직)
  • 플랫폼 스냅
  • 포지션 락 (수평)
  • 스무딩

이 테크닉은 오늘날에도 아주 효과적이에요. 점프하는 동안에는 카메라가 부드럽게 움직이고, 점프가 끝나거나 카메라 윈도우를 밀어낼 때만 카메라를 가운데에 맞추죠. 당연한 얘기지만 플랫폼 스냅은 플레이어가 플랫폼에 착지할 때만 효과적이라는 걸 유념하세요. 다른 경우, 예를 들어 ‘어썸너츠(Awesomenauts)’의 제트팩 캐릭터는, 플레이어는 수직의 카메라 윈도우하고만 일치해요.

갑작스런 카메라의 속도나 방향 변화를 피하기

주변 시각의 역할과 시각적인 편안함에 끼치는 영향에 대해 얘기했었는데요. 예전에는 픽셀 단위가 커서 튀어보이곤 했어요.

pixel
80년대의 픽셀 (NES: 256×240 해상도)
pix_grid2
요새 인디 게임 픽셀 (한 픽셀 안에 여러 개의 스크린 픽셀이 담겨 있음)

픽셀 단위가 큰데 그리드가 엄격하고 원시적인 상태라면, 어떻게 해야 카메라를 부드럽게 움직일 수 있을까요? 요즘엔 픽셀 아트를 작은 단위로 아름답게 디자인할 수 있고, 그 아트를 훨씬 더 정교한 단위의 실제 픽셀들 사이로 움직일 수 있습니다. 그리고 픽셀 단위까지 완벽하게 맞추고 싶지 않다면, 대부분의 현대 엔진이 제공하는 서브 픽셀 공간을 사용할 수도 있습니다.

(유사) 물리 스무딩

유사 물리를 이용하면 포지션 락 카메라를 부드럽게 움직이는 데에 도움이 됩니다. (어떤 엔진의 물리라도 사실은 유사 물리라고 따지실 수도 있겠지만요.)

pacland_cam.gif

Pac-Land © 1984 Namco

  • 포지션 락
  • 스태틱 포워드 포커스

논란의 여지가 있지만 ‘팩랜드(Pac-Land)’는 최초의 현대적인 플랫포머입니다. 이 게임에는 플랫포머 장르를 정의하는 데에 도움이 된 요소들이 많아요. 플랫폼에서 점프하고 적을 피하고 보너스를 먹는 것 같은 것 말이죠. 스무딩 관점에서 보면, 이 게임에서는 게임의 스피드가 프레임당 0, 1, 2, 3 픽셀 단위로 움직여서 최고 속도로 달리다가 다시 0으로 꺾입니다. 카메라가 플레이어에 포지션 락된 상황에서 그 결과는 뚜렷하고 부드럽습니다. 하지만 팩랜드는 수직으로는 스크롤할 필요가 없었어요. 점프하고 착지할 때에는 빠르게 가속하거나 감속해야 하기 때문에, 수직 스크롤이 스무딩하기 정말 어려운 부분이죠.

미야모토 시게루

이 시점에서 저는 미야모토 시게루에게 잽싸게 존경을 표하고, 그의 초기 작품들을 보려고 합니다. 그가 게임 산업에 기여한 수많은 것들과 게임 디자인의 정말 작은 부분까지 주의를 기울인 점들은 과소평가해서는 안 됩니다.

Video-Game-Cars-017

Excitebike © 1984 Nintendo

Devil World-3

Devil World © 1984 Nintendo
(북미에서는 출시 거부됨)

1984년에 그는 스크롤을 완전히 서로 다른 방식으로 사용한 두 개의 게임을 디자인하면서 스크롤에 대한 실험을 시작했어요. 두 게임 모두 플레이어에게 스크롤 조작권을 아주 적게 줬습니다. 사실은 배경이 이동하는 방에 더 가까웠기 때문에 스크롤이라고 부르기도 뭐했지만요.

‘익사이트바이크(Excitebike)’의 스크롤 액션은 현대적이었어요. 스크롤 속도가 바이크의 속도에 영향을 받았죠. 화면은 꽤 부드럽게 스크롤됐지만, 이는 게임에 실제 영향을 주지는 않았어요.

하지만 ‘데빌월드(Devil World)’의 게임 플레이는 모든 것이 스크롤과 관련이 있었습니다. 이 팩맨 클론 게임에서 플레이어는 악마와 싸우는 기독교 용을 조작하는데, 스크롤 방향만 바꿀 수 있어서 화면 엣지에 더 가깝게 가게 만들죠. 이 게임은 미야모토의 게임 중 유일하게 북미에 출시 거부된 것이기도 했는데, 종교적인 상징을 썼기 때문이에요. 하지만 그가 수십 년동안 만든 다른 작품들의 퀄리티와 비교하면 아주 아쉽지는 않아요. 하지만 오늘날 천재들의 초기 작품, 그래서 덜 성공한 작품들을 보는 건 중요한 일이고, 거기에서 영감을 받는 일도 있습니다. 최고로 위대한 아티스트들조차 가끔은 실패한다는 거죠.

mario_cam

Super Mario Bros. © 1985 Nintendo

  • 스피드업 푸쉬 존: 푸쉬 존 안에 있을 때는 카메라를 조금씩 가속시켜 플레이어 속도에 맞춤
  • 카메라 윈도우: 일방향
  • 스태틱 포워드 포커스

한 해 뒤의 ‘수퍼 마리오 브라더스(Super Mario Bros.)’는 그 뛰어남을 칭송할 수 밖에 없는데요. 게임 플레이 자체는 꽤 단순하게 왼쪽에서 오른쪽으로 수평으로만 진행하는 방식입니다. 화면 가장자리에서 뒤로 돌아가는 것도 허용하지 않죠. 플랫포머의 일반적인 특성이라 할 수 있죠. (기술적으로는 일방향성 카메라 윈도우라고 정의할 수도 있어요.)

그래서 마리오가 화면 끝을 뒤로 밀고 있다가 앞쪽으로 속도를 확 올려서 카메라 윈도우 엣지를 넘어버리면, 한 프레임만에 속도가 0에서 풀스피드로 움직이게 됩니다. 이러면 배경 속도가 확 바뀌게 되고, 그 결과 시각적으로 불편해지죠. 디자이너들은 이 문제를 윈도우의 중심에서 약 25% 떨어진 곳에 가상의 점을 추가하는 것으로 해결했어요. 이 점에서 카메라는 마리오를 따라잡으려고 속도를 내고, 그래서 마리오가 화면 가장자리를 건드릴 때쯤엔 카메라 속도가 이미 따라잡을 수 있게 말이죠.

metroid_horiz_240h
Metroid_vert_240h.gif

Metroid © 1986 Nintendo

  • 카메라 윈도우 (수평/수직)
스피드업 풀 존: 플레이어가 윈도우 엣지를 넘어가면 플레이어 속도에 맞추기 위해 카메라를 잡아당김

‘메트로이드(Metroid)’는 충격적인 게임이었고 플랫포머와 탐험을 한데 합친 장르를 만들어 냈어요. (잠깐 다른 얘기하자면, 같은 장르의 ‘캐슬바니아(Castlevania)’는 아주 기본적인 포지션 락 카메라를 사용했어요.)

메트로이드는 여러 개의 축을 한 번에 하나씩 나아가는 방식을 사용했어요. 캐릭터가 윈도우 스팬 밖으로 나갈 수 있게 하고 그동안 카메라가 캐릭터를 따라갈 수 있게 가속시켜서, 카메라를 모션 쪽으로 ease into하는 다른 방식을 소개했습니다. 플레이어가 얼마나 선을 멀리 넘었는지는 플레이어가 얼마나 빠른 속도로 선에 부딪쳤는가에 따라 결정됐는데요. 그 결과 카메라는 부드럽게 움직일 수 있었습니다.

donkeykong_2_240c

Donkey Kong Country © 1994 Nintendo (Rare Ltd)

  • 선형 보간 스무딩: 선형 보간을 이용해서 활발히 움직이는 플레이어와 카메라 사이의 거리를 꾸준히 줄임
  • 포지션 락 (수직)
  • 리전 기반 앵커
  • 
듀얼 포워드 포커스

기술 발달로 픽셀이 많아지고 CPU가 탄탄해지면서 카메라 시스템에도 직접적인 영향이 있었습니다. 카메라가 움직일 때면, 특히 속도가 느릴 때면 카메라가 몇 프레임마다 저해상도로 덜덜 떨리곤 했는데, 이제는 그렇지 않고 자유롭게 움직일 수 있게 됐습니다.

‘동키 콩 컨트리(Donkey Kong Country)’에는 혁신적인 카메라 솔루션이 많았는데, 선형 보간 스무딩을 최초로 사용한 게임 중 하나이기도 합니다. 덕분에 점프가 상당히 부드러웠고 포워드 포커스 스위치(이후 더 다룸)를 사용할 수 있게 됐죠.

선형 보간 스무딩은 주요한 성취처럼 들리지 않지만, (특히 점프 중에) 카메라 속도가 덜덜 거리는 걸 줄이는 데에 표준 도구가 되었습니다.

float lerp (float a, float b, float t) { return a + t * (b – a); }

supermeatboy_240.gif

Super Meat Boy © 2010 Team Meat

  • 선형 보간
  • 
포지션 락

선형 보간은 아마도 가장 효과적이고 널리 쓰이는 스무딩 테크닉일 겁니다. ‘수퍼미트보이(Super Meat Boy)’처럼 느리게도 빠르게도 움직이는 캐릭터에 잘 동작합니다. 하지만 정말 빠르게 움직이는 큰 캐릭터들에 쓰면, 카메라가 따라잡기 전에 화면 가장자리에 쉽게 부딪치게 되고, 다가오는 적들이 최후의 순간까지 안 보이게 만듭니다.

neveralone_240_2

Never Alone © 2014 Upper One Games

  • 물리 스무딩: 카메라가 물리가 적용된 엔티티라서 포커스 타겟에 끊임없이 다가감
  • 
포지션 애버리지
  • 시네마틱 패스
  • 
리전 기반 앵커
  • 
큐 포커스

Never Alone은 2014년에 나온 아름다운 게임으로 얘기할 것이 많은데 뒤에 좀 더 다룰 거에요. 이 게임의 주된 스무딩 테크닉은 존재하는 카메라의 속도를 고려하는 건데요. 카메라가 액션 쪽으로 살짝 좀 더 천천히 이동했다가, 목표점으로 오버런하는 방식이죠. 그 결과 부드럽고 유기적인 움직임을 보이지만 스무드하고 유기적이지만, 플레이어가 빠르게 움직일 때는 확실히 반응이 좀 늦죠.

코드 용어로 선형 보간이 EaseOut이라면, 물리 스무딩은 EaseInOut이에요. 가능한 곳에서 더 디테일을 챙기고 싶다면 SmoothDamp 방법을 확인해 보세요. 아니면 현재 속도 뿐만 아니라 목표까지의 거리도 고려해서 직접 구현해도 돼요.

단순히 픽셀 퍼펙트한 셰이더를 쓴다면, 가끔 스프라이트가 다른 스프라이트나 배경에 대해 한 픽셀 어긋난 것처럼 보일 때가 있을 텐데, 이건 나눗셈이 제대로 일치하지 않아 생기는 일이에요.

HLD_180.gif

Hyper Light Drifter © [Release TBA] Heart Machine

  • 물리 스무딩: 게임 캔버스의 해상도는 480×270이지만, 카메라 스크롤은 전체 해상도를 사용함
  • 
리전 기반 앵커
  • 
타겟 포커스
  • 큐 포커스
  • 제스처 포커스

Hyper Light Drifter는 저해상도의 픽셀 아트를 쓰면서도 부드럽게 스크롤할 수 있게 하려고 똑똑한 해결책을 썼어요.  먼저 게임과 픽셀 퍼펙트한 캔버스 위에 프리렌더한 다음, 픽셀 퍼펙트한 화면에 캔버스를 옮겨서, 게임 픽셀 크기로 나누고 남은 위치를 반영해요. 이 게임에는 다른 흥미로운 카메라 특징들도 많은데, 그건 이따 얘기할게요.

구도 Frame

중요한 디테일을 프레임 안에 유지해라

scramble_240.gif

Scramble © 1981 Konami

  • 자동 스크롤: 플레이어는 화면 스크롤을 따로 조절할 수 없음 (하지만 전체 프레임에서 어디에 위치할 지에 대해서는 완전한 결정권을 가짐)
  • 자동 스크롤은 이 발표 범위를 벗어나요. 정의에 따르면 그건 플레이어에게 스크롤 동작에 대해 콘트롤을 주지 않으니까요. 하지만 플레이어가 이상적으로 어디에 있고 싶어하는지에 대해 좋은 참고가 됩니다. 앞에서 다가오는 위협들 사이에서 균형을 잘 잡으면서 뒤에서 오는 위협에 대비해 약간 공간을 남기고 싶은 마음 말이죠.

pacland_cam.gif

Pac-Land © 1984 Namco

  • 포지션 락
  • 스태틱 포워드 포커스: 주된 진행 방향으로 앞 쪽 공간을 더 넓게 보여줌

팩 랜드에서 봤던 것처럼, 카메라를 플레이어에 묶고 방향을 조작하게 만들면, 플레이어 앞 쪽에 카메라 포커스를 맞출 수 있어요. 이렇게 하면 앞을 내다볼 공간이 충분하면서도 뒤에 뭐가 남았는지는 볼 수 있죠. 그리고 어디로 가야하는지 가이드라인을 주기도 해요. 왜냐면 우리 인류는 가운데를 노리며 번영해왔거든요.

defender_240.gif

Defender © 1981 Williams Electronics

  • 듀얼 포워드 포커스: 플레이어가 방향을 전환하면 카메라 포커스를 바꿔 플레이어의 앞쪽을 더 멀리 내다보게 해줌

좀 더 예전인 1981년 초로 거슬러 올라가면, 시대를 앞지른 ‘디펜더(Defender)’가 출시한 때입니다. 그냥 모두 쏴버리는 게임인데 새로운 장르 전체에 영감을 줬죠. 양방향으로 포워드 포커스 하는 방식은, 거의 아무도 생각 못하고 있었어요. 디펜더는 언제나 우주선의 앞에, 정확히는 화면 너비의 약 25% 앞쪽의 가상의 점에 화면을 포커스하려고 노력했습니다. 이 시스템은 게임 페이스가 빨라 대부분의 적들이 앞에서 출현하는 게임에 잘 동작했어요.

bonanza2_240.gif

Bonanza Bros. © 1990 Sega

  • 듀얼 포워드 포커스: 포커스 스위치가 걷는 속도에 기반함

‘보난자 브라더스(Bonanza Bros.)’는 1990년 세가가 아케이드용으로 출시한 게임으로서 유쾌한 횡스크롤 강도 게임입니다. 이 게임은 두 형제가 서로 협력해서 강도질을 완성하는 독특한 1:1 협동 모드를 위해 화면을 나눈 것이 특징이에요.

강도 시나리오에서는 플레이어의 앞 공간을 제대로 보는 것이 꼭 필요했기 때문에 듀얼 포워드 뷰를 썼고요. 하지만 카메라가 새로운 타겟 지점을 따라 잡는 것을 몇 단계로 나눠 처리했기 때문에, 전체적인 카메라 동작이 공간을 충분히 보여주면서도 더 부드럽게 느껴질 수 있었습니다. 스위치 속도는 플레이어 이동 속도의 약 2배였고, 그래서 카메라는 플레이어가 움직일 때만 움직이기도 했습니다. 위 그림에서 빨간 옷 캐릭터의 움직임을 확인해 보세요.
marioworld_3_240b.gif

Super Mario World © 1990 Nintendo

  • 리전 기반 앵커
  • 플랫폼 스냅 – 플레이어가 플랫폼에 착지할 때만 카메라가 플레이어에 스냅함
: 가능한 곳에서만
  • 카메라 윈도우 (수직): 가능한 곳에서만
  • 카메라 윈도우 (수직): 가능한 곳에서만
  • 듀얼 포워드 포커스: 트레쉬 홀드가 트리거함
  • 수동 조작(수평)
: 컨트롤러로 추가 패닝할 수 있음

‘수퍼 마리오 월드(Super Mario World)’의 카메라 트릭은 제가 가장 좋아하는 2D 카메라 테크닉이에요. 특정 게임 플레이의 디테일에 어마어마하게 집중했죠.

다시 한 번  앵커가 두 개라서 플레이어가 어느 방향으로 가든지 앞 쪽 공간을 넓게 볼 수 있어요. 하지만 플레이어가 다시 뒤돌아봐도(수퍼 마리오 월드에선 계속 일어나는 일이죠), 카메라는 마리오가 미리 정해놓은 트레쉬 홀드에 닿기 전까지는 목표점을 유지합니다. 트레쉬 홀드에 닿으면 그때야 다른 앵커에 고정되죠. 수퍼 마리오 월드에서 좌우 전환을 자주 한다고 해도 그게 반드시 방향 전환으로 이어지는 건 아니라서 아주 유용합니다.

cave_240

Cave Story © 2004 Studio Pixel

  • 포지션 락 (수직)
  • 
듀얼 포워드 포커스
  • 물리 스무딩
  • 수동 조작 (수평): 컨트롤러로 추가 패닝할 수 있음

더 최근 작품인 ‘케이브 스토리(Cave Story)’는 듀얼 포워드 포커스 방식을 이용해서 보행 속도에 따라 중심점을 한쪽에서 다른 쪽으로 천천히 옮깁니다. ‘보난자 브라더스’에서 봤던 것과 살짝 비슷하지만, 이 경우는 카메라가 항상 새로운 앵커 포인트를 향해 움직이면서도 플레이어가 이동하면 그에 맞춰 가속합니다.

jazzjackrabbit_240_2

Jazz Jackrabbit 2 © 1998 Epic Games

  • 선형 보간 (수직)
타겟 포커스: 컨트롤러 입력에 따라 카메라가 움직여 진짜로 시각적으로 포워드 포커스 할 수 있게 함: 스틱/커서키를 밀면 해당 방향으로 포커스를 밀 수 있음
  • [ 수동 조작 ]
수직 방향으로 수동으로 올려다 보는 건 타겟 포커스의 연장선 상에 있음

‘재즈 잭래빗 2(Jazz Jackrabbit 2)’는 에픽 게임즈의 초기작으로 아름다운 플랫포머에요. 이 게임엔 정말 독특한 카메라 요소가 하나 있는데요. 컨트롤러 입력에 따라 카메라를 플레이어에서 수직/수평으로 멀어지게 하는 거죠.

제가 타겟 포커스라고 부르는 것의 완벽한 예인데요. 실제 목적지나 타겟에 기반해서 플레이어가 카메라를 어디로 움직여야 할 지 단서를 주는 방식이죠. 왼쪽으로 걸어간다면, 왼쪽이 더 보고 싶단 거죠. 컨트롤러를 놓으면, 중심은 플레이어에게 다시 돌아와 맞춰져요.

snapshot_240_3.gif

Snapshot © 2012 Retro Affect

  • 타겟 포커스: 플레이어와 포인터의 평균값
  • 
선형 보간

타겟 포커스는 좀 더 말 그대로 시각적인 타겟을 반영하기도 해요. 마우스 포인터로 조작하는 게임들에서 그 예를 볼 수 있는데요. ‘스냅 샷(Snapshot)’에서는 마우스로 게임 씬에 있는 요소들의 스냅샷을 캡처한 다음 다른 곳에 방출해서 퍼즐을 풉니다. 마우스 포인터는 본질적으로 플레이어의 시선이 연장된 것처럼 쓰이게 되고요. 카메라의 포커스는 플레이어와 포인터의 평균값에 놓입니다.

swapper_240.gif

The Swapper © 2013 Facepalm Games

  • 타겟 포커스
  • 물리 스무딩
  • 리전 기반 앵커
  • 
큐 포커스
  • 
시네마틱 패스

‘스와퍼 (The Swapper)’에는 아주 고급 카메라 테크닉들도 있는데 그건 나중에 볼게요. 타겟 포커스 얘기만 하자면, 게임 중 캐릭터가 손에 든 클로닝 도구의 타겟 지점이 플레이어의 시선을 나타내기 때문에 완벽하게 시각적인 포커스가 됩니다. 따로 타겟을 지정할 수 있는 무기나 도구가 있는 게임이라면 이 방식이 잘 통합니다. 플레이어들은 원한다면 심지어 뒤로 걸으면서도 앞을 바라볼 수도 있습니다. 이렇게 하면 카메라는 좀 더 자유자재로 움직일 수 있지만, 카메라를 위한 또다른 조작 방법이 필요해지죠.
secretsofraetikon_2_240b.gif

Secrets of Rætikon © 2014 Broken Rules

  • 예측 포커스: 카메라는 플레이어의 예측된(외삽된) 위치를 따라다님
  • 물리 스무딩
큐 포커스: 포지션과 줌은 어트랙터에 기반함
  • 제스처 포커스: 특정 액션을 하면 미리 정해진 카메라 동작이 일어남. (예: 날아다닐 때는 줌 아웃)
  • 
시네마틱 패스

‘시크릿 오브 래티콘(Secrets of Rætikon)’에는 흥미로운 카메라 특징들이 많은데요. 기초적인 프레이밍에 대해서라면, 예측 포커스, 즉 캐릭터의 현재 속도에 따라 이후 캐릭터의 위치를 단순히 외삽한 곳에 포커스를 맞춥니다. 이 테크닉은 플랫포머에서는 특히 수직적인 움직임에는 잘 맞지 않으니 주의하세요. 점프, 특히 착지는 외삽이 잘 되지 않거든요.

luft_4_240
Luftrausers © 2014 Vlambeer

  • 타겟 포커스 / 예측 포커스
  • 물리 스무딩
  • 큐 포커스

‘루프트라우저 (Luftrausers)’에는 정말 뛰어난 카메라 테크닉이 쓰였는데요. 비행기가 가리키는 지점(타겟 포커스)과 실제로 가려는 지점(예측 포커스)을 흥미롭게 섞어놓고 있어요. 게다가 물, 전함, 날아다니는 총알 등의 다른 큐들이 부근에 있으면 카메라의 포커스를 끌어가곤 합니다. (아래의 큐 포커스 항목을 참고하세요.)

다음 글에서는 디렉션, 멀티 포커스 카메라, 카메라 셰이크, 커스텀 카메라를 다룹니다.

 

Advertisements