스프라이트 애니메이션 미리보기

그리드로 보면 멀쩡한 시트도 움직이면 튀거나 미끄러지거나 버벅일 수 있습니다. 수정할 때마다 엔진을 열어 확인하는 건 느립니다. 이 미리보기는 설정한 FPS와 픽셀 퍼펙트 확대로 시트를 재생하고, 프레임 간격을 확인하는 어니언 스킨, 대기 동작용 핑퐁, 여러 애니메이션이나 방향이 담긴 시트를 위한 행별 재생을 제공합니다.

애니메이션 미리보기 사용 방법

1. 스프라이트 시트(그리드는 자동 감지), 여러 프레임 PNG, 또는 애니메이션 GIF를 넣으세요.
2. 필요하면 행과 열을 고치세요. 여러 행으로 된 시트는 행 하나를 골라 애니메이션이나 방향 하나만 재생할 수 있습니다.
3. FPS를 정하세요. 미리보기에는 대부분의 엔진이 요구하는 프레임당 밀리초도 표시됩니다.
4. 화살표 키로 프레임을 하나씩 넘기고, 어니언 스킨을 켜서 이전 프레임을 보고, 핑퐁도 시도해 보세요.
5. 픽셀 퍼펙트 배율로 확대하고 배경을 바꿔 어두운 배경, 밝은 배경, 초록 배경에서 스프라이트를 확인하세요.
6. 같은 속도, 핑퐁, 배경으로 GIF를 내보내세요.

결과물

• 프레임 단위 이동과 단축키를 지원하는 1–60 fps 실시간 미리보기.
• 투명 또는 단색 배경에 1×–8× 배율로, 개발 일지나 스토어 페이지에 바로 쓸 수 있는 애니메이션 GIF.

지원 엔진

• 여기서 보기 좋았던 FPS를 Godot(SpriteFrames speed), Unity(Sample Rate), GameMaker(sprite speed), Phaser(frameRate)의 애니메이션 속도로 쓰세요.
• 행별 재생은 대부분의 엔진이 4방향·8방향 시트를 저장하는 방식과 같습니다. 방향 하나당 행 하나입니다.

게임을 만들며 얻은 팁

• 걷기 사이클은 보통 8–12 fps, 달리기는 12–16 fps, 대기는 4–8 fps가 자연스럽습니다.
• 어니언 스킨은 이전 프레임을 파란색으로 보여 줍니다. 두 프레임 사이에 팔다리가 크게 튄다면 중간 프레임을 추가하세요.
• 캐릭터가 미끄러진다면 프레임 기준점이 서로 다른 것입니다. 스프라이트 시트 슬라이서에서 아래 정렬로 다시 자르세요.
• 밝은 배경에서도 확인하세요. 검정 위에서 괜찮던 어두운 외곽선이 어두운 게임 맵에서는 사라질 수 있습니다.

활용 사례

• 엔진에 가져오기 전에 애니메이션 타이밍 확인하기.
• 아티스트나 에셋 팩에서 받은 시트 검토하기.
• SNS 게시물이나 피치 덱용으로 시트를 GIF로 만들기.
• 8방향 캐릭터의 방향을 행별로 나란히 비교하기.

자주 묻는 질문