스프라이트 시트 기초: 프레임, 좌표, 애니메이션 속도
2D 게임에서 캐릭터가 걷고 뛰는 모습은 대부분 여러 장의 그림을 빠르게 넘겨서 보여 주는 방식이에요. 이 그림들을 한 장의 이미지에 모아 둔 것을 스프라이트 시트라고 해요. 이미지 하나로 관리하면 불러오는 시간이 줄고, 그래픽 카드가 한 번에 그릴 수 있어서 성능에도 좋아요.
프레임 크기를 먼저 정해요
가장 쉬운 방법은 모든 프레임을 같은 크기의 칸에 넣는 거예요. 예를 들어 32×32 칸에 걷기 4프레임을 가로로 붙이면 128×32 시트가 돼요. 칸 크기가 같으면 게임 엔진에서 가로 칸 수와 세로 칸 수만 알려 주면 바로 잘라 쓸 수 있어요.
칸 크기는 가장 큰 동작을 기준으로 정하세요. 칼을 휘두르는 동작이 다른 동작보다 넓다면 그 크기에 맞춰야 칸 밖으로 잘리지 않아요.
기준점(피벗)을 맞춰요
프레임마다 캐릭터 발 위치가 조금씩 다르면 애니메이션이 떨리는 것처럼 보여요. 보통 발밑 가운데를 기준점으로 정하고 모든 프레임에서 그 위치가 같도록 그려요. 크기가 제각각인 프레임을 쓸 때는 아래 가운데를 맞춰서 재생해 보면 떨림을 쉽게 찾을 수 있어요.
좌표 파일이 필요한 경우
프레임 크기가 다르거나 빈 공간을 줄이려고 빽빽하게 붙인 시트는 칸 계산으로 자를 수 없어요. 이때는 프레임마다 x, y, 너비, 높이를 적은 JSON 같은 좌표 파일을 함께 써요. 받은 시트에 좌표 파일이 없다면 투명한 부분을 경계로 프레임을 찾아 좌표를 만들어 주는 도구를 쓰면 돼요.
재생 속도는 8~12fps부터
도트 게임 애니메이션은 화면 주사율보다 훨씬 느리게 재생해요. 걷기는 보통 8~10fps, 숨쉬기 같은 대기 동작은 4~6fps, 공격처럼 빠른 동작은 12~15fps 정도에서 시작해 보세요. 프레임 수가 적을수록 느리게 재생해야 자연스러워요.
도트 그림은 필터를 꺼요
작은 도트 그림을 엔진에서 크게 키우면 흐릿하게 보일 때가 많아요. 텍스처 필터를 Point(필터 없음)로 바꾸고, 압축도 끄면 원래 도트가 또렷하게 보여요. 확대는 2배, 3배처럼 정수 배율로 하는 게 좋아요.
직접 만들어 보기
처음이라면 16×16이나 32×32 같은 작은 캔버스에서 2~4프레임짜리 간단한 동작부터 만들어 보세요. 랜덤 생성으로 기본 모양을 얻은 뒤 프레임을 복제해 조금씩 움직이면 금방 첫 애니메이션이 완성돼요.
프레임이 따로따로 있는 그림을 한 장의 시트로 합치고 싶다면 스프라이트 시트 패커를 쓰면 돼요.