3D에서 픽셀 아트로: 완벽 가이드

캐릭터를 걷기, 달리기, 공격, 죽음 사이클과 함께 8방향으로 손으로 그리면 프레임이 엄청나게 많아집니다. 작은 팀에게는 게임에서 가장 큰 아트 비용이 될 수도 있습니다. 그 프레임을 3D 모델에서 렌더링하는 것은 이 문제에 대한 오래된 해답입니다. 이 가이드는 그 아이디어의 유래, 효과가 있는 이유, 잘못되는 부분, 그리고 축소한 렌더가 아니라 픽셀 아트처럼 보이는 스프라이트를 얻는 방법을 다룹니다.

프리렌더 스프라이트의 짧은 역사

1994년 Rare는 Super Nintendo로 Donkey Kong Country를 출시했습니다. 캐릭터와 배경을 Silicon Graphics 워크스테이션에서 모델링하고 렌더링한 뒤, 콘솔의 작은 스프라이트와 제한된 색으로 줄였습니다. 그 기기의 어떤 게임과도 달라 보였고, 3D 파이프라인이 2D 게임을 만들어 낼 수 있음을 보여 주었습니다.

90년대 후반에 걸쳐 PC에서 프리렌더 스프라이트가 흔해졌습니다. Diablo(1996), Fallout과 Fallout 2, StarCraft, Age of Empires 모두 3D로 렌더링한 유닛과 캐릭터를 흔히 여러 방향으로 썼습니다. 모델은 공짜로 돌릴 수 있지만 그림은 그럴 수 없기 때문입니다.

이 기법은 Dead Cells(2018)에서 다른 형태로 돌아왔습니다. Motion Twin은 캐릭터를 3D로 애니메이션하고 작은 픽셀 아트 프레임으로 렌더링했으며, 2018년 Gamasutra(현 Game Developer) 기사 “Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells”에서 그 과정을 소개했습니다. 요점은 1994년과 같았습니다. 작은 팀이 모든 프레임을 그리지 않고도 매끄럽고 일관된 애니메이션을 얻는 것입니다.

프리렌더 스프라이트에서 더 읽을 수 있습니다.

3D에서 렌더링하는 이유

세 가지 이유가 계속 나옵니다.

• 모든 방향. 모델이 있으면 새 방향은 카메라 하나를 더할 뿐입니다. 4방향, 8방향, 16방향 모두 설정하는 수고는 같습니다.
• 일관된 애니메이션. 캐릭터의 비율이 모든 프레임, 모든 방향에서 같게 유지됩니다. 손으로 그린 스프라이트는 조금씩 어긋나지만 뼈대는 그렇지 않습니다.
• 수정이 쉽습니다. 갑옷 색, 스프라이트 크기, 팔레트를 바꾸고 다시 렌더링하면 됩니다. 손으로 그린 시트라면 막바지 수정은 수백 프레임을 다시 그려야 한다는 뜻입니다.

대가는 그냥 렌더링한 결과가 픽셀 아트처럼 보이지 않는다는 점입니다. 부드러운 셰이딩의 렌더를 줄이면 흐릿한 가장자리, 탁한 그러데이션, 거의 같은 수백 가지 색, 프레임마다 깜빡이는 픽셀이 생깁니다. 이 가이드의 나머지는 그 간극을 메우는 이야기입니다.

픽셀 아트로 읽히게 하는 것

픽셀 아트는 낮은 해상도보다 통제에 관한 것입니다. 모든 픽셀이 하나의 결정입니다. 렌더는 요청하지 않은 아주 작은 결정을 수백만 번 내리므로, 할 일은 그 결정을 되찾는 것입니다.

하나의 픽셀 배율

게임의 모든 것은 같은 픽셀 크기를 공유해야 합니다. 나무는 한 배율로, 캐릭터는 두 배 세밀하게 그리면 어긋남이 뻔히 보입니다. 픽셀 아티스트는 섞인 픽셀 크기를 믹셀이라고 부릅니다. 3D 파이프라인에서는 미터당 픽셀 배율 하나로 해결합니다. 2미터 기사는 언제나 같은 픽셀 수의 키이고, 옆의 상자도 비례가 맞습니다. 이 때문에 Pixor에서는 카메라에 고정된 픽셀/m를 설정하세요. 기본적으로는 카메라마다 스프라이트를 자기 크기에 맞춥니다.

고정된 피벗

캐릭터의 발이 프레임마다 다른 픽셀에 닿으면 애니메이션이 좋아도 게임에서 스프라이트가 떨립니다. 보통 두 발 사이에 있는 피벗은 모든 프레임과 모든 방향에서 같은 픽셀에 있어야 합니다. Pixor는 모든 프레임과 방향에서 피벗을 한 픽셀에 고정합니다.

제한된 팔레트와 램프

손으로 만든 스프라이트는 적은 색을 램프로 배열해 씁니다. 재질마다 어두운 색에서 밝은 색까지 짧게 이어지는 색들입니다. 색이 적으면 작은 크기에서도 형태가 또렷하게 읽힙니다. 렌더는 아무렇게나 고른 몇 가지 색이 아니라 팔레트로 줄여야 합니다.

색조 이동

좋은 램프는 어두워지기만 하지 않습니다. 단계마다 색조가 바뀌어, 보통 그림자에서는 차갑게, 빛에서는 따뜻해집니다. 이것이 색조 이동이며, 픽셀 아트가 회색으로 바랜 것이 아니라 칠한 것처럼 보이는 큰 이유입니다.

선택적 외곽선과 깔끔한 선

모든 것을 두르는 검은 선이 어울리는 스타일도 있지만, 많은 아티스트는 외곽선을 둘러싼 형태의 색으로 칠합니다. 그림자 쪽은 더 어둡게, 밝은 쪽은 더 밝게 하거나 아예 뺍니다. 이것이 셀아웃입니다. 선은 1픽셀 폭이어야 하고 겹친 “L”자 모서리가 없어야 하며, 칼날이나 지팡이 같은 얇은 부분은 끊기지 않고 깔끔한 1픽셀 선으로 남아야 합니다. 자세한 내용은 외곽선에서 보세요.

떠도는 픽셀도, 깜박임도 없이

어떤 형태에도 속하지 않는 외톨이 픽셀은 노이즈처럼 보입니다. 애니메이션에서 더 큰 문제는 깜박임입니다. 픽셀이나 선이 한 프레임 나타났다 다음 프레임에 사라지는 것입니다. 모델의 아주 작은 변화가 값을 임계값 바로 위나 아래로 밀기 때문에, 렌더는 둘 다 늘 만들어 냅니다.

의도치 않은 디더링 없음

디더링은 의도한 스타일일 수 있습니다. 쓴다면 모델이 움직일 때 패턴이 방충망처럼 표면 위를 기어다니지 않고 표면에 고정되어야 합니다.

파이프라인 단계별 설명

일반적인 과정과, 각 단계에서 Pixor가 맡는 부분입니다.

1. 모델

리그가 있든 없든 어떤 모델이든 됩니다. Pixor는 glTF와 GLB, FBX(Mixamo에서 받은 파일 포함), OBJ, MagicaVoxel .vox 파일을 읽습니다. 아주 정교한 모델보다 형태가 분명하고 재질이 뚜렷이 나뉜 단순한 모델이 더 좋은 스프라이트가 됩니다. 픽셀보다 작은 디테일은 어차피 사라집니다.

2. 방향마다 카메라 하나

방향 하나는 모델을 바라보는 카메라 하나입니다. 횡스크롤 게임은 하나면 되고, 탑다운과 아이소메트릭 게임은 4개나 8개를 원형으로 둘러 씁니다. 방향만큼 피치도 중요합니다. 측면 시점, 3/4 시점, 2:1 아이소메트릭 시점, 탑다운 시점은 각기 다른 게임에 어울립니다. Pixor에서는 방향 하나가 카메라 하나이며, 4개, 8개, 16개 원형으로 두르거나 원하는 각도에 둘 수 있습니다.

3. G-버퍼

완성된 이미지를 바로 렌더링하는 대신, 필요한 정보를 렌더링하세요: 각 픽셀의 평면 색, 표면이 향하는 방향(노멀), 카메라와의 거리(깊이), 속한 파츠나 재질. 이를 G-버퍼라고 합니다. 이후의 모든 단계가 여기서 출발하며, 그래서 나머지를 제어할 수 있습니다. 이 페이지 위쪽의 그림은 상자의 색, 노멀, 깊이, 그리고 완성된 스프라이트입니다.

4. 띠로 나뉜 빛

부드러운 음영이 몇 개의 평평한 명암 띠가 됩니다: 밝은 면, 중간, 그림자. 픽셀 아트는 보통 두세 개에서 네 개를 씁니다. 어려운 점은 모델이 움직일 때 명암 띠를 안정적으로 유지해, 거의 돌지 않은 표면에서 띠의 경계가 앞뒤로 튀지 않게 하는 것입니다. Pixor는 1~4개의 명암 띠로 음영을 넣고, 표면이 확실히 돌아갈 때까지 띠를 유지합니다.

5. 선

깊이, 노멀, 파츠 id로 실루엣, 파츠 사이의 안쪽 모서리, 표면이 접히는 주름을 찾을 수 있습니다. 각각 다르게 그릴 수 있습니다: 어둡게, 색 있게, 또는 아예 그리지 않게. Pixor는 실루엣, 안쪽 선, 주름 선을 별개의 종류로 다루며, 종류마다 자체 선택적 외곽선 설정이 있고, L자 모서리 없이 1픽셀 너비로 그리며, 가는 파츠는 1픽셀 선으로 유지합니다.

6. 팔레트

재질마다 각 명암 띠가 램프의 색 하나에 대응합니다. 도구가 모델의 색으로 램프를 만들게 하거나, 게임 전체가 공유하는 고정 팔레트를 강제할 수 있습니다. Pixor는 재질마다 색조 이동 램프를 만들고, 자동 팔레트, 내장 팔레트 일곱 가지 중 하나, Lospec .hex나 GIMP .gpl 파일, 또는 이미지에서 뽑은 팔레트를 쓸 수 있습니다. 인덱스 PNG를 쓰며, Game Boy, NES, PICO-8, TIC-80, C64 색 제한에 맞춘 콘솔 모드가 있습니다.

7. 정리

마지막 처리는 떠도는 외톨이 픽셀과 한 프레임에만 나타나는 선을 지웁니다. 손으로 만든 듯한 시트와 동영상 같은 시트의 차이가 여기서 납니다. Pixor는 이 정리를 별도 단계로 실행합니다.

8. 시트

프레임은 보통 액션과 방향마다 한 행으로 시트에 담기며, 엔진에게 각 프레임의 위치를 알려 주는 데이터가 함께 갑니다.

Pixor에서는 이 단계 하나하나가 스타일 그래프의 노드이므로, 어느 것이든 보고 바꿀 수 있습니다. 마음에 드는 룩은 키트로 저장해 프로젝트 전체에서 다시 쓸 수 있습니다. 내장 프리셋(clean, selout, retro4, flat, wireframe)은 출발점입니다.

크기와 방향 고르기

크기는 무엇보다 디자인의 선택입니다. 작은 스프라이트는 무리 속에서 읽기 쉽고 다듬는 비용이 적으며, 큰 스프라이트는 개성을 더 드러냅니다. 대략적인 기준:

• 16 px는 타일, 아이템, 아주 작은 캐릭터에 알맞습니다.
• 32 px는 탑다운과 플랫포머 게임에서 흔한 캐릭터 키입니다.
• 48~64 px는 얼굴, 장비, 표정이 풍부한 애니메이션을 넣을 공간을 줍니다.

주인공이 원하는 키가 되는 미터당 픽셀 배율을 고르고, 나머지는 모두 그에 따르게 하세요. 게임은 정수 배(2×, 3×, 4×)로 표시해 그림의 픽셀 하나하나가 화면에서 깔끔한 정사각형이 되게 하세요. 스프라이트 크기에서 더 자세히 다룹니다.

방향: 횡스크롤 게임은 한 방향(반대쪽은 뒤집기), 단순한 탑다운 게임은 넷, 대부분의 액션과 전략 게임은 여덟, 차량처럼 부드럽게 도는 것은 열여섯.

애니메이션

3D 애니메이션에는 모든 순간마다 포즈가 있습니다. 픽셀 아트 애니메이션은 프레임이 몇 개뿐이며, 그 프레임은 고르게 샘플링하는 것이 아니라 골라냅니다.

포즈의 극점과 홀드

가장 중요한 프레임은 극단입니다. 걷기의 접지 포즈, 점프의 정점, 칼이 맞는 순간. 좋은 스프라이트 애니메이션은 이를 남겨 조금 더 길게 홀드하고, 작은 크기에서 보탬이 안 되는 중간 프레임은 버립니다. 간격이 고른 프레임은 둥둥 떠 보이기 쉽습니다. Pixor의 스마트 프레임은 포즈의 극단을 골라 홀드합니다.

더 적은 프레임, 더 깔끔한 프레임

32픽셀에서는 6프레임이나 8프레임 걷기면 충분합니다. 프레임이 많을수록 깜박임이 생길 기회도, 손볼 일도 많아집니다. Pixor는 애니메이션 전체의 깜박임을 측정합니다.

애니메이션 가져오기

모델을 직접 애니메이션하거나, 함께 온 클립(또는 별도 클립 파일)을 쓰거나, 다른 리그의 클립을 리타깃할 수 있습니다. Pixor에는 간단한 액션(대기, 걷기, 달리기, 점프, 공격, 피격, 사망)과 소품·아이템용 오브젝트 모션(회전, 위아래 흔들기, 흔들기, 맥동)을 담은 모션 라이브러리도 있습니다.

손으로 다듬기

렌더는 일관된 프레임을 줍니다. 아티스트의 판단까지 주지는 않습니다. 좋은 결과 대부분은 깔끔한 바탕을 렌더링한 뒤 중요한 프레임을 손보는 데서 나옵니다. 더 분명한 얼굴, 공격 프레임의 더 강한 실루엣, 칼날의 하이라이트 같은 것이죠.

이 작업에는 보통 Aseprite를 씁니다. Pixor는 액션과 방향마다 태그가 붙은 .aseprite 파일을 내보냅니다. 모델이나 설정을 바꿔 다시 렌더링해도 손으로 그린 레이어는 해당 프레임에 남으므로, 다시 구워도 손본 작업이 버려지지 않습니다. Aseprite를 참고하세요.

엔진으로 내보내기

엔진은 프레임과 메타데이터를 원합니다. 흔한 대상:

• 프레임, 액션, 방향을 나열한 JSON 파일과 함께 PNG 스프라이트 시트.
• Godot 프로젝트용 Godot SpriteFrames.
• 미리보기, 상점 페이지, 소셜 게시물용 GIF 또는 APNG.
• 엔진에서 2D 스프라이트에 조명을 쓴다면 노멀 맵과 깊이 맵.

Pixor는 이 모두를 내보냅니다. 렌더링이 결정적이라 같은 모델과 설정은 언제나 같은 픽셀을 내므로, 시트를 언제든 놀랄 일 없이 다시 만들 수 있습니다. 내보내기와 내보내기 매뉴얼을 참고하세요.

써 보기

Pixor는 Windows와 Linux용 데스크톱 앱으로, 위의 각 단계를 오프라인에서 계정 없이 해냅니다. 생성형 AI는 들어 있지 않으며, 여러분이 고른 설정으로 모델을 렌더링합니다. 가격은 한 번 $19.99이고 모든 업데이트가 무료입니다. 작동 방식부터 시작하거나, 이렇게 렌더링한 스프라이트를 라이브러리에서 둘러보거나, 매뉴얼에서 모든 설정을 확인하세요.