1.jpg

 

2014년 2월부터 아크 시스템 웍스는 길티 기어 Xrd -SIGN을 아케이드에서 운영 중입니다. 여기에선 이 게임에 들어간 그래픽 기술에 대해 살펴 보도록 하겠습니다.

 

 

풀 3D 그래픽으로 만든 길티 기어

 

2.jpg

 

격투 게임의 기원에는 여러가지 설이 있지만, 레버의 방향 입력과 버튼 누르기의 조합으로 명령 시스템을 도입하며 사이드 뷰의 비주얼로 서로 마주본 캐릭터가 싸우는 방식의 실시간 격투 게임 스타일은 캡콤의 스트리트 파이터 시리즈가 사실상의 원조라 할 수 있겠습니다. 

 

이 사이드 뷰 비주얼 방식의 격투 게임은 1990년대 초에 3D 그래픽을 도입해 3D 격투 게임이라 불리게 됩니다. 뭐 3D 대전 액션이라고도 하지만 뭐라 말해도 다들 이해에는 지장이 없으시겠죠. 그리고 3D 격투 게임의 원조라 부를 수 있는 존재는 세가의 버추어 파이터가 되겠습니다.

 

그러나 모든 격투 게임이 3D 그래픽을 도입하진 않습니다. 그래서 그 전까지 이어지던 배경 이미지와 도트 이미지 기반의 게임은 2D 격투 게임이란 이름을 받아 따로 발전해 나가게 됩니다.

 

3D 격투 게임은 GPU의 진화에 맞춰 그래픽이 더 리얼하게 표시되며, 움직임이 사실적으로 이루어지거나 효과가 화려해지는 등 한 눈에 들어오는 발전이 있었지만, 그에 비해 2D 격투 게임의 진화는 전체적으로 단출한 편이었습니다. 2D 격투 게임의 그래픽은 캐릭터의 움직임 패턴을 1장 1장씩 그려가는 작업이기에 GPU가 진화해도 딱히 혜택을 볼 수 없기 때문입니다.

 

다만 2D 격투 게임의 그래픽을 혁신하기 위한 시도가 없었던 것은 아닙니다. CAPCOM VS. SNK 시리즈처럼 캐릭터를 2D 그래픽으로 그리나 배경을 역동적인 3D 그래픽으로 표현하는 방법은 지금까지도 많이 등장하고 있습니다. 또 최근의 킹 오브 파이터즈 시리즈에선 3D 그래픽으로 캐릭터의 포즈를 만들고 그걸 그래픽 팀에서 그려내는 방법을 씁니다. 사실 이 3D 기반의 간단한 인체 모델을 본따서 작화하는 방법은 최근 애니메이션에서도 자주 쓰이는 기술입니다.

 

또 최근에는 캡콤이 스트리트 파이터 IV에서 90년대 초의 대히트작인 스트리트 파이터 II의 셀화 스타일 분위기를 잇는 3D 그래픽을 표현했습니다. 이와 함께 그래픽은 3D지만 게임 시스템은 2D라는 새로운 표현도 생겨났습니다.

 

이렇게 2D 격투 게임은 어떠한 형태든지 3D 그래픽 기술을 도입하면서 몇가지 새로운 표현 기법을 모색하고 있는데요. 이 글의 주제인 길티기어 Xrd-SIGN는 어떤 게임으로 보이십니까? 아래 영상은 길티 기어 시리즈의 개발사인 아크 시스템이 편집한 게임 플레이 영상이니 직접 보시고 판단하세요.

 

 

아무리 봐도 이건 전통적인 2D 그래픽. 즉 사람이 일일이 손으로 그려낸 그래픽 같습니다. 그러나 결론부터 말하면 이것은 100% 3D 그래픽입니다. 초필살기가 나올 때 사이드뷰 시점에서 캐릭터의 액션을 동적으로 보여주는 화면으로 바뀌는 것이 바로 3D 그래픽을 썼기 때문에 가능한 것입니다.

 

 

게임 엔진으로 언리얼 엔진 3를 채용

 

전통적인 2D인줄 알았는데 실시간 3D CG라는 말에 충격을 느꼈을 분도 있겠지만, 놀랄 건 하나 더 있습니다. 사실 이 게임은 언리얼 엔진 3로 만든 것입니다. 언리얼 엔진 3라는 기어즈 오브 워나 매스 이펙트 등의 리얼한 3D 게임 그래픽을 표현하는 엔진으로 잘 알려져 있지요.

 

3.jpg

 

언리얼 엔진 3는 최근 일본 게임에도 쓰이고 있습니다. 이건 아수라의 분노 3.

 

4.jpg

 

초속변형 자이로제타.

 

물론 게임 엔진은 기본적으로 다양한 게임의 제작에 대응할 수 있도록 설계했으니, 기술적으로 본다면 언리얼 엔진 3를 가지고 애니메이션 스타일의 비주얼을 실현했다고 한들이상하진 않을 것입니다. 다만 대전 액션 게임에서 셀화 애니메이션 느낌으로 정평이 높은 아크 시스템 웍스가 서양 게임에서 주로 쓰이는 언리얼 엔진 3로 게임을 만들었다는 건 놀랄만한 일입니다.

 

5.jpg

 

그럼 왜 언리얼 엔진 3였을까요. 그 이유를 아크 시스템 웍스의 제너럴 디렉터로, 플레이스테이션 1용으로 나온 길티기어 1탄부터 제작에 참가했으며 시리즈 총감독을 맡아 프로젝트의 감독은 물론 비주얼 제작, 음악의 작곡까지 담당하고 있는 이시와타리 다이스케에게 물었습니다.

 

"간결하고 분명한 이유를 하나 대라면 시간적인 여유가 별로 없었다는 것이 되겠습니다. 3D 그래픽 표현을 채용한다는 방침에 이르기까지 어떤 일이 있었는지는 나중에 말씀 드리겠지만, 정해진 제작 기간 중 3D 그래픽을 이용해 완성하려면 기존에 나온 게임 엔진 중 하나를 골라서 만들어야 했습니다. 우리는 과거에 길티기어 2 오버추어에서 실시간 전략 스타일의 3D 그래픽을 채용한 작품을 100% 자체 개발한 게임 엔진으로 만들었던 적이 있지만, 이걸 개량해 제작하기엔 시간적인 여유가 없었습니다"

 

6.jpg

 

이쪽은 디렉터인 야마나카 타케시입니다. 스토리 감독, 시나리오 각본 집필, 효과음 제작을 맡았으며 길티 기어 시리즈에선 이시와타리 제너럴 디렉터와 함께 세계관을 만들었습니다. 또 블레이 블루 시리즈에서도 디렉터를 맡은 적이 있습니다.

 

"에픽 게임스는 차세대 게임 엔진으로 언리얼 엔진 4를 발표했습니다. 우리가 엔진을 정했을 때가 마침 그 때인데, 언리얼 엔진 4를 발표하면서 언리얼 엔진 3의 가격을 인하하면서 우리같은 중소규모 스튜디오도 도입할만한 수준이 됐습니다. 이것도 게임 엔진을 고른 이유 중 하나라 할 수 있겠네요. 또 길티기어 Xrd-SIGN의 프로토 타입을 본 에픽 게임이 언리얼 엔진 3의 새로운 잠재 능력을 끌어내준 것을 높게 평가해 여러 지원을 준 것도 큰 도움이 됐습니다."

 

7.jpg

 

길티기어 Xrd-SIGN은 아케이드용 타이틀입니다. 이후 나온 콘솔 이식, 예를 들어 PS4를 전재로 한다면 언리얼 엔진 3가 아니라 언리얼 엔진 4를 쓰는 건 어땠을까요. 아니면 일본의 다른 게임 엔진을 쓰는 것도 방법 아니었을까요? 여기에 대해선 배틀 판타지아의 제작에 참여했고 길티기어 Xrd-SIGN에선 리드 프로그래머를 맡은 카유미 타쿠로가 답했습니다.

 

"물론 다른 엔진도 검토했습니다. 하지만 길티기어 Xrd-SIGN의 개발에선 기존 게임 엔진에 기능 추가나 편집을 더할 것이었기에, 소스를 공개하며 기능이 성숙한 엔진을 골라야 했습니다. 이런 조건을 채운 것이 바로 언리얼 엔진 3였으며 저같은 엔지니어 입장에서 보면 언리얼 엔진 3는 큰 매력이 있었습니다."

 

언리얼 엔진 3는 2005년부터 이를 도입한 게임 타이틀이 출시됐으며, 앞서 사용했던 개발자들의 피드백이 모여 기능이 매우 안정된 상황이었습니다. 아크 시스템에서 독자적으로 기능을 더했을 때 게임이 불안해지면 안되며, 그런 상태가 발생했을 때도 원인을 알려면 엔진이 안정돼야 합니다. 그래서 나온지 시간이 제법 지난 언리얼 엔진 3를 골랐다고 할 수 있겠습니다.

 

8.jpg

 

아티스트 입장에서 보면 어떨까요? 아트 디렉터 겸 치프 애니메이터로 길티기어 2 오버추어에서도 애니메이션을 맡은 바 있으며 길티기어 Xrd-SIGN에선 캐릭터 모션 설계를 담당해 격투 부분은 물론 드라마 파트의 움직임까지 담당한 사카무라 히데히코는 이렇게 말합니다.

 

"아티스트 입장에서 쓰기 쉽다는 것도 언리얼 엔진 3를 고를 이유가 됐습니다. 언리얼 엔진 3는 무료 개발 키트가 공개돼 있는데, 이걸 써 보니 저같은 아티스트 혼자만으로도 자체 제공하는 3D 모델을 사용해 fps 샘플 게임을 바로 만들 수 있더라구요. 통합 툴로서 쓰임새가 상당히 좋았습니다."

 

리드 모델러 겸 테크니컬 아티스트인 모토무라 C 준야는 이렇게 말합니다. "언리얼 엔진 3는 프로그래머를 번거롭게 하지 않고 개발을 추진할 수 있습니다. 프로그래머의 수가 그리 많지 않은 길티 기어 Xrd-SIGN 개발 팀 입장에선 매우 좋은 일이죠. 아티스트가 직접 만들면 되니까요. 격투 게임은 개발 중에 다양한 조정을 거쳐야 하는데 그때마다 아티스트와 프로그래머가 데이터를 주고받으면 개발 효율이 나빠집니다. 허나 언리얼 엔진 3에선 아티스트가 바로 셋업해서 만든 걸 반영할 수 있으니 개발 효율이 높았습니다."

 

9.jpg

 

10.jpg

 

길티기어 Xrd-SIGN 개발 프로젝트에선 기본적인 컨텐츠 제작에 언리얼 엔진 3에서 제공하는 툴 그룹을 활용하면서, 2D 격투 게임으로서 핵심 부분을 만들어 내는 부분은 아크 시스템 웍스가 예전의 프로젝트에서 사용해 완 자체 개발 툴 그룹을 사용했다고 합니다.

 

11.jpg

 

구체적으로 말하면 자체 개발한 툴은 2D 격투 게임의 충돌 판정 설정 툴이나 캐릭터 행동을 제어하는 스크립트 툴 등이 있습니다. 위 사진이 판정 박스를 표시한 것이지요. 또 2D 격투 엔진이라고 불러야 할 게임 로직도 새로 만들지 않고 그간 사용했던 것을 언리얼 엔진 3로 이식했습니다. 여러 차례 사용하며 익숙해진 툴이니 안정적으로 동작하며 이걸 활용하는 사람도 많습니다. 새로운 기술을 채용하고 개발 효율도 유지하는 방법이니 꽤나 현실적이지요.

 

12.jpg

 

소프트이미지의 쉐이더 조정 화면. 소프트이미지에선 cgfx의 프리뷰를 하며 실제 기기와 같은 비주얼을 실시간으로 확인하며 작업할 수 있습니다.

 

13.jpg

 

언리얼 엔진 3의 쉐이더 조정 화면입니다. 소프트이미지에서 만든 cgfx 쉐이더와 같은 계산 결과가 나오도록 문서 트리가 작성됐음을 알 수 있습니다.

 

14.jpg

 

참고로 길티기어 Xrd-SIGN의 개발 팀은 이 글이 쓰여졌을 시점에 아크 시스템 웍스의 전임 멤버만 25명입니다. 관리 담당을 제외한 실제 개발에 종사하는 인원은 프로그래머가 4명, 게임 디자인 등을 담당하는 기획자가 3명, 디자이너가 12명. 그 밖에 일본과 외국의 외주 스탭이 있어 총 100명 정도가 개발에 참여한다고. 위 사진은 앞서도 나온 핵심 멤버들입니다.

 

15.jpg

 

16.jpg

 

17.jpg

 

18.jpg

 

게임 구상 자체는 2008년에 나와 구체적인 개발 프로젝트로 출범한 건 2011년 봄. 이때 3D 그래픽을 쓰는 걸 결정하고 사내 프레젠테이션을 위한 파일럿 무비를 제작했습니다. 이 위에 나오는 스틸 컷이 바로 파일럿 무비입니다. 프로토타입 개발을 시작한 건 2011년 후반. 언리얼 엔진 3을 쓰기로 결정하고 본격적인 개발 작업에 착수한 건 2012년 후반. 실제 제작 기간은 1년 반 정도입니다.

 

 

2D 격투 게임을 3D 그래픽으로 표현한다는 것

 

아크 시스텍 웍스는 여러 2D 격투 게임을 출시한 실적이 있습니다. 2D 격투 게임 개발의 장인 집단이라 할 수 있을 것입니다. 그리고 길티기어 2 오버추어를 제외하면 길티기어 시리즈는 모두 셀화 2D 격투 게임으로 나왔습니다. 따라서 3D 그래픽으로 넘어가는 건 아크 시스템 웍스 입장에서도 큰 일이었을텐데, 이 점에 대해 이시와타리 제너럴 디렉터는 이렇게 말합니다.

 

"2011년 봄에 길티 기어 시리즈의 새로운 격투 게임 프로젝트를 시작했습니다. 그 전에 우리는 2008년에 블레이 블루를 발표했는데, 이것은 우리의 셀화 기반 2D 격투 게임의 정점이 이른 작품이라고 할 수 있었습니다. 여기에 이어 새로운 길티기어가 무엇을 하면 팬들에게 영향을 줄 수 있을까. 이렇게 생각해서 나온 결론이 셀화 애니메이션처럼 보이지 않는 실시간 3D 그래픽이었습니다."

 

19.jpg

 

블레이 블루

 

이시와타리 제너럴 디렉터는 처음부터 3D로 방침을 정한 게 아니라 '벡터 그래픽을 2D 격투 게임에 응용할 수 있는가' 등으로 독자적인 연구를 진행하기도 했다고 합니다. 2007년부터 길티기어 시리즈의 캐릭터를 3D 모델링하고 시험적으로 실행해 보는 등 실험도 했지만, 이른바 실사 계열의 비주얼로 만들어 나가는 것에 한계도 느꼈다네요.

 

20.jpg

 

배틀 판타지아

 

비슷한 시기에 모토무라 테크니컬 아티스트는 셀 애니메이션같은 표현을 실시간으로 수행하는 툰 쉐이더(셀 쉐이더라고도 함)의 연구를 하고 있었는데, 그 연구 성과가 이시와타리 제너럴 디렉터의 눈에 띄었고, 결국 툰 쉐이더를 쓰는 쪽으로 방향을 바꾸게 된 것이라 합니다. 프로그램의 경우 카유미 프로그래머가 3D 격투 게임인 배틀 판타시아의 개발을 했던 경험이 있어 크게 어려웠던 적은 없었다고.

 

카메라의 앵글을 바꿔 역동적인 비주얼을 표현할 수 있다는 것이 3D 그래픽의 가장 큰 매력이라는 건 누구든지 쉽게 상상할 수 있습니다. 그리고 이시와타리 제너럴 매니저는 그것 외에도 이 방법에 숨겨진 큰 가능성을 발견했다고 하네요.

 

"3D 그래픽을 쓰면 셀화에선 실현이 어려운 다채로운 표정을 표현하기가 쉬워집니다. 몸의 움직임과는 별도로 얼굴을 움직이니까 전투 중에 대사를 쓰지 않아도 다양한 감정 표현이 되더라구요."

 

화면 해상도가 낮았던 시절에 셀화로 표현하는 캐릭터의 표현은 그리 세밀하게 그려지진 않았습니다. 게임을 하는 사람들도 거기에 큰 관심을 보이지 않았거나 사상으로 보충했지요. 허나 디스플레이의 해상도가 높아지면서 더욱 세밀한 표현이 필요하게 됐습니다. 셀화를 쓸 경우에는 디스플레이 해상도에 맞춰 작화 해상도도 높여야 했던 것입니다.

 

실제로 블레이 블루 시리즈에서는 그대로 해상도를 높였지만, 길티 기어 Xrd-SIGN-에서는 그 이후를 내다보고 더 자유로운 얼굴의 애니메이션이 가능한 3D 그래픽에 주목한 것입니다.

 

 

길티기어 Xrd-SIGN의 그래픽 사양은?

 

이제 그래픽 사양을 확인해 봅시다. 길티 기어 Xrd-SIGN-는 시스템 기판으로 세가의 RINGEDGE 2"을 씁니다. 스펙은 공개하지 않았지만 윈도우 XP 임베디드 32비트를 운영체제로 쓰니 실행 바이너리도 당연히 32비트겠지요.

 

레이아웃 해상도는 아케이드 버전이 1280×720의 720p며 프레임 레이트는 60fps. 안티 에일리어싱은 평범한 MSAA(Multi-Sampled Anti-Aliasing)가 아니라 포스트 이펙트에 속하는 FXAA(Fast Approximate Anti-Aliasing)를 씁니다.

 

21.jpg

 

화면 한 장당 총 폴리곤 수는 약 80만개. 캐릭터 2개가 25만개 배경이 55만개인데 이건 어디까지나 참고값입니다. 1장에 해당하는 렌더링에서 보이는 폴리곤과 보이지 않는 폴리곤을 모두 더한 것이 GPU가 담당하는 총 지오메트리 부하에 해당합니다. 1개의 캐릭터는 대충 4만개의 폴리곤으로 렌더링을 한다네요.

 

22.jpg

 

와이어 프레임과 캐릭터의 비교

 

23.jpg

 

게임 화면의 와이어 프레임

 

24.jpg

 

최종 화면

 

길티기어 Xrd-SIGN-는 게임 장면의 3D 모델과 컷 씬의 3D 모델에서 머리 부분은 따로 모델링을 합니다. 다만 폴리곤 수에 큰 변화가 있는 건 아닙니다. 이렇게 이야기하면 LoD(Level of Detail)에 따라 폴리곤이 많을 때와 적을 때의 모델을 따로 쓸 것이라고 생각하는 사람들이 많지만, 그건 아니고 화면의 상황에 따라 보기 좋은 걸 준비하고 싶었기 때문이라고 이시와타리 제너럴 디렉터는 말합니다.

 

"전투 중의 캐릭터는 얼굴이 조그맣게 그려집니다. 옷과 액세서리도 마찬가지지요. 그러나 그대로 하면 캐릭터를 줌인했을 때 그 정체성을 표현할 수 없습니다. 그래서 전투 중일 때 사용하는 3D 모델과, 카메라가 줌인했을 때 쓰는 3D 모델을 따로 제작하기로 했습니다."

 

25.jpg

 

26.jpg

 

27.jpg

 

예를 들면 길티기어 시리즈에 나오는 미라아는 예쁘고 쿨한 느낌을 주는 여성 캐릭터이며, 눈 크기가 작은 어른스러운 얼굴을 하고 있습니다. 실제로 컷 씬 장면과 특정 필살기를 이용할 때, 카메라가 줌인하게 되면 그 어른같은 얼굴을 가진 근거리용 3D 모델을 그려냅니다. 하지만 이 어른같은 얼굴을 가진 3D 모델을 전투 중에 그대로 사용하면 이목구비가 너무 가늘어집니다. 캐릭터의 개성과 표정을 표현하기가 어려워지는 것입니다.

 

28.jpg

 

29.jpg

 

30.jpg

 

그래서 아크 시스템 웍스는 캐릭터의 표정, 옷, 액세서리의 상징적인 부분에서 디테일을 강조하기 위해 전투 장면용 3D 모델에서는 근거리용 3D 모델과 다른 모델을 쓰기로 했습니다. 그래서 미리아의 경우 전투 장면용 3D 모델에선 의도적으로 눈을 크게 그리는 등의 변경이 들어간다고 하네요.

 

31.jpg

 

뼈의 수는 주인공 캐릭터인 솔 배드가이가 약 460개, 가장 많은 캐릭터에서 600개가 됩니다. 다만 손발을 포함한 몸체의 기본 구조는 공통입니다.

 

32.jpg

 

머리의 뼈는 170개이며 그 중 70개가 얼굴에 들어갑니다. 이것은 최근의 3D 게임 캐릭터에 비해 상당히 많은 편인데, 그만큼 표정을 그려내는 데 주력했다는 것입니다.

 

렌더링 방식은 일반적인 편에 속하는 Forward이며 최근 유행하는 Deferred는 쓰지 않습니다. Deferred는 많은 광원을 다룰 때 효과적인 방법이지만 애니메이션 느낌이 나도록 그리는 용도로는 필요 없을 것입니다. 다만 Z 버퍼 렌더링은 들어갑니다. 즉 모든 3D 모델에 지오메트리 렌더링이 최저 2번은 들어가는 것입니다. 또 캐릭터의 경우 애니메이션 느낌의 윤곽선을 그리기 위해 지오메트리 렌더링이 한번 더 들어가는데, 이건 나중에 설명합니다.

 

장면 1개에 들어가는 총 텍스처 용량은 약 160MB 이하입니다. 1개의 장면당 들어가는 쉐이더 프로그램 수는 버텍스 쉐이더가 60~70개, 픽셀 쉐이더가 70~80개 정도입니다. 모든 쉐이더는 언리얼 엔진 3의 툴 세트에서 만들 수 있습니다. 캐릭터 쉐이더, 배경과 효과 쉐이더는 담당자가 서로 다르며, 프로그램 팀이 개별적으로 쉐이더를 개발하는 경우는 거의 없었다고 합니다. 이는 언리얼 엔진 3를 쓴 효과라 할 수 있겠습니다.

 

 

쓰기와 쉐이딩 1. 전통적인 톤 쉐이더에 세밀한 커스텀을 조합

 

그럼 이제 길티기어 Xrd-SIGN-에서 쓰이는 그래픽 기술을 하나씩 보도록 하겠습니다. 우선 조명 시스템입니다. 여기서 알아둬야 할 것은 이 게임의 조명이 물리적으로는 전혀 정확하지 않다는 것.

 

이 점에 대해 크게 의아해하실 분도 있겠는데, 이것은 길티기어 Xrd-SIGN-에서 지향하는 비주얼의 최종 목표가 셀 애니메이션이라는 점과 관련이 있습니다. 개말 팀은 물리적으로 정확한 것이 아니라 미술적으로 보기 좋은 것을 목표로 했습니다. 또 그걸 위해 다양한 연구를 한 것들을 기술적인 관점에서 보면 꽤나 독특하고 흥미롭습니다.

 

하나하나씩 봅시다. 길티기어 Xrd-SIGN-의 게임 세계에서 설정하는 글로벌 광원은 태양광에 해당하는 평행 광원입니다. 이 평행 광원은 캐릭터 발 아래에 있는 동적인 그림자 생선을 위해 사용합니다.

 

거꾸로 말하면 이 외의 그림자. 에를 들어 정적인 배경 객체의 그림자 등은 버텍스의 색상과 텍스처를 포함해서 만든 그림자라는 이야기가 됩니다.

 

33.jpg

 

렌더링의 최종 결과

 

34.jpg

 

타일 텍스처

 

35.jpg

 

추가 텍스처

 

36.jpg

 

그림자용 텍스처

 

37.jpg

 

맨홀의 텍스처

 

38.jpg

 

맨홀의 그림자

 

39.jpg

 

쉐이더 편집 화면. 렌더링에서 보일 최종 결과를 위해 위의 5가지 요소를 조합하는 식이 됩니다.

 

그럼 캐릭터 자체의 그림자는 어떻게 넣는 것일까요? 이것은 캐릭터 자체가 갖고 있는 전용 광원에 의한 조명 효과입니다. 게임 플레이어의 눈에 보이지 않는 캐릭터 전용 조명이 캐릭터를 따라다닌다는 것입니다.

 

이시와타리는 "셀 애니메이션의 비주얼을 목표로 했다는 말은 보여지는 것을 위주로 했다는 말입니다. 장면에 맞춘 광원으로 조명하면 어느 부분에선 리얼하게 보일 수도 있지만, 특정 위치에 캐릭터가 오면 얼굴에 그림자가 드리워지거나 그늘 속으로 들어가 평평하게 보이는 상황이 생깁니다. 항상 대등한 조건에서 플레이해야 하는 2D 격투 게임에서 이런 차이가 생기는 건 피해야 합니다" 라고 말합니다.

 

또 모토무라는 "캐릭터마다 제각각 조명용 쉐이더 내부에 광원을 갖고 있다고 보시면 됩니다. 매릭터마다 개별 벡터 설정값을 광원으로 갖고 있다고 설명하는 게 더 정확할 수 있겠네요"라 보충 설명합니다.

 

이 캐릭터 전용 광원은 모션마다 위치와 각도가 조정됩니다. 전투 장면은 물론 컷 씬에서도 시점에 따라 광원의 위치와 방향을 1프레임씩 조정합니다.

 

40.jpg

 

텍스처+일반 그림자

 

41.jpg

 

셀 쉐이딩

 

42.jpg

 

그림자 조정 전

 

43.jpg

 

그림자 조정 후

 

라이팅 결과로 그림자를 넣는데 이 그림자가 기본적으로 정해진 값을 넘으면 밝음, 넘지 못하면 그림자로 구분하는 툰 쉐이더 매커니즘이 사용됩니다. 쓰기 결과가 0~255의 값을 갖고 있을 때, 128 이상을 밝음, 127까지를 그림자라고 하는 것입니다.

 

44.jpg

 

다만 그림자 계산 결과 미리 설정된 임계값에 가까운 영역일 때, 카메라나 캐릭터가 약간 움직이는 것만으로도 그림자가 지는 곳과 지지 않는 곳이 나뉘어 보기 흉한 경우가 생길 수 있습니다.


45.jpg

 

그래서 길티기어 Xrd-SGIN은 셀 애니메이션과 똑같이 그림자가 확실하게 나뉘도록 3D 모델에 몇가지를 더해 그림자를 조정하고 있습니다.

 

46.jpg

 

하나는 3D 모델을 구성하는 각 폴리곤의 버텍스 컬러, 구체적으로는 버텍스 컬러의 R 채널에 그림자가 잘 지는 가중치 매게 변수를 넣는 것입니다. 이것은 움푹 파인 곳이나 주위에서 가려진 곳을 두드러지게 하기 위함인데, 가면이나 목 둘레가 여기에 해당합니다. 위 이미지가 바로 그 가중치 변수를 표시한 것입니다.

 

47.jpg

 

가중치 변수를 쓰지 않았을 경우

 

48.jpg

 

썼을 경우

 

모토무라는 여기에 대해 이렇게 설명합니다. "그림자 가중치 메게 변수는 결과적으로 Ambient Occlusion이 되는데 이는 아티스트가 자신의 감에 따라서 수작업으로 설정합니다. 이것은 조면 제어용 텍스처(개발팀에서는 ilmtexture라 부르는데)의 G 채널에도 들어가, 이 값이 최대일 경우 텍스처의 그림자가 됩니다. 항상 그림자가 들어가는 부분은 이 방법으로 그림자를 넣지요."

 

49.jpg

 

캐릭터 중 하나인 카이의 limtexture

 

50.jpg

 

G 채널

 

51.jpg

 

옷 아래 부분의 G 채널

 

52.jpg

 

카이의 그림자 편집 전

 

53.jpg

 

편집 후

 

목 부분에 드리운 그림자는 캐릭터 자신의 그림자처럼 보이지만, 실제로는 그림자 가중치 매게 변수에 의해 생겨난 그림자인 셈입니다.

 

54.jpg

 

그림자 가중치 매게 변수를 쓰지 않고 조명만을 적용했을 경우.

 

55.jpg

 

그림자 제어가 들어간 상태.

 

셀 애니메이션처럼 그림자를 표현하기 위한 방법 두번째는 버텍스 법선 조정입니다. 버텍스 법선은 쉬운 말로 버텍스의 방향을 가리킵니다. 3D 그래픽에서 라이팅의 계산은 광원의 방향(광원 벡터)와 시선의 방향(시선 벡터), 면의 방향(법선 벡터)의 3가지 변수가 필요합니다. 즉 그림자의 형태는 면의 방향을 변화시키는 것으로 조정할 수 있다는 이야기입니다.

 

56.jpg

 

길티기어 Xrd-SIGN의 경우 캐릭터 모델은 앞서 말한대로 4만 폴리곤으로 모델링합니다. 그래서 아무것도 하지 않으면 4만 폴리곤의 복잡한 그림자가 나오지만, 여기서 필요한 건 샐 애니메이션에서 볼 수 있는 단순한 형태의 그림자입니다.

 

그래서 4만 폴리곤에 해당하는 3D 모델 형상(3D 모델의 해상도)를 유지한 채, 폴리곤에 들어가는 면의 방향 정보만 거칠게 뽑아내 빛을 쬐서 나오는 그림자를 그려내는 아이디어가 나왔습니다. 면의 방향은 버텍스에 주어지는 법선 벡터로 나타냅니다. 그래서 길티기어 Xrd-SIGN의 개발 팀은 간략화된 그림자가 나오도록 이 버텍스를 조정한 것입니다.

 

언리얼 엔진 3는 표준 상태에서 Skeletal Meshes를 임포트할 때 버텍스 법선을 다시 계산합니다. 그래서 3D 그래픽 제작 툴인 소프트 이미지에서 편집한 법선을 게임에 바로 반영할 순 없습니다. 그래서 프로그래머가 엔진의 메시 임포트 방향에 맞춰서 편집된 법선을 그대로 게임에 사용할 수 있도록 개조했습니다. 이 개조 없이 법선 편집에 의한 그림자 제어는 불가능했다고 하네요.

 

이렇게 언리얼 엔진 3를 고처 버텍스 법선 조정을 가능하게 됐으나 그 방법에는 몇가지 선택지가 있습니다. 과거 스튜디오 지브리가 하울의 움직이는 성의 CG에서 사용했던 건 '인접한 법선 벡터 사이의 평균값을 반복적으로 도출해 내서, 법선 벡터의 편차를 흡수해 평탄화'하는 방법이었습니다. 그럼 여기선 어떤 방법을 썼을까요? 모토무라는 이렇게 말합니다.

 

"길티기어 Xrd-SIGN에서는 캐릭터의 모양을 가장 중요하게 여겼기에, 얼굴에 들어가는 그림자의 모습에 항상 주의했습니다. 얼굴이나 머리는 아티스트가 수작업으로 법선 편집의 조정을 했습니다."

 

57.jpg

 

수작업으로 법선을 편집하는 중

 

예를 들어 뺨 언저리의 법선을 관자놀이 근처의 법선에 접근하도록 하면, 관자놀이 부분이 어두울 때는 뺨 부분 역시 어두워지도록 할 수 있습니다. 원래 3D 모델에서는 곡면 형태로 모델링했지만 여기선 법선을 모음으로서 폴리곤 수가 적은 모델의 개략적인 그림자를 풍부한 폴리곤의 모델에 입히는 것입니다.

 

58.jpg

 

법선 편집 전의 법선

 

59.jpg

 

법선 편집 전의 그림자

 

60.jpg

 

법선 편집 후의 법선

 

61.jpg

 

법선 편집 후의 그림자

 

"한편 옷이나 머리카락에는 Gator를 써서 간단한 모델의 수직 분포를 전사해, 복잡한 형상 모델에 간단한 그림자가 만들어질 수 있도록 했습니다."

 

62.jpg

 

Gator에 의한 바지의 법선 전사를 하지 않았을 경우.

 

63.jpg

 

법선 전사가 들어갔을 경우

 

이 바지는 형상이 꽤나 복잡하지만 그림자는 매우 간단합니다. 비슷한 크기의 원기둥 모델을 넣어 그 법선을 바지 모델에 전사해 법선 조정을 전사하는 것입니다. 이 부분은 수작업이 아니라 Gator(Generalized Attribute Transfer Operator)라 부르는 3D CG 소프트웨어(개발팀은 소프트이미지 2013을 사용)의 3D 모델 속성 전송 기능을 사용해 반자동 생성합니다.

 

64.jpg

 

65.jpg

 

전사 소스로 쓰인 Gator 오브젝트

 

길티기어 Xrd-SIGN에서 캐릭터의 머리카락은 상당히 복잡한 형태를 띄고 있지만, 이것도 샐 애니메이션처럼 간략화가 많이 들어갔습니다. 바로 쉐이딩 작업을 했다면 울퉁불퉁한 부분마다 그림자가 끊겼을 것이나, 법선 편집과 간단한 모델의 법선 전사를 조립하고, 리모델링 단계에서 특수 조정을 넣어 바라는 결과를 낼 수 있었다고 하네요.

 

66.jpg

 

머리카락의 그림자 조정이 안 됐을 경우

 

67.jpg

 

조정 후

 

68.jpg

 

머리카락의 법선 조정 전

 

69.jpg

 

조정 후

 

70.jpg

 

머리카락의 법선 조정 타겟

 

 

쓰기와 쉐이딩 2. 거울 반사의 컨트롤과 유사 표면 산란 기법

 

셀 애니메이션 느낌의 2D 그래픽에서는 거울 반사에 의해 나타나는 고광택 하이라이트(Specular Highlight)가 크게 두드러지지 않는 경우가 있지만, 길티기어 Xrd-SIGN은 이 고광택 하이라이트도 손으로 직접 그린 일러스트에 하이라이트를 넣는 공식에 따라 조정해 조명에 제대로 들어가게 됩니다.

 

71.jpg

 

캐릭터 중 하나인 이노의 ilmtexture

 

72.jpg

 

ilmtexture B채널

 

73.jpg

 

R 채널

 

74.jpg

 

고광택 하이라이트를 끈 경우

 

75.jpg

 

사용한 경우

 

76.jpg

 

사용한 경우에서 각도를 살짝 바꿔보면-

 

그럼 그 공식이란 무엇일까요? 한마디로 말하긴 어려우나 몇가지 예를 들면 피부나 의상처럼 서로가 가까운 위치에 있어도 재질이 다를 때는 하이라이트가 달라붙지 않도록 하거나, 물리적으로 전혀 다른 성질이라는 걸 고려하여 요철과 재질의 경계에 따라 하이라이트를 내도록 한 것입니다.

 

77.jpg

 

가슴, 머리카락, 머리띠, 뺨, 입술 등의 하이라이트는 거의 고정돼 있으나 각도에 따라 굵기가 변화하고 극단적인 각도에선 사라집니다.

 

78.jpg

 

이 캐릭터는 근육을 강조하기 위해 옷 위로도 근육의 하이라이트가 들어가도록 텍스처가 설정돼 있습니다.

 

79.jpg

 

금속 광택이 고정돼 있으면 위화감이 들기에 각도에 따라 변화하도록 했습니다.

 

80.jpg

 

카메라와 조명의 각도에 따라 항상 하이라이트가 최적의 위치에 나오도록 해 사실감을 높였습니다.

 

고광택 반사 하이라이트의 제어는 조명 제어용 텍스처의 B 채널에 저장된 '하이라이트가 처리 용이성' 변수에 의해 이루어집니다. 이 변수는 반사의 계산 결과에 대한 강약을 조절한 것으로, 최대값에선 하이라이트가 커지고 값이 작을수록 하이라이트의 크기도 작아집니다. 또 조명 제어용 텍스처의 R 채널은 반사 하이라이트의 강도 변수로 돼 있어, 금속이나 반들반들한 재질에는 이 변수 값이 크게 설정됩니다.

 

81.jpg

 

ilmtexture

 

82.jpg

 

알파 채널

 

83.jpg

 

R 채널

 

84.jpg

 

G 채널

 

85.jpg

 

B 채널

 

하지만 이런 방법을 동원했는데도 개발팀은 만족하지 못했다고 합니다. 완전한 셀 애니메이션 스타일을 그려내려면 도대체 무엇이 부족했던 것일까요?

 

86.jpg

 

모토무라 C 준야. 리더 모델러 겸 테크니컬 아티스트로 길티기어 Xrd-SIGN에서는 캐릭터 모델 제작의 전반과 뼈대, 장비의 설계를 담당했습니다. 과거에 제작에 참여한 작품 중에는 블레이 블루 시리즈와 페르소니 4 격투 게임 시리즈, 길티기어 2 오버추어가 있습니다. 

 

"색상입니다. 톤 쉐이더로 명암을 넣었지만 그 명암에는 어딘가 단조로운 인상을 받았습니다. 어둔 곳에 단색의 그림자를 더하는 단순한 툰 쉐이더 처리는 소재와 설득력의 표현이 부족하다고 느껴졌다고 할 수 있겠네요. 반면 애니메이션의 제작 현장에는 색채 설계를 담당하는 전문 화가가 있어, 이 캐릭터의 이 부분은 햇볕이 비치면 어떤 색, 어두운 부분은 저런 색. 이런 식으로 색을 개별정으로 설정합니다. 바로 여기에 차이가 있지 않을까 생각합니다."

 

물론 셀 애니메이션처럼 자세히 개별 설정할 수는 없습니다. 그래서 시스템을 만들기 위해 연구를 진행한 결과, 애니메이션의 색채 설계는 본능적으로 '해당 장면의 환경에 비치는 빛의 색'과 '표현 대상의 재질이 갖고 있는 빛의 투과율'에 따라 설정하는 색을 정하는 게 아닌라, 이런 추론에 다다랐다고 하네요. 이에 따라 색을 설정하니 상당히 이상적인 결과를 얻어 최종 결과에 넣기로 했습니다.

 

이 방법의 실제 구조는 그리 복잡한 건 아닙니다. 우선 3D 모델에 적용하는 베이스 텍스처에 대응하는, 그림자가 졌을 때 나오기 쉬운 빛깔을 분포한 텍스처를 준비합니다. 개발 팀에선 SSS(SubSurface Scattering) 텍스처라 부릅니다.

 

조명을 넣은 결과 그림자가 지면 해당 픽셀은 이 SSS 텍스처의 값과 환경의 빛 색을 더해 얻은 결과를 그림자의 색으로 결정합니다. 한편 조명을 넣었을 때 그림자가 지지 않았을 경우에는 SSS의 텍스처 값을 무시하기에 그 결과 광원의 색만 영향을 주게 됩니다. 이 분리 처리에 의해 셀 애니메이션 느낌의 색에 가까운 표현을 낼 수 있었다고 합니다.

 

87.jpg

 

SSS 텍스처를 넣지 않았을 때

 

88.jpg

 

넣었을 때

 

구체적으로 어떤 효과가 나타나는지를 봅시다. 캐럭터의 몸 부분의 그림자는 약간 붉은 빛을 띄게 됩니다. 옷 부분의 그림자엔 옷에 들어간 채도가 남게 됩니다. 즉 SSS 텍스처는 그러한 붉은 빛이나 옷의 채도가 남은 색으로 구성된 것이 됩니다.

 

89.jpg

 

위 그림은 환경의 빛과 광원 색상에 따라 그림자의 색이 어떻게 바뀌는지를 보여줍니다.

 

모토무라는 다음과 같이 보충 설명을 합니다. "SSS 텍스처가 표면 아래의 산란 효과를 시뮬레이션하는 것이 아니기에 이 이름은 잘못된 것일지도 모릅니다. 다만 SSS 텍스처는 그 재질이 빛을 얼마나 투과하는지를 단적으로 나타내고 있다고 생각합니다. 얇은 종이 위에 비쳐 나오는 그림자의 색깔이 연하다는 걸 표시하는 텍스처지요." 

 

 

윤곽선의 비밀 1. 배면법

 

길티기어 Xrd-SIGN의 애니메이션 느낌이 나는 비주얼에서 상당히 중요한 부분을 담당하는 것이 바로 윤곽선입니다. 만화에서는 이걸 펜으로 그리지만 길티기어 Xrd-SIGN에선 이를 2가지 접근 방식을 조합해서 표현했습니다.

 

가장 기본적인 선의 묘사가 되는 3D 모델의 형상 윤곽선에는 배면법(Back-Facing)을 씁니다. 대게 3D 모델을 GPU에서 렌더링할 경우, 특정 시점에서 뒤쪽에 있는 폴리곤은 보이지 않는 것이기에 렌더링하지 않고 파기됩니다. 이것은 정면을 향한 캐릭터 모델에서 등 쪽의 폴리곤은 어차피 안 보이기에 그릴 필요가 없다는 발상에 근거한 것으로 Backface Culling이라 부르기도 합니다.

 

그에 비해 배면법의 선을 그려낼 때는 이 백페이스 컬링의 구조를 반전한 렌더링을 조합하고 있습니다. 즉 일반적으로는 그리지 않는 뒷 부분의 처리 계통을 반전시켜, 뒤를 그리고 앞부분을 그리지 않도록 한 것입니다.

 

90.jpg

 

윤곽선이 없을 때

 

91.jpg

 

윤곽선이 있을 때

 

92.jpg

 

이 과정의 처리 흐름을 설명하면 우선 3D 모델을 약간 팽창해서 반전시킨 백페이스 컬링을 합니다. 그 결과 해당 3D 모ㅜ델의 검은색 실루엣이 나오는데 이를 저장합니다.

 

93.jpg

 

이후 3D 모델의 원래 크기대로 일반적인 처리 시스템을 이용해서 렌더링을 합니다.

 

94.jpg

 

최종 단계에선 검은 실루엣과 일반적인 렌더링 결과를 합성합니다. 검은색 실루엣은 대부분이 가려지지만 실루엣의 크기가 약간 크기에 육곽 부분만 남게 됩니다.

 

길티기어 Xrd-SIGN의 렌더링 파이프 라인에선 Z 버퍼의 선출을 하기에 1단계에서 거의 완벽에 가까운 윤곽선을 얻을 수 있습니다. 그래서 최종 단계에서 합성을 할 필요가 없을 법도 하지만 이론적으로는 이렇습니다.

 

95.jpg

 

사실 이 방법은 프로그래머블 쉐이더 기술이 등장하기 전부터 나왔던 고전적인 수법입니다.

 

96.jpg

 

이것은 2004년에 나온 게임인 XII인데, PS2 기반 게임인지라 프로그래머블 쉐이더를 쓰진 못했습니다.

 

물론 길티기어 Xtd-SIGN은 버텍스 쉐이더를 통해 이 고전적인 기법을 독자적을 확장해 도입했습니다. 카메라의 줌을 독자적으로 확장한 것이지요. 캐릭터의 원근에 관계 없이 선의 굵기가 가늘어지거나 얇게 나오는 걸 피하는 제어 부분, 손으로 직접 그린듯한 느낌을 재현하기 위해 곡선과 직선의 굵기에 강약을 넣는 부분 등입니다. 실제로 펜으로 그린듯한 묘사는 바로 이런 버텍스 쉐이더에 의한 제어에서 나오는 것입니다.

 

"배면법을 사용한 건 아티스트가 선 묘사의 강약을 자유자재로 제어할 수 있는 부분에 메리트를 느꼈기 때문입니다. 길티기어 Xtd-SIGN의 3D 모델에서는 버텍스의 색깔로 선을 그려낼 때 굵기 제어값을 두며, 이에 따라 선의 강약을 묘사하게 됩니다. 이것으로 애니메이터가 손으로 직접 그린 그림에서 볼 수 있는, 뺨 부분은 굵으나 턱으로 갈수록 가늘어지는 표현을 할 수 있게 됩니다."라고 모토무라는 설명합니다.

 

97.jpg

 

윤곽선 굵기 조정 결과

 

98.jpg

 

윤곽선 굵기 조정. 버텍스 컬러 알파 채널 표시.

 

99.jpg

 

윤곽선 강약 조절이 없을 때.

 

100.jpg

 

조절이 들어갔을 때. 코, 뺨, 턱을 보세요.

 

101.jpg

 

윤곽선 강약 조절이 없을 때.

 

102.jpg

 

조절이 들어갔을 때. 어깨와 팔 부분을 보세요.

 

길티기어 Xtd-SIGN에서 버텍스 컬러의 활용 내역은 다음과 같습니다.

R: 그림자 판정의 한계에 대한 값. 1을 표준으로 하며 그림자가 되기 쉬운 부분일수록 어두워집니다. 0이면 반드시 그림자가 나옵니다.

G: 카메라의 거리에 따라 윤곽선을 어느 정도나 두껍게 할 것인지를 결정.

B: 윤곽선의 Z 오프셋 값.

A: 윤곽선의 굵기 계수. 0.5가 표준이며 1이면 최대 굵기, 0이면 윤곽선이 없습니다.

 

G와 A가 윤곽선의 굵기 제어에 대한 변수값입니다. R은 '조명과 쉐이딩 1'에서도 언급한 것으로 그림자 판정에 대한 값입니다. B는 배면법을 써서 윤곽선을 팽창시킬 때 시점 대비 얼마나 깊게 하는지를 설정하는데, 이것을 크게 잡으면 팽창된 윤곽선이 앞부분에 가려져 윤곽선이 연해집니다. 이는 머리나 코 등에서 주름처럼 보이는 윤곽선이 나오는 걸 막기 위한 것이라 합니다.

 

103.jpg

 

실제 모습

 

104.jpg

 

윤곽선의 Z 오프셋을 하지 않은 상태

 

105.jpg

 

오프셋이 들어간 상태

 

"포스트 이펙트를 쓰지 않은 이유는 이번처럼 선 굵기의 강약 제어를 하기 어렵다고 생각했기 때문입니다. 이 배면법을 통핸 선을 그려내는 구조는 아티스트가 3D 모델 제작 단계부터 실제 게임까지 얼마나 선이 나오는지를 조정할 수 있어, 모델의 조정과 윤곽선의 수준을 동시에 작업할 수 있는 방버입니다."라고 이시와타리는 설명합니다.

 

여기서 말하는 포스트 이펙트란, 렌더링 결과에 픽셀 쉐이더로 실시간으로 수정 묘사를 집어넣는 것입니다. 구체적으로는 렌더링 결과의 심도 값 차이를 감지하거나, 화소 단위의 시선 벡터와 면의 방향인 법선 벡터의 값 차이를 감지해 윤곽선 픽셀을 결정하는 것입니다. 이 방법은 배면법이 지오메트리 부하가 너무 크다고 판단할 경우 쓰는 경우가 많으며, 최근에는 GRAVITY DAZE에서 배경 3D 모델의 전용 렌더링 방법으로 쓴 바 있습니다.

 

106.jpg

 

GRAVITY DAZE

 

107.jpg

 

캐릭터 모델은 배면법, 배경은 포스트 이펙트로 구현했습니다.

 

 

윤곽선의 비밀 2. 모토무라 라인의 개발

 

길티기어 Xrd-SIGN에서는 윤곽선을 표현할 때, 옷이나 엑세서리가 파인 부분, 솔기, 근육의 모양 등에 또 다른 묘사 방법을 썼습니다. 모토무라는 여기에 대해 이렇게 설명합니다.

 

"3D 구조적으로 움푹 파이는 부분처럼 매변법으로는 윤곽선을 그리지 못하는 곳이 존재합니다. 그런 곳은 텍스처 맵핑으로 주입할 수밖에 없지만, 일반적인 텍스처 맵핑은 카메라 줌 인으로 확대했을 때 어긋나게 되고, 매면법으로 만든 예쁜 육곽선과 격차가 두드러집니다. 그래서 텍스처 해상도에 의존하지 않는 예쁜 선분을 어떻게 그려낼 것인지, 텍스처 맵핑에서 어긋나는 건 어떤 상황인지를 연구했습니다."

 

그리고 그 결과 나온 것이 개발 팀에서 모토무라 라인이라 부르는 독특한 묘사 방법입니다.

 

108.jpg

 

배면법의 윤곽선만으로는 앞쪽에 표시되는 모델의 임의 부분에 선을 넣지 못합니다.

 

109.jpg

 

따라서 그 부분은 텍스처에서 선을 그려줄 필요가 있습니다. 근육을 보세요.

 

110.jpg

 

텍스처 맵핑의 경우 해상도가 정해져 있기에 줌인하면 화질이 떨어집니다.

 

111.jpg

 

반면 모토무라 라인으로 그린 선은 해상도를 바꿔도 선명합니다.

 

112.jpg

 

모토무라 라인의 와이어 프레임 표시

 

텍스처 맵핑의 계단 현상은 텍스처를 구성하는 픽셀인 텍셀이 특정 폴리곤에 단독 텍셀로 그려지면 밖으로 드러나게 됩니다. 인접 텍셀이 있을 경우엔 단일 텍셀만 사용할 때와는 다르게 사각형 텍셀 모양의 윤곽이 가려지기 때문에 계단 현상이 잘 보이지 않게 됩니다.

 

다만 인접한 텍셀이 있어도 대각선 위나 아래에 있다면 사실상 그 텍셀은 단일 텍셀과 같아 계단 현상이 보입니다. 즉 수평이나 수직으로 텍셀이 붙은 픽셀의 집합이라면  계단현상을 피할 수 있다는 이야기가 됩니다.

 

113.jpg

 

모토무라 라인을 위한 UV 맵 샘플

 

그래서 모토무라는 윤곽선으로 넣게 되는 실선을 수직과 수평선으로 만 구성한 텍스처를 만들어, 3D 모델에 적용할 때 대각선과 곡선이 필요하면 거기에 맞도록 맵핑되게 변형과 굴곡을 주는 형태로 UV 맵(3D 모델의 각 폴리곤이 텍스처 맵의 어디에 대응하는지를 나타낸 데이터)를 설계했습니다. 이 방법으로 텍스처 맵핑을 하면 해상도가 높지 않은 텍스처도 매끄러운 묘사가 가능하다네요.

 

아래는 실제로 게임에서 사용된 모토무라 라인 텍스처입니다. 모토무라 라인의 텍스처는 선 렌더링 정보만 있으면 되기에 조명 제어용 텍스처 맵의 알파 채널에 단색으로 저장됩니다.

 

114.jpg

 

모토무라 라인의 텍스처. 수직 방향의 라인이 그려져 있습니다.

 

115.jpg

 

모토무라 라인을 UV 맵핑.

 

116.jpg

 

모토무라 라인의 적용 결과.

 

117.jpg

 

모토무라 라인의 적용 결과를 확대. 계단 현상이 없습니다.

 

118.jpg

 

메쉬 구조. 그리려는 라인에 맞춰 토플로지가 설정돼 있습니다.

 

119.jpg

 

라인 텍스처입니다.

 

120.jpg

 

UV 맵핑.

 

121.jpg

 

적용 결과.

 

122.jpg

 

라인 텍스처는 계단 현상이 보입니다.

 

123.jpg

 

메쉬 구조. 라인과 상관 없는 토플로지가 설정돼 있습니다.

 

모토무라 라인은 직선밖에 없는 이상한 텍스처입니다. 허나 사각형 선으로 둘러싸인 텍스처가 근육의 돌출 부분에 적용될 경우 윤곽선으로 쓰기도 하지요. 근육의 모양은 타원형의 반구 형태인데, 모토무라 라인은 사각형 선을 타원형으로 맵핑에서 쓰게 됩니다.

 

사각형을 타원형으로 만들기에 사각형 내부의 공간은 상당 부분 확장되고 왜곡됩니다. 그래서 사각형 안에 글자나 모양이 있다면 그것도 당연히 왜곡되겠지만, 어디까지나 이 텍스처는 윤곽선의 추가를 위한 것이기에 그런 건 들어가지 않습니다. 밖으로 보이는 건 어디까지나 선 뿐이니 이 방법으로 인한 왜곡은 겉모양의 문제로 드러나지 않습니다.

 

당연히 왜곡이나 굴곡을 주는 UV 기반 텍스처 맵핑이 이루어져, 캐릭터와 시점에 움직이면 텍스처는 확대, 축소, 회전의 영향도 받습니다. 그렇게 되면 그려진 선도 그 영향을 받아 곡선이 되거나 대각선이 될 수 있지만, 텝스처 맵핑에선 Bilinear Filtering을 적용하기에 그러한 곡선과 대각선은 적당히 흐려지며, 그것이 바로 안티 엘리어싱 효과가 됩니다.

 

124.jpg

 

Bilinear Filtering 사용 안함

 

125.jpg

 

Bilinear Filtering 사용 함

 

모토무라 라인에서 그려지는 선도 굵기에 차이가 있습니다. 하지만 모토무라 라인의 텍스처 자체는 선의 굵기가 바뀌지 않으며 단일한 굵기의 직선이 그려져 있습니다. 텍스처의 선 두께가 변하지 않는데 어떻게 결과에선 굵기의 차이를 묘사할 수 있었을까요? 모토무라는 이렇게 설명합니다.

 

"모토무라 라인에서 쓰는 선의 굵기 변화는 UV 맵의 설계에서 가져오게 됩니다. 굵은 선을 그을 때는 텍스처에서 선을 표현하는 텍셀이 폴리곤 면에 대해 넓게 배정되는 UV 맵을 쓰도록 하면 됩니다."

 

126.jpg

 

굵기 설정 없음

 

127.jpg

 

UV 라인의 중첩으로 굵기를 변화

 

128.jpg

 

선을 자연스럽게 끊어지도록 할 수도 있습니다.

 

이 방법은 애니메이션 느낌을 내는 그래픽 외에 다른 게임에서도 응용할 수 있을 듯 합니다.

 

 

지오메트리의 데포르메. 대체되는 지오메트리

 

길티기어 Xtd-SIGN의 그래픽이 셀 애니메이션 느낌을 내는 건 툰 쉐이더를 썼기 때문만은 아닙니다. 그 이외의 부분에서도 다양한 가공이 들어갔기에 가능한 것입니다.

 

129.jpg

 

위 스크린샷을 봅시다. 배경에는 호텔과 길이 있지요. 이것들은 그냥 '배경 그림 한장'이 아니라 저마다 제각각의 3D 모델을 사용해서 표현한 것입니다. 싸우고 있는 두 캐릭터가 좌우로 이동할 때, 가까이 있는 곳은 많이 움직이고 멀리 있는 곳은 조금만 움직이게 됩니다. 이것은 2D 격투 게임 그래픽에서 흔히 쓰이는 배경의 표현이지만, 여기엔 한가지 비밀이 숨겨져 있습니다.

 

130.jpg

 

위 배경에 들어간 건물.

 

131.jpg

 

옆에서 보면?

 

132.jpg

 

배경에 들어가는 3D 모델에는 크게 왜곡된 원근 패스가 들어가, 안쪽은 작고 바깥쪽은 크게 묘사되도록 작업이 돼 있습니다. 일정 거리 이상 떨어진 원거리의 3D 모델은 패스가 들어가지 않지만 실제 크기보다 큰 폭의 소형화가 이루어져 있습니다.

 

이러한 모델링과 배치에는 이유가 있습니다. 패스를 넣지 않과 정확한 크기로 모델링을 하면 장면의 깊이를 표현할 수 없기 때문입니다. 먼 거리의 오브젝트를 줄이는 것도 같은 이유로서, 일부러 작게 만들었지만 멀지 않은 거리에 둔 이유는 스테이지에서 싸우는 캐릭터가 좌우로 이동할 때 맞춰 원거리 오브젝트도 좌우로 움직이기 때문입니다.

 

실제 크기로 만든 건물이 이 정도로 작게 보일만한 위치에 두려면 상당히 먼 곳에 배치해야 합니다. 그리고 먼 곳에 있는 물체는 시점이 좌우로 몇 m 정도 움직인다고 한들 거의 변하지 않습니다. 이렇게 되면 2D 격투 게임에 알맞는 배경의 움직임이 나오지 않게 됩니다. 그래서 캐릭터의 작은 움직임에도 배경이 확실하게 변하도록 작은 크기의 3D 모델은 캐릭터 가까이에 배치한 것입니다.

  

 

길티기어 Xtd-SIGN에서 원거리의 작은 배경이 움직이는 사례입니다.

 

133.jpg

 

여기까지 보면 이번에는 전투 도중에는 보이지 않는 앞쪽 부분은 어떻게 묘사되는지 궁금해할 분도 있겠는데. 이 부분은 제너럴 디렉터인 이시와타리 다이스케가 설명합니다.

 

"KO 장면에서는 카메라가 회전하면서 평소엔 보이지 않던 앞 부분도 카메라가 비추가 됩니다. 그래서 앞 부분도 카메라에 찍히는 범위에는 배경 오브젝트를 넣고 있습니다. 그리고 컷씬에선 일부 2D 배경을 쓰기도 하구요. 카메라 워크에 따라 2D 배경을 움직일 때는 2D 배경 자체를 TV 애니메이션처럼 처리하는 경우가 있습니다."

 

134.jpg

 

이런 장면이 있습니다.

 

135.jpg

 

다른 각도에서 보면 이렇습니다.

 

136.jpg

 

카메라의 줌 인. 배틀 스테이지의 앞부분도 모델링돼 있습니다.

 

배경에 서 있는 캐릭터들 중에서 배틀 스테이지에 가까이 서 있는 것은 3D 모델링으로 만들었지만, 멀리 있는 건 그냥 애니메이션으로 그렸다고 합니다.

 

게임에서 조작하게 되는 메인 캐릭터가 4만개의 폴리곤으로 모델링됐다는 건 1부에서 말했으나, 일반적인 3D 그래픽 기반의 게임 캐릭터와는 운용 방법이 다릅니다.  

 

일반적인 3D 그래픽에서 게임 캐릭터는 모델 안의 뼈대를 움직이고, 이것의 껍질에 해당하는 3D 모델이 쫓아가는 구조로 자세를 잡고 변형을 하거나 애니메이션을 구현하게 됩니다.

 

길티기어 Xtd-SIGN에서도 기본적인 액션은 그런 방법을 쓰지만. 머리카락이 변하는 공격 액션은 그런 방법을 쓸 수 없기 때문에, 일부 특수 상황에선 3D 모델의 부위를 일부 바꿔서 표현하게 됩니다.

 

137.jpg

 

이 캐릭터의 앞섶이 벌려진 건 추가 3D 모델을 가져옵니다.

 

138.jpg

 

139.jpg

 

140.jpg

 

머리카락이 다양한 형태로 변하면서 공격하는 캐릭터.

 

141.jpg

 

142.jpg

 

추가 부분을 준비해서 그걸로 바꿔 표현합니다.

 

143.jpg

 

그 이유를 아트 디렉터 겸 치프 애니메이터인 사카무라 히데히코는 이렇게 설명합니다.

 

"각 캐릭터의 움직임은 셀 애니메이션에 알맞고 역동적인 표현을 할 수 있도록 독특한 제어를 하고 있습니다. 일반적인 3D 게임 그래픽과는 달리 길티기어 Xtd-SIGN의 캐릭터는 얼굴의 눈, 코, 입이 크게 움직이는 등, 현실에선 있을 수 없는 신축/확대 등도 벌어지게 됩니다. 이렇게 하는 이유는 단 하나. 게이머에게 멋진 게임 그래픽을 보여주기 위함입니다. 이것이 바로 길티기어 Xtd-SIGN 그래픽의 정의입니다."

 

144.jpg

 

어느 방향에서 봐도 무난한 표정입니다.

 

145.jpg

 

초기 이미지 설정화대로 표현을 할 수 없는 경우가 많습니다.

 

146.jpg

 

그래서 눈, 코, 입의 위치와 각도를 조정합니다. 카메라에서 봤을 때 이미지가 나는 것을 추구함으로서 캐릭터의 효과적인 연출을 합니다.

 

길티기어 Xtd-SIGN에 등장하는 캐릭터는 일반적인 3D 게임 캐릭터와 같은 뼈대가 들어가 있지만, 그 뼈대를 움직이는 방법에 상당히 높은 자유도가 있습니다. 예를 들어 눈은 얼굴 안을 꽤 자유롭게 이동하고, 입은 얼굴의 크기가 바뀔 정도로 변할 수 있습니다. 손발도 자유자재로 움직이지요. 이것은 우리에게 친숙한 애니메이션적이고 공격적인 표정을 표현하기 위함입니다.

 

동그란 눈이나 화가 났음을 나타내는 마크 같은 만화적인 기호 표현은 이 시스템에도 대응할 수 없습니다. 그래서 그런 만화적인 표현이 필요할 때는 특정 부위 파츠의 교환, 혹은 파츠 추가, 텍스처 표현 등의 방법으로 그려내고 있습니다. 이시와타리는 이렇게 설명합니다.

 

"손발을 내미는 등의 일부 포즈는 화각 조정만으로는 역동적인 표현을 할 수 없습니다. 앞으로 나온 손을 크게 보여주면 원근감을 강조하기 위해 화각을 넓히면서 안쪽의 얼굴이 너무 작아지기도 합니다. 그래서 손을 크게 보이도록 할 때는 3D 모델의 팔을 뻗어 손을 카메라에 가까이 가도록 하고 있습니다. 한마디로 길티기어 Xtd-SIGN에서는 카메라 앵글은 바꾸지 않고 캐릭터 모델이 화각을 따로도록 했습니다."

 

147.jpg

 

파이널 컷

 

148.jpg

 

파이널 컷을 실현하기 위한 체격 변경

 

"하지만 이렇게 캐릭터 모델을 부위별로 확대/축소하고 뼈대를 신축시키는 방법은 표준 상태의 언리얼 엔진 3에선 실현할 수 없었습니다." (사카무라)

 

149.jpg

 

리드 프로그래머인 카유미 타쿠로

 

"격투 게임에서 액션에 따라 특정 부위나 자세를 강조하는 건 자주 있는 일입니다. 주먹을 내뻗는 액션에선 주먹을 약간 크게 표현하고 이는 발차기를 할 때도 마찬가지입니다. 이러한 표현을 위해 필요한 뼈대의 x, y, z축을 따로따로 확대 축소처리하는 걸 언리얼 엔진 3는 지원하지 않았습니다."

 

"언리얼 엔진 3는 원래 실사와 같은 게임 제작을 위해 만들어진 게임 엔진입니다. 뼈대를 3개의 좌표에서 개별적으로 자유자재로 확대 축소하는 비현실적인 표현은 필요하지 않았을 수도 있겠습니다." (야마니카 타케시)

 

"표준 상태의 언리얼 엔진 3는 1개의 변수를 3개의 축에 동시에 적용해 뼈대를 확대, 축소하는 표현을 지원하긴 합니다. 이걸 사용하면 2등신 캐릭터를 만들 순 있네요." (모토무라 C 준야)

 

150.jpg

 

게임에서 쓰는 캐릭터.

 

151.jpg

 

2등신 캐릭터. 이것은 언리얼 엔진 3의 기본 기능으로 만든 게 아니라 아크 시스템 웍스가 언리얼 엔진 3에 맞춰 3축을 개별적으로 확대 축소하는 기능 확장으로 실현한 것입니다.

 

152.jpg

 

특정 부위만 확대한 사례. 실제 게임에서 쓰는 파이널 컷입니다.

 

153.jpg

 

이건 확대를 하지 않은 경우.

 

길티기어 Xtd-SIGN에서 효과적인 애니메이션을 제작하기 위해선 뼈대의 3개 축을 개별적으로 확대 축소할 수 있는 시스템이 절대로 필요하다고 애니메이션 담당인 사카무라가 주장했습니다. 리드 프로그래머인 카유미는 언리얼 엔진 3를 개조해서 이 구조를 구현했다고 말하는데요. 이건 언리얼 엔진 3의 소스가 공개됐기에 가능한 것이라 말합니다.

 

처음에는 뼈대를 넉넉하게 만들어 뼈대 자체를 움직이는 게 어떠냐고 카유미가 사카무라에게 제안했는데, 사카무라는 이를 반박했습니다. 거기에 대한 두 사람의 설명을 봅시다.

 

"몬스터의 특정 부위를 크게 늘리거나 줄이는 표현은 일부 언리얼 엔진 3 개조 버전에서 구현된 바 있습니다. 하지만 이건 어디까지나 일부 캐릭터를 위한 것이구요. 길티기어 Xrd-SIGN의 경우 모든 등장 캐릭터에게 이 표현이 필요했습니다. 무엇보다 팔다리에 이 구조를 모두 넣을 경우 필요한 뼈대의 수가 4배로 증가한다는 계산이 나왔거든요." (사카무라)

 

"이 계산을 알고 나서 기겁했습니다. 4배는 아무래도 무리니까요." (카유미)

 

그 결과 카유미는 언리얼 엔진 3를 개조해서 뼈대의 3축을 개별적으로 확대-축소할 수 있도록 만들었습니다. 게다가 실제 제작 단계로 이행할 때까지 이 구조를 사용해 손발을 간편하게 확대, 축소, 신축할 수 있는 커스텀 인터페이스도 제작했습니다. 그래서 팔다리의 조작은 이 커스텀 인터페이스를 이용해 손발의 확대, 축소, 신축의 조정을 하고 모션을 만들게 됐습니다.

 

154.jpg

 

모션의 설정 작업 중에 프리뷰 화면에서 손발을 확대 축소하는 경우.

 

155.jpg

 

소프트이미지의 작은 창에서 숫자를 조절하는 것만으로 특정 축의 크기를 변경할 수 있습니다.

 

"뼈대의 3개 축을 개별적으로 확대-축소하는 처리 시스템을 힘들게 만들었지만, 나중에 등장한 언리얼 엔진 4에서는 이게 표준 기능으로 구현됐습니다. 뭐 우리 말고도 이게 필요하다고 말하는 사람들이 많았나 보지요." (카유미)

 

 

3D 모델링한 이펙트 모음

 

필살기에 딸려 나오는 특수 효과도 일부 예외를 제외하면 상당수가 3D 모델링한 것입니다. 구체적으로는 연기, 화염, 각종 섬광, 가드 이펙트가 있는데요. 이시와타리는 그 이유를 이렇게 설명합니다.

 

"일부 장면에선 카메라가 3D로 움직이는 연출이 있지만, 효과가 별로 멋이 없다고 생각했기에 이펙트도 3D 모델로 만들기로 했습니다."

 

이것은 상당히 힘든 기술입니다. 말은 쉽지만요. 아래에 나온 연기 모양의 이펙트를 보면 유체 애니메이션같다고 생각하실 수도 있겠으나, 실제로는 아티스트가 1장 1장씩 모델링한 것입니다. 폭발의 연기 역시 그렇게 보이도록 아티스트가 1장 1장씩 만든 것입니다.

 

156.jpg

 

연기 효과

 

157.jpg

 

리모델링된 3D 데이터이기에 카메라를 움직이면 바로 형태가 바뀝니다.

 

158.jpg

 

점프 시 생기는 연기의 와이어 프레임  

 

"원래는 여러 구형 모델을 뼈대에 넣어 움직이도록 실험하기도 했지만 마음에 들지 않았고.. 결국 노가다로 넣게 됐습니다. 그림자를 조종하는 캐릭터인 자토는 기술에 따라 그림자가 녹아들어가는 움직임이 있는데, 자토의 캐릭터 모델을 변형하기도 하고 그림자가 녹는 효과를 내는 모델로 바꾸기도 했습니다."

 

159.jpg

 

자토의 그림자 모델. 모션을 넣기 전입니다.

 

160.jpg

 

모션이 들어간 그림자 모델.

 

161.jpg

 

3D 모델임을 증명하기 위해 각도를 변경.

 

그리고 지금 소개한 효과 중에서 연기 등의 순수 효과에 조명은 들어가지 않습니다. 그림자는 텍스처에 넣은 것이지요. 윤곽선 처리도 들어가지 않았습니다. 불꽃이나 섬광 등이 발광 계열 효과는 빛을 내는 것처럼 보이지만 실제로는 주변을 밝히진 않습니다. 이는 2D 격투의 경우 효과에 따라 주변이 변하면 게임 플레이에 차질을 줄 수 있기 때문입니다. 반면 그림자 등 캐릭터에 딸린 효과는 조명이 들어갑니다. 3D 효과의 채용은 앞으로도 신중하게 검토해 나갈 것이라 하네요.

 

 

샐 애니메이션 같은 움직임을 만들어 내는 리미티드 애니메이션

 

툰 쉐이더란 이름은 꽤나 널리 알려진 것입니다. 그럼에도 불구하고 길티기어 Xtd-SIGN을 처음 본 사람은 이 그래픽이 3D 기반임을 알아차리지 못하는 경우가 상당수입니다. 그 이유 중 하나는 길티기어 Xtd-SIGN의 그래픽이 다소 부드럽지 않고 애니메이션처럼 움직였기 때문인데요.

 

드림캐스트로 세가가 2000년에 출시했던 제트 세트 라디오나, Ubisoft가 2003년에 출시한 XII처럼 과거에도 툰 쉐이더를 쓴 게임은 다수 존재했으나, 3D 그래픽이기에 매초 30컷이나 60컷 등 나름대로 부드러운 움직임을 보였습니다. 그 이유는 어디까지나 3D 그래픽을 기반으로 해서 그렇습니다. 이것을 애니메이션 느낌으로 그려내는 것이니 캐릭터가 움직이면 동영상으로 프레임이 생성되는 건 당연하다 할 수 있겠습니다.

 

그러나 아크 시스템 웍스는 이러한 부드러움이 길티기어에 맞지 않는다고 판단했습니다. TV 애니메이션을 비롯한 셀 기반 애니메이션은 1초에 8장이나 12장으로 구성됩니다. 그래서 TV 애니메이션에서 2D로 그린 캐릭터와 CG 기반 메카가 같이 나오는 장면을 보면, 1초당 8장으로 움직이는 캐릭터와 1초당 60장으로 움직이는 메카에서 부드러움의 차이를 체험하고 위화감을 느끼는 경우도 있습니다.

 

가끔 TV 애니메이션의 오프닝 송이나 엔딩에서 나오는 풀 CG 캐릭터가 춤을 추는 것도, 애니메이션 본편과 다르게 부드러운 움직임을 보이기에 묘한 위화감을 느끼는 경우도 있을 것입니다. 어쩌면 셀 기반 애니메이션에 익숙한 사람일수록 애니메이션 스타일의 그림이 부드럽게 움직이는 데 위화감을 느낄 수도 있겠습니다. 이 점에 대해 사카무라는 이렇게 설명합니다.

 

162.jpg

 

"우리는 1초 당 60장을 그려내는 애니메이션의 3D 그래픽 시스템을 채택하면서 작화 애니메이션의 프레임을 나누기로 했습니다. 길티기어 Xrd-SIGN의 컷 신에선 샐 애니메이션의 8~12컷보다 약간 많은 15컷을 기본으로 합니다. 전투 장면의 모션은 기술 성능과 직결되기에 1개의 자세를 몇 프레임으로 표시하냐는 스펙에 맞춰 스크립트에서 개별 지정합니다. 각 자세의 표시 프레임 시간은 일정하지 않고 기술마다 2F, 3F, 3F, 1F, 1F, 2F, 2F, 3F, 4F"(1F≒ 16.67ms)가 되는 식이네요."

 

애니메이션 업계에서는 디즈니처럼 24장으로 그려내는 걸 풀 애니메이션이라 부르며, 같은 프레임을 연속 표시해 1초 당 8~12컷을 넣는 걸 리미티드 애니메이션이라 부릅니다. 그럼 길티기어 Xtd-SIGN의 애니메이션도 리미티드 애니메이션 시스템이라 할 수 있을 것입니다.

 

리미티드 애니메이션과 평범한 3D 게임 그래픽의 애니메이션은 제작 스타일이 다릅니다. 일반적인 3D 게임 그래픽의 캐릭터 애니메이션은 캐릭터 모델 내부에 넣은 뼈대의 궤도를 만드는 식이 됩니다. 궤도를 만들 때는 고차 곡선 함수를 넣거나 모션 캡처에서 얻은 데이터를 쓰기도 하지요. 그에 비해 길티기어 Xrd-SIGN의 리미티드 애니메이션은 캐릭터를 조금씩 움직여 한장 한장 자세를 만드니 클레이 애니메이션과 비슷합니다.

 

"초기에는 고차 곡선 함수를 이용해 1초 당 60장의 풀 프레임으로 캐릭터를 움직이고, 60장의 애니메이션에서 일부 프레임을 빼는 방법도 시험해 봤습니다. 하지만 그냥 프레임이 줄어든 3D 그래픽처럼 보였을 뿐이네요." (사카무라)

 

 

풀 애니메이션과 리미티드 애니메이션의 차이. 앞의 5번이 풀 애니메이션, 뒤의 5번이 리미티드 애니메이션입니다.

 

실제 제작에선 우선 그림으로 콘티를 짭니다. 여기에는 필살기가 60프레임으로 구성, 30프레임이 지나면 주먹을 뻗어 이 시점에서 공격 판정이 발생, 등의 격투 게임에 필요한 스펙도 들어가 있습니다. 그리고 이 그림 콘티를 전달받아 만든 애니메이션이 프레임별 캐릭터 모델의 포즈를 결정하는 것입니다.

 

163.jpg

 

메이의 필살기를 그린 콘티.

 

164.jpg

 

20장, 54프레임 등의 정보도 써져 있습니다.

 

아크 시스템 웍스는 2D 격투 게임의 액션을 조정하는 데 이력이 나 있기에, 캐릭터의 자세를 잡는 건 곡선 함수 등의 산술적인 움직임 생선에 의존하지 않고 직접 수작업으로 처리합니다.

 

 

위에 나온 그림 콘티를 기반으로 만든 20개의 프레임을 2초씩 표시하는 슬라이드 쇼.

 

리미티드 애니메이션인데 초당 60프레임으료 표시하는 건, 이 영상이 초딩 60프레임이라는 것으로 실제 애니메이션에서 프레임 업데이트 속도는 앞서 말한대로 표시 프레임 간격입니다. 예를 들어 2프레임으로 설계된 자세가 1초당 60프레임(1프레임 당 16.67ms)의 표시 시스템에선 하33.33ms 동안 표시된다는 것입니다.

 

반면 캐릭터가 점프했을 때 포물선 궤도의 움직임이나 장품 등의 움직임은 60fps로 갱신됩니다. 또 게이머의 커맨드 입력은 1/60초 간격으로 바아들이게 됩니다. 이시와타리씨는 이렇게 보충 설명합니다.

 

"컷 씬에서 보기 좋도록 프레임마다 자세를 잡을 때, 캐릭터 모델의 각 부위별 위치나 해당 캐릭터 전용 광원 위치를 한컷식 조정하고 있습니다. 카메라가 캐릭터를 한바퀴 돌아나가는 애니메이션의 경우 프레임마다 코의 위치를 조정하기도 합니다."

 

길티기어 Xrd-SIGN의 독특한 그래픽 표현은 선진 기술뿐만 아니라 이러한 숙련된 애니메이션 센스 축적이 없으면 실현할 수 없었다고 할 수 있겠습니다.

 

 

메이의 일격 필살기로 확인하는 리미티드 애니메이션

 

 

게임 시스템을 2D 격투답게 만들기 위한 방법 1. 충돌 판정의 설정과 3D 볼륨의 흡수

 

165.jpg

 

3D 그래픽을 도입해서 2D처럼 보이도록 만들기 위해 여러 노력을 했고, 그 결과 2D 그래픽처럼 착각할 수 있는 수준까지 만드는 데 성공했습니다. 그러나 개발팀은 여기에 만족하지 않고 게임 플레이 감각을 2D 격투 게임처럼 만들기 위해 더욱 개선했는데요. 여기에 대해 디렉터인 야마나카 타케시는 이렇게 설명합니다.

 

"2D 격투 게임의 충돌 판정 데이터는 우리가 지금껏 만들어 온 역대 2D 격투 게임과 마찬가지로 2D 직사각형 영역에서 설정합니다. 길티기어 Xtd-SIGN의 그래픽은 3D지만 게임성은 2D 격투 게임이기에 일반적인 3D 게임처럼 공이나 직육면체, 캡슐 같은 입체적인 충돌 판정을 쓰진 않습니다."

 

166.jpg

 

충돌 판정 영역. 구체적으로는 공격을 받았을 때 타격을 받는 것으로 판정하는 역역, 그리고 적과 접촉했을 때 타격을 주는 공격 영역을 설정할 때는 저 위에서 말한대로 아크 시스템 웍스의 자체 툴인 콜리전 설정 도구를 썼습니다. 여느 2D 격투 게임과 마찬가지로 직사각형 형태네요. 길티기어 Xrd-SIGN은 리미티드 애니메이션 시스템에 의해 만든 캐릭터의 모션을 한장한장의 2D 그래픽으로 간주해 거기에 설정 툴을 적용, 2D의 충돌 판정 영역을 설정했습니다.

 

다만 여기에는 한가지 해결해야 할 점이 있습니다. 3D 그래픽은 특정 시점에서 본 시야를 사각형 화면으로 잘라내 표시한 결과입니다. 하지만 이 시야는 우리가 의식할 순 없어도 둥근 공 모양의 내벽에 전개되는 현태가 되는데요. 여기서 문제가 되는 건 이 시야를 사각형에 표시했을 때 보이는 방법입니다. 백미러나 메르카토르 도법을 보면 원형을 사각형으로 투사할 때 왜곡이 생긴다는 걸 알 수 있지요.

 

167.jpg

 

실제로 길티기어 Xtd-SIGN에서도 캐릭터를 렌더링하기만 하면 화면 좌우 끝애서 캐릭터가 다수 뚱뚱해 보이고, 가운대로 오면 말라 보이게 됩니다. 이걸 그대로 두면 앞서 설명한 2D 데이터에 설정한 충돌 판정 영역은 캐릭터의 화면 내 위치에 따라 어긋나게 됩니다.

 

168.jpg

 

이 차이를 해소하기 위해서는 캐릭터가 서 있는 화면의 위치에 따라 충돌 판정 영역을 적절하게 조율하거나, 캐릭터가 서 있는 화면 위치에 따라 캐릭터의 몸집이 달라지는 현상을 막아, 충돌 판정 영역과 항상 일치하도록 만들어야 합니다.

 

길티기어 Xrd-SIGN의 개발 팀은 이 두가지 방법 중 후자를 골랐습니다. 2D 격투 게임에서 캐릭터가 서 있는 위치에 따라 외형이 달라지면 안되니까 어찌보면 당연한 선택이라 할 수 있겠습니다. 또 다른 3D 그래픽 기반의 2D 격투 게임인 스트리트 파이터 IV 시리즈도 길티기어 Xrd-SIGN과 같은 방법을 썼습니다.

 

그럼 어떻게 캐릭터의 몸집을 조정했을까요. 3D 모델을 2D 화면에 그릴 때 실시하는 3D->2D 투영 방법을 연구해서 이루어졌습니다. 3D->2D 투영에는 가까운 것이 크고 멀리 있느느 게 작아 보이는 투시 투영, 그런 차이가 생기지 않는 평행 투영이 있는데 여기에선 투시를 30%, 평행을 70% 정도 조합한 하이브리드 투영 방식을 채택했습니다. 이걸로 캐릭터의 몸직이 위치에 따라 변하지 않게 됐고, 화면의 어느 위치건 일정한 크기를 유지할 수 있게 됐습니다. 이시와타리는 이렇게 보충 설명합니다.

 

"엄밀히 말하면 하이브리드 투영은 세로 방향에도 적용해야 하지만, 적용하지 않아도 가로 방향만큼 치명적이진 않으며 테스트 플레이어도 위화감을 느끼지 못했기에 넣지는 않았습니다."

 

169.jpg

 

투시 투영 100%의 화면

 

170.jpg

 

충돌 판정 영역

 

171.jpg

 

평행 투영 100%의 화면

 

172.jpg

 

충돌 판정 영역

 

173.jpg

 

투시 투영 30%, 평행 투영 70%로 조합한 화면

 

174.jpg

 

충돌 판정 영역

 

"또 도입하지 않으면 안 되는 게 두 캐릭터가 겹치는 상황에서 처리하는 방법입니다. 셀화-스프라이트-에서는 위에 그린 캐릭터가 아래쪽이 그려진 캐릭터를 덮어버립니다. 하지만 3D 그래픽은 캐릭터마다 입체적인 크기가 있으니 두 캐릭터의 거리가 가까워지면 한쪽 캐릭터의 팔이 튀어나와 상대 캐릭터에 박히게 됩니다. 이를 피하기 위한 방법을 생각해야 했습니다."

 

그래서 공격 쪽의 캐릭터를 그려낼 때 심도 값만 3D 공간에서 시점 쪽으로 1m 가량 움직여 그러한 중복이 발생하지 않도록 했습니다. 공격 쪽 캐릭터는 공격받은 캐릭터와 3D의 선후 관계를 무시하고 심도 테스트에서 항상 패스하도록 그려낸다는 것입니다.

 

175.jpg

 

심도 조정 전의 캐릭터 렌더링.

 

176.jpg

 

Z 버퍼. 2개의 캐릭터가 중앙에서 서로 엉켜 있습니다.

 

177.jpg

 

심도 조정 후의 캐릭터 렌더링.

 

178.jpg

 

Z 버퍼. 자연스럽게 겹쳐 있습니다.

 

"서로 싸우는 두 캐릭터는 3D 좌표를 처리할 때 하나의 Z축 위에서 맞붙게 됩니다. 렌더링할 때만 다르게 조정하는 것이지요. 두 팔로 상대를 잡아 던지는 기술의 경우 던지는 캐릭터의 두 팔 사이에 던져지는 캐릭터가 들어가도록 조정하기도 했습니다. 일부 불꽃 효과로 이걸 살짝 덮어서 속이기도 했지만요."

 

179.jpg

 

두 캐릭터의 대치 상태.

 

180.jpg

 

카메라를 움직여 봤습니다. 캐릭터가 동일한 축에 있음을 알 수 있습니다.

 

 

전투 장면에서 동영상을 회전시킨 결과입니다.

 

이러한 처리 계통으로 거의 모든 상황에서 부자연스러움이 사라졌으나, 키가 큰 캐릭터처럼 깊이 방향으로 큰 캐릭터들이 밀착됐을 경우엔 두 캐릭터가 서로 박혀있는 경우가 보이기도 합니다. 하지만 게임 플레이에 지장이 없다고 판단해서 그건 그대로 뒀다고 하네요.

 

 

게임 시스템을 2D 격투답게 만들기 위한 방법 2. 게이지의 표시와 캐릭터의 반전 처리

 

2D 격투 게임으로서 쉬운 플레이를 중시한 화면 기능 추가 중에는 체력 등의 각종 게이지를 그려내는 것이 있습니다. 게이지는 텍스처 렌더링한 것을 평평한 폴리곤에 붙인 것인데, 이것은 싸우는 캐릭터의 뒤쪽에 해당되는 Z 버퍼에 배치됩니다. 그래서 캐릭터가 높게 점프해서 게이지와 겹치면 게이지가 캐릭터 뒤에 오도록 그려집니다. 다만 공중 발사 공격을 시작하거나 카메라 앵글이 바뀔 때는 게이지가 앞에 그려진다네요.

 

181.jpg

 

리드 모델러 겸 테크니컬 아티스트인 모토무라 C 준야는 이렇게 설명합니다.

 

"시각이 회전하는 것처럼 카메라 앵글이 대담하게 바뀌는 연출에선 게이지가 배경에 박혀 있을 경우 간섭이 생기게 되니, 게이지가 캐릭터 뒤에 놓이는 특수 처리를 무효화하고 캐릭터 앞쪽으로 오게 합니다. 이는 카메라 앵글 연출이 들어가 있을 때 게임 플레이 자체는 일시적으로 중단되기에 게이지가 전면에 배치되도 플레이어에게 스트레스를 주지 않는다는 판단에서 나온 것입니다."

 

182.jpg

 

배틀 장면에서 게이지는 캐릭터 뒤로 갑니다.

 

183.jpg

 

카메라 앵글이 바뀔 때는 앞에 표시됩니다.

 

현실에서 두 사람이 상대를 마주보며 왼쪽 어깨를 앞으로 내밀고 있는 것을 측면에서 본다면, 오른쪽 사람은 가슴을 카메라에 보이는 자세로, 왼쪽 사람은 등을 카메라로 향한 자세가 됩니다. 그러나 2D 격투 게임의 경우 캐릭터가 서 있는 위치에 따라 자세가 변하게 된다면 게임 플레이가 어려워집니다.

 

따라서 2D 격투 게임은 서로 좌우 대칭으로 표시하게 되는데요. 기존의 2D 격투 게임에서 이것은 단순히 도트 그림으로 묘사한 스프라이트를 좌우 반전해서 표시하는 것 뿐이었습니다. 그럼 3D 그래픽으로 구현한 길티기어 Xrd-SIGN에서도 스프라이트를 반전하는 것 같은 표시를 할 수 있을까요?

 

184.jpg

 

사실 캐릭터 모델은 좌우로 선대칭이 되게 반전하는 것 뿐이라면, 그 3D 모델을 세로축(Y축)에 선대칭이 반전해(3D 모델을 구성하는 버텍스의 X 좌표값의 부호를 바꿔) 그려내는 것 만으로 충분합니다. 물론 조명 결과도 반전시키기 위해선 앞서 소개한 캐릭터 전용 광원도 3D 모델의 반전에 맞춰 반전해야 되겠지요.

 

185.jpg

 

이때 문제가 되는 건 일부 캐릭터의 옷에 쓰여진 글자입니다. 캐릭터 중 하나인 솔의 벨트에는 FREE라고 쓰여져 있는데, 캐릭터의 3D 모델을 단순하게 반전시키면 글자 역시 뒤집어지게 됩니다. 실제 게임에선 이를 피하기 위해, 캐릭터를 반전했을 경우 글자가 그려진 부분의 텍스처 맵핑용 UV 맵을 전환, 글자를 항상 텍스처 맵핑하도록 했습니다. 3D 모델을 반전했을 때도 문자 텍스처는 반전하지 않도록 한 것입니다.

 

"문자의 텍스처의 경우 다른 기술을 더해서, 텍스처의 선명함을 2배로 높이고 베이스 텍스처 합성하는 구조를 도입했습니다. 디자인한 텍스처의 밝기를 0.5배해서 저장하기에, 이를 2배로 하면 1.0배가 돼서 디자인대로 텍스처가 적용되는 것입니다. 이 때 텍스처 이미지의 밝기가 0.5를 초과하면 바탕색보다 밝아집니다. 이 구조를 잘 연구하면 입체 디자인의 그림자 문자 같은 표현을 간편히 할 수 있는 것이지요." (모토무라)

 

186.jpg

 

솔의 문자 텍스처. 바탕색에 해당되는 부분이 회색입니다.

 

문자의 텍스처는 반투명 종이같은 1장의 폴리곤을 3D 모델의 표면에 이어 붙이는 방식입니다. 프로모델에 씰이나 데칼을 붙이는 것과 같다고 생각하면 될 것입니다. 이 구조는 원래 옷감과 기초로서의 기본 텍스처와, 글씨를 표현하기 위한 텍스처를 나눠 충분한 해상도를 확보하기 위해서 도입한 것이었다고 하네요.

 

187.jpg

 

그림자 문자 텍스처

 

데칼에 해당하는 문자에 텍스처를 그릴 때 바탕 부분과 어떻게 합치는지가 중요한데, 길티기어 Xrd-SIGN에서는 곱셈 혼합 응용에 속하는 x2 곱하기 혼합식을 씁니다. Dest를 베이스 텍스처, 소스를 문자 텍스처라 하면 계산식은 이렇게 됩니다.

 

Dest×Source+Source×Dest=결과적으로 곱셈의 2배

 

이 경우 텍스처 내용보다 2배의 값을 바탕에 곱셈하는 것이기에 0.5 미만에서 어두움, 0.5에서 투명, 0.5에서 밝음이라는 결과가 나옵니다. 이러한 혼합 방법은 언리얼 엔진 3에 표준으로 들어간 방법은 아니고 개발팀에서 추가한 것이라네요.

 

그림자와 문자를 간단하게 표현하려면 문자의 밝은 부분을 나타낸 텍스처와 그림자 부분을 나타낸 텍스처를 각각 텍스처 맵핑해야 합니다. 그러나 이 기술을 쓰면 싱글 패스 텍스처만으로 실현할 수 있습니다.

 

 

중요 부분에서 효과적으로 쓰이는 포스트 이펙트

 

 최근의 리얼 3D 계열 게임 그래픽은 다양한 포스트 이펙트를 구현하는 추세입니다. 그에 비해 셀 애니메이션 같은 효과를 내는 길티기어 Xrd-SIGN의 경우 상대적으로 효과가 화려하진 않습니다. 그러나 포스트 이펙트가 쓰이지 않는 건 아닙니다.

 

앞서 말한대로 길티기어 Xrd-SIGN에서는 FXAA로 계단 현상을 줄이는데 FXAA는 포스트 이펙트에 속합니다. 또 길티기어 Xrd-SIGN은 렌더 타겟으로 알파, R, G, B가 각각 16비트 부동소수점 형식의 64비트 버퍼를 도입해 HDR 레이아웃을 지원하는 파이프라인을 내장, 고휘도 효과를 내는 라이트 블룸 효과도 쓰이고 있습니다.

 

188.jpg

 

FXAA를 사용한 경우

 

189.jpg

 

사용하지 않은 경우

 

190.jpg

 

포스트 이펙트를 사용한 경우

 

191.jpg

 

사용하지 않은 경우

 

"최근 애니메이션에서도 이러한 라이트 블룸 효과는 널리 쓰이고 있으니 위화감은 없다고 생각합니다. 그 밖에 디퓨전 효과도 포스트 이펙트에 들어갑니다." (이시와타리)

 

"디퓨전은 명암이 확실하게 두 값으로 나뉘는 느낌의 애니메이션에 부드러운 느낌을 더하는 데 도움이 됩니다. 라이트 블룸이 밝기 1.0 이상에 걸리는 데 비해 디퓨전은 휘도가 낮은 곳에서도 효과가 나타납니다." (모토무라)

 

라이트 블룸과 디퓨전은 밝기가 넘처 흐르는 효과를 내지만, 저마다 다른 계통의 필터링으로 구현하는 것입니다. 구체적으로는 라이트 블룸 필터를 적용한 뒤에 디퓨전 필터를 적용하는 것입니다. 디퓨전은 산란 방식이기에 어느 정도 밝은 부분에 대부분 적용되는 편입니다. 다만 이 효과는 게임 플레이에 영향을 주기에 포스트 이펙트는 컷 씬에 주로 쓰인다고 하네요. 재질에 따라서 밝기 1.0 이상을 준 텍스처도 있다고 합니다.

 

192.jpg

 

라이트 블룸 사용함

 

193.jpg

 

사용하지 않음

 

194.jpg

 

디퓨전 사용함

 

195.jpg

 

사용하지 않음

 

196.jpg

 

발광 텍스처를 사용한 렘리절 발렌타인

 

197.jpg

 

발광 텍스처를 사용한 포템킨

 

 

마지막 

 

지금까지 길티기어 Xrd-SIGN에서 쓰인 그래픽 기술을 확인했습니다. 완성된 최종 게임 화면을 보면 자연스러운 2D 그래픽처럼 보이기에 3D 그래픽 기반임을 깨닫지 못하는 사람도 많습니다.

 

실제 개발 쪽에선 정말 3D 그래픽 시스템에서 2D 격투 게임 그래픽을 재현할 수 있을지 걱정했지만, 개발이 끝났을 땐 이게 3D 그래픽 기반인지 사람들이 알아볼 수 있을지를 걱정하게 됐다고 하네요. 개발 팀은 좀 더 3D 그래픽에서만 가능한 연출을 게임 시스템에 도입하고 잎었지만, 2D 격투 게임으로서 플레이하기 쉽고 위화감이 없어야 한다는 걸 우선해서 지금과 같은 형태가 됐다고 합니다.

 

198.jpg

 

개발팀은 길티기어 Xrd-SIGN 프로젝트를 통해 3D 그래픽을 이용한 2D 그래픽의 표현에서 방대한 노하우를 축적했습니다. 또한 이 방식에는 아직 개척하지 못한 표현 영역이 있음을 실감했으며, 앞으로도 이 계통해서 기술 개발을 실시하고 이후의 차기작에서도 유용하게 사용할 것이라고 합니다.

 

3D 그래픽의 연구 분야는 NPR(Non Photo Realistic) 표현이나 스타일라이즈드 렌더링(Stylized Rendering)등, 비 사실적인 분야가 있지만 일본 애니메이션 느낌에 특화한 것은 아직 많지 않습니다. 이 분야를 개발할 때는 일본 애니메이션의 스타일을 이론적으로 분석할 능력과 지식이 필요합니다. 그런 의미에서 길티기어 Xrd-SIGN의 개발 팀은 여기에 적임이라 할 수 있겠습니다.

 

2D 격투 게임 외의 용도에도 응용하는 등, 신기술 개발뿐만 아니라 기술의 응용력도 높여 놀랄만한 작품이 나오길 기대해 봅니다.

 

소스:

http://www.4gamer.net/games/216/G021678/20140703095/

http://www.4gamer.net/games/216/G021678/20140714079/

기글하드웨어(http://gigglehd.com/zbxe)에 올라온 모든 뉴스와 정보 글은 다른 곳으로 퍼가실 때 작성자의 허락을 받아야 합니다. 번역한 뉴스와 정보 글을 작성자 동의 없이 무단 전재와 무단 수정하는 행위를 금지합니다.