Dead Cells의 3D 파이프라인, 단계별로
Dead Cells는 손으로 그린 애니메이션처럼 보이지만, 캐릭터는 3D로 애니메이션을 만들고 작은 픽셀 아트 프레임으로 렌더링한 것입니다. 아티스트가 2018에서 그 방법을 설명했습니다. 이 방법이 무엇을 하는지, 왜 통하는지, 여러분의 모델로 같은 일을 하는 방법을 정리했습니다.
아티스트가 설명한 파이프라인
2018년 1월, Motion Twin에서 1년 동안 Dead Cells의 유일한 아티스트였던 Thomas Vasseur는 Gamasutra(현 Game Developer)에 “Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells”를 기고했습니다. 단계는 다음과 같습니다.
- 먼저 픽셀 아트 모델 시트. 캐릭터의 기본 2D 시트를 그린 뒤, 그것을 바탕으로 3ds Max에서 3D 캐릭터와 뼈대를 만들고 FBX로 내보냈습니다.
- 아주 단순한 모델. 게임 속 캐릭터 키가 겨우 50 픽셀 정도라서, 정교한 3D 모델에 시간을 쓸 가치가 없었습니다.
- 작게, 안티에일리어싱 없이 렌더링. 자체 프로그램이 메시를 아주 작은 크기로 안티에일리어싱 없이 렌더링해 픽셀화된 느낌을 냈습니다.
- 2D처럼 키 프레임으로 애니메이션. 공격은 포즈 투 포즈로 만들었습니다. 먼저 키를 되도록 적은 프레임으로 타이밍을 잡고, 그다음에야 키 앞이나 뒤에 중간 프레임을 넣었으며, 키와 키 사이에는 넣지 않았습니다.
- 모든 프레임을 노멀 맵과 함께 내보내기. 프레임마다 노멀 맵과 함께 PNG로 저장해, 게임이 간단한 툰 셰이더로 조명을 줄 수 있었습니다.
이 방법이 통한 이유
딥 다이브는 이유를 분명히 밝힙니다. 모든 프레임을 다시 그릴 필요가 없었습니다. 애니메이션 하나를 여러 모델에 재사용할 수 있었습니다. 갑옷 조각은 그것이 보이는 프레임을 전부 다시 그리는 대신 3D 모델에 붙여서 추가했습니다. 옛 모델과 부품을 재활용해 새 몬스터를 만들었는데, 그는 이것이 워크플로에서 가장 쓸모 있는 요령이며 수백 시간을 아껴 주었다고 말합니다.
무엇보다 다시 찍기가 쉬워졌습니다. 게임플레이 프로그래머가 공격의 타이밍을 바꾸거나 무기를 느리게 하면, 그는 타임라인에서 키를 옮기고 다시 렌더링하면 됐습니다. 손으로 그린 애니메이션이라면 같은 변경이 다시 그리기를 뜻하고, 대개는 그냥 하지 않았을 것입니다.
Pixor로 같은 일 하기
Dead Cells의 렌더러는 자체 제작이었고 공개된 적이 없습니다. Pixor는 별도의 앱으로, Blender에서 리깅했거나 Mixamo에서 받았거나 무료 라이브러리에서 가져온 어떤 모델이든 같은 단계를 처리합니다.
측면 뷰 카메라. 장면 단계에서 아웃라이너의 남 카메라를 클릭하고 게임을 플랫포머로 설정합니다. 오른쪽을 보는 측면 뷰이고, 방향은 하나이며 왼쪽은 좌우 반전합니다. 무기를 든 캐릭터라면 너비와 높이를 64 또는 96 픽셀로 올리세요. 스프라이트 크기 가이드가 고르는 데 도움이 됩니다.
작고 선명하게 렌더링. Pixor는 각 프레임을 스프라이트 자체의 픽셀 격자에 그리며, 기본값은 안티에일리어싱 없는 가장자리(--aa 0)입니다. 색은 팔레트의 램프 안으로 제한되고, 모든 프레임이 같은 미터당 픽셀 배율과 한 픽셀에 고정된 피벗을 쓰므로 캐릭터가 둥둥 떠다니지 않습니다.
작은 렌더가 아니라 하나의 룩. Dead Cells는 조명과 툰 셰이더에 의존했습니다. 스타일 단계에서 selout 프리셋은 명암 띠, 색조 이동 램프, 선택적 외곽선을 제공하며, 띠가 프레임마다 안정적으로 유지되어 달리기에서도 깜빡이지 않습니다.
포즈 투 포즈. 에셋 단계에서 스프라이트 노드의 남길 프레임은 클립의 포즈에서 골라낸 스마트 프레임을 그 수만큼 남기고, 각 프레임을 다음 프레임까지 유지합니다. 이것이 포즈 투 포즈 컷입니다. 스윙의 극점은 남고 부드러운 중간 프레임은 사라집니다.
노멀 맵. 내보내기에 노멀 맵(--export normal)이나 조명 키트(--export light-kit)를 추가하세요. 조명 키트는 Godot, Unity, GameMaker에서 노멀로 스프라이트를 비추면서도 빛을 받은 모든 픽셀이 자기 색 램프 안에 머물게 합니다. 팔레트에 맞는 조명을 참고하세요.
갑옷과 무기. 소품은 본에 붙입니다. 손에 든 검, 머리에 쓴 투구 같은 것입니다(--prop sword.glb:hand.r). 모든 클립이 그 소품을 함께 가져갑니다.
애니메이션 재사용. 같은 뼈대를 쓰는 다른 파일의 클립은 --anim으로 추가하거나, 모델 옆에 model@clip.fbx 형식의 파일로 두면 됩니다. 모션 라이브러리의 클립 lib:idle, lib:walk, lib:run, lib:attack 등은 인간형 뼈대에 맞춰져 있어, 새 캐릭터가 애니메이션을 만들기도 전에 달리기와 공격을 갖게 됩니다.
명령줄에서
위의 기사를 빌드 스크립트가 만든다면 이렇습니다.
pxr render knight.glb --preset selout --camera platformer --size 96 \
--clip lib:run --clip lib:attack --smart-frames 8 --export png,json,normal그리고 다시 찍기: 3D 도구에서 클립의 키를 바꾸거나 여기서 프레임 수를 바꾸고 같은 줄을 다시 실행하세요. 모든 프레임이 같은 배율과 같은 피벗으로 나오므로, 새 시트는 옛 시트 자리에 그대로 들어갑니다. 같은 줄을 모델 폴더에 적용하면(pxr batch models/ --camera platformer --size 96) 캐릭터 전체가 하나의 룩을 갖게 됩니다.
그다음 손보기
Dead Cells의 프레임은 3D에서 마무리되었습니다. 그 위에 손으로 그린 디테일을 더하고 싶다면, Pixor는 액션마다 태그가 있는 .aseprite 파일을 쓰고, 다시 렌더링해도 칠한 레이어를 유지합니다. 손보고 다시 베이크하기를 참고하세요. 1990년대부터 지금까지 이 기법의 역사는 프리렌더 스프라이트에 있습니다.
질문
Dead Cells는 캐릭터에 3D 모델을 썼나요?
네. Motion Twin의 아티스트 Thomas Vasseur는 픽셀 아트 모델 시트를 바탕으로 3ds Max에서 캐릭터를 모델링하고 리깅했으며, 3D로 애니메이션을 만든 뒤 모든 프레임을 작게, 안티에일리어싱 없이, 노멀 맵과 함께 렌더링했습니다. 이는 2018 Game Developer 딥 다이브에 그가 직접 설명한 내용입니다.
Pixor는 Dead Cells가 쓴 그 도구인가요?
아니요. Dead Cells는 자체 제작 프로그램을 썼습니다. Pixor는 같은 일, 즉 3D 애니메이션을 넣으면 픽셀 아트 프레임이 나오는 일을 하는 별도의 앱이며, 어떤 glTF, FBX, OBJ, .vox 모델이든 처리합니다.
Dead Cells 캐릭터는 크기가 어느 정도였나요?
딥 다이브에 따르면 게임 속 캐릭터 키는 겨우 50 픽셀 정도였고, 그래서 3D 모델을 아주 단순하게 둘 수 있었습니다.