October 24, 2018

BYU 학생들이 리듬과 격투를 접목해 개발한 'Beat Boxers'

저자: BYU Student Team

BYU에서 팀 기반 게임 제작

브리검 영 대학교(Brigham Young University)에서 약 20 명의 학생들로 구성된 팀이 해마다 비디오 게임을 제작합니다. 작년에 제작한 게임은 '비트 박서(Beat Boxers)'로, 2018 년 여름에 완성되었습니다.  이 게임은 E3의 그 유명한 칼리지 게임 콩쿠르(College Game Competition)에서 1위를 차지했죠.

매 여름, BYU에서는 애니메이션과 컴퓨터 공학 전공의 학생을 초청하여 브레인스토밍을 진행합니다. 그렇게 얻은 아이디어 중 하나를 다양한 예술 및 컴퓨터 공학 전공생의 다음 팀 프로젝트 과제로 선정합니다.

FEATURE_BeatBoxersInterview.jpg
BYU 학생인 버네사 파마(Vanessa Palmer)가 칠한 타깃 피스
 
2017년 당시 선정된 작품이 바로 ‘비트 박서’입니다. 이 퍼포먼스 배틀로얄 게임은 멋진 공연으로 스포트라이트를 독차지하는 게 핵심입니다. 해당 프로젝트는 아이디어를 추린 끝에 결국 주어진 세 가지의 기술 중 하나를 선택하는 방식의 격투 게임 형태로 자리 잡았습니다. 이때, 음악 비트에 맞춰 커맨드를 입력하면 더욱 강력한 효과를 발휘합니다. 또한, 플레이어는 비트마다 상대 플레이어의 기술을 이길 수 있는 기술을 적절하게 선택해야 합니다. 마치 연속으로 빠르게 진행되는 가위바위보 같은 느낌입니다.

본 프로젝트의 프로듀서와 디렉터를 포함한 모든 포지션은 학부 과정에 재학 중인 학생들이 맡았습니다. 또한, 비트 박서 아이디어를 제안한 학생은 프로그래밍 리드를 담당했습니다.

언리얼 엔진으로 행동에 옮기다

비트 박서는 단순히 게임 제작을 즐기기 위함이 아니라, 교육 목적으로 제작되어 학생들이 게임 제작 원리를 더 심도 있게 이해할 수 있도록 했습니다. 저희가 언리얼 엔진을 사용한 이유는 언리얼 엔진이 강력하고도 안정적인 패키지로서 프로페셔널해 보이는 결과물을 낼 수 있기 때문이었습니다. BYU 학생들은 전 세계에 있는 AAA급 스튜디오를 목표로 하기 때문에, 결과물의 비주얼이 매우 중요했습니다. 언리얼 엔진을 사용한 또 다른 이유는, 더욱 심도 있는 원리 지도에 유용했기 때문입니다. 예를 들면 학생들은 노드 네트워크 및 심화 기능을 활용하여 난제를 시험하고 해결할 수 있었습니다. 이렇듯 언리얼 엔진 4의 머티리얼 시스템은 학생들에게 익숙한 노드 네트워크와 절차적 워크플로에 기반을 두고 있었다는 점이 또한 장점으로 작용했습니다.

학생들은 여름 동안 언리얼 엔진 4 블루프린트를 사용하여 화이트박스 캐릭터 및 스테이지 디자인 여러 개를 반복 수정하며 프로토타입을 신속하게 제작했습니다. 이 덕분에 플레이어에게 선사할 경험과 그에 따른 디자인을 머릿속에서 더 수월하게 구체화할 수 있었습니다. 

Whitebox2.jpg
언리얼 엔진에서 구동 중인 ‘비트 박서’의 화이트박스 테스트 버전

‘비트 박서’는 격투 게임인 동시에 리듬 게임이지만, 두 게임의 메카닉이 각기 다른 탓에 두 요소가 잘 어우러질 수 있는 게임 플레이를 찾는 일이 관건이었습니다. 블루프린트 시스템 덕분에 게임 플레이 디자인을 다르게 하여 여러 개의 프로토타입을 쉽고 빠르게 만들 수 있었습니다. 심지어, 선임 디자이너가 블루프린트에서 게임 플레이에 변경 내역이나 추가 사항을 적용하는 속도는 저희가 C++에서 적용하는 것보다 빨랐습니다.
   
BeatBoxers_Screen1.jpg
최종버전 게임 플레이 스크린샷

컨트롤/게임 플레이

격투와 리듬 게임 간의 균형을 맞추는 일은 쉽지 않았습니다. 한쪽으로 치우치는 일이 없도록, 우선 격투 게임을 만든 후 리듬 게임 요소를 더하는 방향을 택했습니다.

테스트 플레이를 해본 결과, 게임의 전체 페이스가 리듬을 중심으로 진행되지 않는 한 플레이어들이 비트에 맞춰 공격하도록 유도하기가 쉽지 않다는 걸 알게 되었습니다. 이런 점을 감안하여, 커맨드를 입력하면 잠시 대기하였다가 비트에 맞춰 상대방과 동시에 공격이 들어가는 형태의 게임 디자인 방식을 채택하게 되었습니다. 가위바위보 방식의 무브셋 덕분에 콘트롤 체계는 격투 게임을 처음 접해본 시람들에게는 간단하면서도, 격투 게임 골수 유저들에게는 커맨드 입력을 기발하게 조합할 수 있는 여지를 남겨둘 수 있었습니다.
  
BeatBoxersBlueptint.jpg
플레이어 공격의 비트 적중 여부를 판별하는 논리 블루프린트

저희는 FMOD 플러그인을 활용하여 음악과 싱크를 맞추고, 비트에 따라 이벤트가 발동되도록 만들었습니다. 해당 이벤트를 타이머와 함께 사용하여 ‘비트 적중 창’이 활성화되거나 비활성화되게끔 설정했습니다. 비트 전후의 약 0.1초의 구간이 바로 ‘비트 적중’에 해당합니다. ‘비트 적중 창’이 활성화되면(어떤 타이머가 작동 중인지에 따라 결정됩니다), 이는 공격이 비트에 적중한 것을 의미하며 그렇지 않은 경우에는 놓친 것을 의미합니다.

캐릭터 디자인

일단 각 음악 장르를 의인화하여 뚜렷한 개성을 가진 매력적인 캐릭터로 만드는 작업부터가 난관이었습니다. 제일 먼저 개발한 캐릭터는 클래식 바이올린을 형상화한 마에스트라(Maestra)였습니다. 해당 캐릭터는 게임의 초기 아이디어 중 하나였던 콘셉트 스케치를 바탕으로 만들었습니다. 이로써 게임의 방향성이 조금씩 잡혀가자, 모두들 굉장히 즐거워했습니다. 마에스트라의 디자인은 몇 달 동안 여러 사람의 손길과 반복된 수정 작업을 거친 끝에 나온 결과물입니다. 그렇게 해서 마침내 E3 2018에서 선보였던, 늘씬하고 우아하지만 치명적인 적수로서의 모습을 갖추게 되었습니다. 언리얼 엔진 덕분에, 다른 팀원이 제작한 애셋과 모델을 함께 놓고 보았을 때 잘 어울리는지를 빠르게 시험해볼 수 있었죠. 저희는 언리얼 엔진으로 각 애셋을 가져와, 초기 단계에서부터 애셋을 한 공간에 놓고 확인했습니다.

BeatBoxers_CharacterComparison_1.jpg
콘셉트 아트(좌)와 언리얼 엔진 내 실제 구현 모습(우) 비교

두 번째 캐릭터는 마에스트라와 대조되는 모습이면서도 같은 세계에 속하는 이미지로 만들고 싶었습니다. 그래서 우락부락하고, 유쾌하며, 바위 같으면서도 스포트라이트를 너무 좋아하는 캐릭터라면 마에스트라의 슬림한 실루엣과 대비되면서도 게임에 통일감을 줄 수 있다고 생각했습니다. 이름은 귀엽게 리프(Riff)라고 지어주었습니다. 캐릭터를 전부 한꺼번에 개발하지 않고 한 명씩 차례대로 개발하는 프로세스를 거친 덕분에 더 많은 도움이 되었습니다. 캐릭터를 개발하며 발생한 문제를 한 팀에서 해결하고, 그렇게 얻은 시사점을 다음 캐릭터 팀에 전달함으로써 여러 팀이 같은 문제를 반복해서 해결하는 수고를 덜 수 있었기 때문입니다.

‘비트 박서’의 애셋에 텍스처를 적용하는 과정에서는 섭스턴스 페인터(Substance Painter)를 활용했습니다. 마에스트라의 나무 텍스처는 전부 절차적 생성 텍스처입니다. 반면, 눈썹 부분과 금빛 악센트는 수작업으로 제작하였습니다. 맵은 섭스턴스 페인터에서 기본 텍스처 맵으로 익스포트 한 후, 언리얼 엔진에서 셰이더 네트워크를 통해 프레넬(Fresnel) 등의 이펙트를 추가했습니다.

BeatBoxers_Character_Comparison_2.jpg
콘셉트 아트와 언리얼 엔진 내 실행된 모습 비교

리프와 마에스트라의 디자인은 각자 대표하는 장르의 핵심 요소가 잘 드러나도록 제작되었습니다. 캐릭터 모델링은 마야(Maya)와 지브러시(Zbrush)에서 진행한 후 섭스턴스 페인터에서 텍스처를 적용했습니다. 마에스트라는 총 37,670개의 트라이앵글로 구성되어 있으며, 리프는 29,747개입니다. 두 캐릭터 모두 하나의 UV 채널만을 사용합니다.

애니메이션

애니메이션의 경우, 저희는 캐릭터들이 격투하는 것 같으면서도 퍼포먼스를 행하는 것 같아 보이길 원했습니다. ‘스트리트 파이터(Street Fighter)’류의 게임을 여럿 참고하여 각 캐릭터마다 독특한 무브셋을 만들 방법을 찾았습니다. 또한, 콘서트장에 직접 가서 공연을 관람하며 관현악단의 장엄한 우아함과 록 콘서트에서 터져 나오는 거친 에너지가 본질적으로 어떤 차이를 갖는지 알 수 있었습니다. 이 모든 경험은 나중에 마에스트라와 리프의 무브셋을 만드는 데에 밑거름이 되었습니다.

격투 게임에 리듬 요소를 넣는 것은 상당히 까다로운 작업입니다. 게임의 요소 하나하나에 템포와 비트의 중요성이 부각되어야 했기 때문입니다. 이를 위해, 저희는 각 공격에 할당할 애니메이션 파일을 2개씩 제작했습니다. 타이밍과 포즈의 과장 수준을 계속 매만진 끝에, 플레이어가 비트에 맞춰 입력하면 그만큼 강렬하고 보기에도 재미난 기술 애니메이션이 구현되도록 했습니다. 플레이어가 비트를 무시하고 입력하면, 해당 기술의 약화된 버전인 두 번째 애니메이션이 발동됩니다(점수도 적게 받습니다). 이렇게 제작한 애니메이션은 당사의 유능한 프로그래머에게 전달하였고, 프로그래머는 각 파일을 노드 네트워크에서 연결하였습니다. 플레이어가 콤보를 달성하면 전환이 부드럽고, 비트에 맞추지 않고 커맨드를 입력하면 애니메이션이 자연스럽지 못하고 뚝뚝 끊기게 만들었습니다. 완성된 버전을 플레이해보면 아시겠지만, 왠지 모르게 멋진 퍼포먼스를 달성하고 싶은 마음이 저절로 생깁니다. 다들 이 점을 굉장히 흡족해했죠.

무브셋은 스테이트 간의 전환이 일어나는 플레이어 인풋 등, 특정 기준에 맞추어 스테이트 머신으로 구성했습니다.

경기장 환경

게임 내의 여러 애셋은 유연하고 재사용이 가능하도록 디자인되었습니다. 저희는 후디니(Houdini)를 사용해 복잡한 절차적 애셋을 구축한 후, 후디니 엔진(Houdini Engine)을 통해 언리얼 엔진으로 이식했습니다. 언리얼 엔진의 유연성 덕분에 후디니 플러그인을 활용할 수 있어 언리얼 에디터 내에 다양한 소스에서 가져온 컴포넌트를 막힘 없이 조정할 수 있었습니다.  또한, 경기장 내의 좌석과 발판처럼 복잡한 조각을 아트 디렉팅하는 일도 훨씬 수월하게 진행할 수 있었습니다.

라이팅

게임 내 라이트는 최소한으로 사용했습니다. 각 캐릭터마다 라이팅 채널을 통해 개별적으로 라이트를 받게 했습니다. 각 캐릭터의 라이트 설정 및 미세 조정을 개별적으로 설정할 수 있었기 때문에, 다른 캐릭터나 주변 환경까지 영향이 미쳐 빛으로 뒤덮어버리는 일은 피할 수 있었습니다.  또한, 각 캐릭터가 배경으로부터 두드러져 보여야 했기 때문에 배경 엘리먼트는 은은하게만 빛게끔 하고, 배경 라이트는 낮추고 포그를 더했습니다.  라이팅 조정 작업은 아트 리드와 함께했습니다. 반복 수정을 할 때마다 아트 리드가 매번 덧칠 작업을 해주었습니다.

이번 프로젝트는 특히 비주얼 측면에서 많은 찬사를 받았는데, 이는 언리얼 엔진의 뛰어난 아티스트 툴 덕분에 구현할 수 있던 부분입니다. 

관중

관중은 애니메이션을 텍스처에 저장한 하드웨어 인스턴스드 메시로 만들었습니다. 애니메이션은 셰이더의 버텍스 오프셋 정보를 거쳐 발동합니다.

일반적으로는 CPU가 GPU에 드로 콜을 제출해야 각 메시가 그려집니다. 하지만 이런 경우 CPU가 다음 콜을 제출하기도 전에 GPU는 이미 작업을 완료해놓은 경우가 있어 시간이 낭비될 수 있습니다. 반면 하드웨어 인스턴싱을 사용하면 GPU가 변환 매트릭스 배열을 저장하게 됩니다. 이에 따라 한 번의 드로 콜만으로도 GPU는 각 변환 매트릭스마다 모델을 한 번씩 그리게 됩니다.

BeatBoxers_Capture5.jpg
하드웨어 인스턴싱된 관중

하드웨어 인스턴싱의 단점은 컴퓨터에 이를 지원하는 그래픽 카드가 없는 경우, 혹은 스켈레탈 메시에 대한 경우에는 적용되지 않아 관중이 움직임 없이 천편일률적인 모습을 띄고 맙니다.

하드웨어 메시에 애니메이션을 입히려는 경우, 애니메이티드 스텔레탈 메시에서 시작해, 해당 메시 및 애니메이션을 프로세스 하면 됩니다. 그렇게 얻은 스테틱 메시는 매우 특정한 버텍스 컬러 데이터와 애니메이션이 반영된 텍스처, 그리고 복잡한 셰이더를 지니게 됩니다.
 
BeatBoxers_Capture7.jpg
텍스처 애니메이션 노드 네트워크
 
BeatBoxers_Capture8.jpg
텍스처 애니메이션에 컬러 채널을 사용한 경우

본 프로세스로 각 프레임의 바인드 포즈에서 각 버텍스 위치의 차이를 계산할 수 있습니다. 이와 같은 차이는 텍스처에 저장되어, 한 축은 시간(혹은 프레임)에, 다른 축은 버텍스 ID(각 버텍스에 부여할 고유 식별)에 해당하게 됩니다. 버텍스 ID 값은 모델의 버텍스 컬러 데이터의 RGBA 채널에 인코딩하였습니다. 그 후 버텍스 컬러 데이터에서 버텍스 ID를 디코딩해주는 셰이더를 작성합니다. 해당 셰이더로 경과 시간을 사용해 어떤 UV를 샘플링할 건지 판별하고, 텍스처를 샘플링해 각 버텍스를 얼마나 멀리 배치할 건지 알아내서 해당 값을 버텍스 오프셋에 입력합니다. 이때 sRGB는 비활성화하고, 가장 근접한 필터링을 사용해야 합니다. 또한, 버텍스 디스플레이스먼트를 버텍스 오프셋에 적용하기 전에 월스 스페이스로 변환해야 합니다. 다수의 애니메이션을 하나의 이미지로 합치려면 스프라이트 시트에 하듯이 서로 다른 애니메이션을 샘플링하도록 합니다.

BeatBoxers_Capture6.jpg
관중 캐릭터 애니메이션 텍스처의 스프라이트 시트 타임라인

관중 속 인물들을 다양하게 바꾸려면 언리얼 엔진의 인스턴스드 스테틱 메시 컴포넌트로 모든 인스턴스에 단일 랜덤 값을 부여하면 됩니다. 이때, 버텍스 오프셋으로 적용하기 전에 위치 경과를 로컬 스페이스에서 월드 스페이스로 위치를 변환해야 합니다(참고로 이 방법으로는 스케일링에 문제가 생길 수 있습니다). 노멀 또한 이상하게 설정되어 있을 겁니다. 이는 아직 스테틱 위치의 노멀이 적용되어 있기 때문입니다. 이 점을 수정하려면 애니메이션 중에 노멀 변화를 계산 후 두 번째 이미지(또는 동일 이미지의 다른 부분)에 저장하면 됩니다.

최적화

저희는 언리얼의 미세 조정 옵션과 강력한 툴을 사용해서 게임을 최적화하면서도 훌륭한 비주얼을 유지했습니다. 콜리전은 캐릭터 및 캐릭터가 서 있는 무대를 제외하고 전부 비활성화했습니다. 또한 배경 애셋은 스태틱 라이팅으로 설정했습니다.

또한, 관중에 적용된 포그 및 파티클 이펙트를 조정함으로써 게임 퍼포먼스를 높은 수준으로 유지할 수 있었습니다. 원래는 맵에 적용된 포그 이펙트만 세 가지가 있었습니다. 하지만 게임 중 뷰 앵글이 거의 변하지 않는 관계로, 최적화 담당 학생이 포그를 한 가지로 줄이는 대신 카메라 뷰에 담기게끔 늘렸습니다. 비록 다른 각도에서 보면 부족한 부분이 보이기는 했지만, 플레이어의 시점에서는 앞서 첫 번째 수정 작업 당시와 다를 바 없어 보였습니다.

마스터 머티리얼은 복잡도에 따라 저/중/고의 세 가지로 나눠볼 수 있습니다. 가장 단순한 머티리얼은 전체 관중 및 배경에 사용되었습니다. 여기에는 컬러 채널만 포함되었습니다. 중간수준의 머티리얼은 무대 및 세트 드레싱에 사용되었습니다. 이 머티리얼에는 컬러, 러프니스, 노멀, 메탈릭, 앰비언트 오클루전이 포함되어 있었습니다. 마지막으로 가장 복잡한 머티리얼은 오직 캐릭터에만 사용되었습니다. 여기에는 앞서 언급된 것들 외에도 색조 조절, 프레넬 이펙트 등 몇 가지가 더해졌습니다. 이로써 셰이더 복잡도 레벨을 전부 녹색 수준으로 유지할 수 있습니다.

특수 효과

이펙트는 수작업한 애니메이션 스프라이트 시트로 만들었습니다. 이후 언리얼의 캐스케이드 파티클 시스템으로 좌에서 우로 한 프레임씩 읽어들였습니다. 그렇게 해서 플레이어의 공격과 동작과 타이밍을 맞춰 게임 내 2D 애니메이션으로 재생되도록 설정했습니다. 이 프로세스 덕분에 저희가 생각했던 스타일에 맞게 이펙트의 디졸브, 셰이프, 페이싱을 구상하고 디자인할 수 있었습니다. 그리고 애니메이션에 스파크, 라이트, 힛 이펙트를 레이어링함으로써 3D 게임 플레이에 한결 부드럽게 통합할 수 있었습니다. 그 결과로 3D 이펙트보다 더 만화 같은 느낌의 이펙트를 얻을 수 있었습니다. 마치 ‘드래곤볼 파이터 Z(Dragon Ball Fighter Z)’나 ‘길티기어 Xrd(Guilty Gear Xrd)’에서 볼 수 있는 이펙트와 유사합니다. 플레이어의 비트 적중 여부에 따라 다른 이펙트가 발동되도록 설정했습니다. 

  
OffBeat.gifOnBeat.gif
좌측은 비트 적중 실패 이펙트, 우측은 비트 적중 이펙트.

결론

언리얼 엔진 덕분에 저희는 학생으로 구성된 팀임에도 전문적인 느낌의 콘텐츠를 신속하게 제작하고, 해당 콘텐츠가 잘 작동하게끔 최적화하는 방법을 익힐 수 있었습니다. 언리얼 엔진 인터페이스는 저희 아티스트들이 만든 작업물을 직접 올리기 수월할 만큼 접근성이 우수하면서도, 프로그래머가 게임 플레이를 커스터마이징해 저희가 원하던 경험을 만들어낼 수 있을 정도로 전문적이었습니다. 이런 점에서 반복해서 수정하고 다듬는 작업이 신속하게 진행될 수 있었으며, 이로써 저희는 결국 E3의 칼리지 게임 콩쿠르에 나갈 수 있었습니다. 팀원 모두 캘리포니아에서 열리는 E3 콘퍼런스에 참가할 기회를 얻어서 뛸 듯이 기뻐했습니다. 같은 업계 종사자들도 만나보고, AAA급 게임 스튜디오의 작업을 엿볼 수 있어 다들 설렜죠. 또한, 저희가 만든 ‘비트 박서’가 2018 칼리지 게임 콩쿠르에서 1등을 거머쥐게 되어 영광입니다. 프로그래머, 모델러, 텍스처 아티스트, 콘셉트 디자이너, 게임 플레이 디자이너, 로지스틱스 담당자 등 모두가 한 팀이 되어 저희가 즐겁게 플레이할 만한 게임을 제작했습니다. 여러분에게도 이 게임이 즐거운 경험이 된다면 좋겠습니다. 본 게임은 스팀(Steam)에서 무료로 다운받으실 수 있습니다.

 
크레딧

디렉터 - 데이비드 번험(David Burnham) 
프로듀서 - 제시카 러니언(Jessica Runyan)
디자인 리드 - 마이크 타운(Mike Towne)
아트 디렉터 - 버네사 파마(Vanessa Palmer)
음악 - 앨러스테어 쇼이어만(Alastair Scheuermann), 재럿 데이비스(Jarrett Davis)
음향 - 재러드 리처드슨(Jared Richardson), 댈린 프랭크(Dallin Frank)


제작자 (이하 학생들은 게임 제작에 여러 역할을 담당했습니다) 

시드니 애덤스(Sydney Adams)
다이애나라 바나나(Dyanara Banana)
페이지 콜드웰(Paige Caldwell)
앤드리아 다빌라(Andrea Davila)
제시카 다빌라(Jessica Davila)
데릭 드라이스데일(Derrick Drysdale)
와이엇 언쇼(Wyatt Earnshaw)
제다이 라이언(Jedi Lion)
섀넌 라이먼(Shannon Lyman)
코너 매튜슨(Connor Mathewson)
캘빈 맥머리(Calvin McMurray)
브레나 올드로이드(Brenna Oldroyd)
도 박(Do Park)
파린 푸리사트(Parin Phurisat)
로라 포터(Laura Porter)
알렉사 풀턴(Alexa Poulton)
앤드루 리오스(Andrew Rios)
패트릭 스펜서(Patrick Spencer)
조던 스튜어트(Jordan Stewart)
네이트 스위니(Nate Swinney)
세라 티페츠(Sarah Tippets)
제네사 웰커(Jenessa Welker)
웨이 웡(Wei Wong)