스프라이트 만들기 · 도트 애니메이션

스프라이트 캔버스는 나중에 줄일 그림이 아닙니다. 고른 크기가 곧 플레이어가 보는 해상도입니다. 16×16에서 캐릭터는 실루엣과 2도트짜리 눈이 전부라서 아이템, 아이콘, 작은 주인공에 어울립니다. 32×32에는 얼굴과 알아볼 수 있는 손, 음영 단계를 넣을 여유가 있습니다. 64×64는 일러스트에 가깝고, 애니메이션 한 프레임마다 32×32의 네 배 도트를 그려야 합니다.

크기는 넣고 싶은 디테일이 아니라 게임 속 다른 스프라이트에 맞춰 정하세요. 16도트 격자의 타일셋이라면 캐릭터 키는 16이나 32도트가 어울립니다. 스프라이트를 키워야 할 때는 크기 설정에서 그림을 원하는 변이나 모서리에 붙인 채로 넓힐 수 있고, 모든 프레임이 똑같이 바뀌어 애니메이션이 어긋나지 않습니다.

잘 만든 스프라이트는 대부분 4~16색입니다. 팔레트가 작으면 색마다 역할이 생깁니다. 외곽선, 기본색, 한두 단계의 그림자, 하이라이트. 기본색을 정했으면 옆의 "어둡게"·"밝게" 버튼으로 색 단계(컬러 램프)를 만드세요. 그림자는 색조를 살짝 파란 쪽으로, 하이라이트는 노란 쪽으로 옮기면 회색이 아니라 빛으로 보입니다.

외곽선은 어떤 배경 위에서도 스프라이트를 배경과 분리해 줍니다. 작은 스프라이트에는 진한 색으로 전체를 두르는 것이 가장 안전합니다. 큰 스프라이트는 감싸는 부분의 색을 따르는 외곽선(셀렉티브 아웃라인)을 쓰면 부드러워 보입니다. 모든 형태를 가장자리에서 안쪽으로 음영을 넣는 "필로우 셰이딩"은 형태를 납작하게 만들므로 피하세요. 빛은 한쪽에서 오고, 그림자는 반대쪽에 떨어집니다.

게임 애니메이션의 대부분은 짧은 반복입니다. 대기 중 숨쉬기나 들썩임은 4~6fps에 2~4프레임이면 됩니다. 걷기 동작은 보통 8~12fps에 4~8프레임으로, 발이 땅에 닿는 두 개의 접지 포즈와 그 사이의 통과 포즈로 이루어집니다. 공격이나 피격은 느린 예비 동작 한 프레임, 아주 빠른 동작 한두 프레임, 그 뒤에 멈춘 포즈로 만들면 잘 전달됩니다.

핵심 포즈(키 포즈)를 먼저 그리고 그 사이를 채우세요. 이때 쓰는 기능이 복제입니다. 지금 프레임을 복사해 움직이는 도트만 바꾸면 몸이 프레임마다 흔들리지 않습니다. 어니언 스킨을 켜 두면 이전 프레임이 빈 도트 아래로 흐릿하게 보여서, 팔을 다시 그리지 않고 한두 도트만 옮기면 됩니다. 포즈를 더 오래 멈추고 싶으면 그 프레임을 복제하세요. GIF에서는 모든 프레임이 같은 시간 동안 재생됩니다.

미리보기는 게임에서 쓸 속도로 확인하세요. 느리게는 부드러워 보이던 동작이 실제 속도에서는 덜컹거리는 일이 흔합니다. 해결책은 거의 언제나 프레임을 늘리는 것이 아니라 프레임 사이에 바뀌는 도트를 줄이는 것입니다.

스프라이트 시트는 애니메이션의 모든 프레임을 한 장의 이미지에 늘어놓은 것입니다. 이 도구가 내보내는 시트에는 프레임 사이에 여백이나 간격이 없어서, 어느 엔진이든 프레임 크기만으로 자를 수 있습니다. 8프레임짜리 32×32 스프라이트는 256×32 가로 한 줄, 또는 마지막 칸이 빈 3×3 격자로 내보내집니다.

엔진용으로는 1×로 내보내고 확대는 엔진에서 하세요. Godot에서는 텍스처 필터를 Nearest로 두어야 도트가 선명하게 유지됩니다. Unity에서는 Filter Mode를 Point (no filter)로, 압축을 끄고, Pixels Per Unit을 스프라이트 크기에 맞추세요. GameMaker에서는 가로 한 줄 이미지를 불러오고 프레임 수를 지정합니다. 투명한 도트는 투명한 채로 들어오므로 스프라이트를 어떤 배경에도 올릴 수 있습니다.

32×32 GIF를 원래 크기 그대로 올리면 썸네일보다 작고, 대부분의 사이트는 작은 이미지를 키울 때 흐리게 만듭니다. 대신 4×나 8×로 내보내세요. 도트 하나가 4×4나 8×8의 같은 색 블록이 되고, GIF는 이렇게 이어지는 같은 색을 아주 잘 압축하므로 파일은 여전히 작습니다.

GIF의 투명은 한 가지 색을 "표시 안 함"으로 바꾼 것이라, 일부 메신저나 SNS에서는 검정이나 흰색으로 보입니다. 배경을 고를 수 없는 곳에 올린다면 흰 배경으로 내보내세요.