스프라이트 시트 메이커

스프라이트 시트는 일의 절반일 뿐입니다. 엔진은 각 프레임이 어디에 있고 얼마나 지속되는지도 알아야 합니다. 이 메이커는 프레임을 그리드, 한 줄 스트립, 빽빽한 아틀라스로 패킹하고, 엔진이 실제로 가져오는 형식으로 그 데이터를 기록합니다. TexturePacker/Phaser JSON, Aseprite JSON, Godot 4 SpriteFrames 리소스, CSS, Unity 슬라이스 설정입니다. 프레임은 사람이 번호를 매기는 방식대로 정렬되어 walk_10이 walk_9 뒤에 옵니다.

스프라이트 시트 메이커 사용 방법

1. 프레임 PNG를 한 번에 모두 넣으세요. 이름의 자연 순서로 정렬되며, 언제든 더 추가할 수 있습니다.
2. 화살표로 순서를 바꾸고, 필요 없는 프레임을 지우거나, 순서를 뒤집으세요.
3. 레이아웃을 고르세요. 그리드(자동 또는 고정 열), 가로 한 줄, 세로 한 줄, 또는 투명 가장자리를 잘라낸 빽빽한 패킹이 있습니다.
4. 프레임 사이 패딩, 바깥 여백, 가장자리 익스트루전을 설정하세요. 대상 환경에 64, 128, 256 px 텍스처가 필요하다면 2의 거듭제곱을 켜세요.
5. 미리보기에서 애니메이션을 확인하고 FPS를 정하세요.
6. PNG와 데이터 파일 하나를 받거나, PNG와 모든 형식이 담긴 ZIP을 받으세요.

결과물

• 미리보기와 똑같은 투명 배경 PNG 시트.
• Phaser / TexturePacker JSON(hash와 array). 잘라낸 오프셋이 포함되어 빽빽하게 패킹한 프레임도 위치가 맞습니다.
• 프레임 태그와 지속 시간이 들어간 Aseprite JSON.
• AtlasTexture를 사용해 AnimatedSprite2D에 바로 쓸 수 있는 Godot 4 SpriteFrames .tres.
• 프레임마다 클래스 하나와 단계식 애니메이션이 있는 CSS 스프라이트, 그리고 Unity 가져오기 및 슬라이스 설정.

지원 엔진

• Phaser 3: this.load.atlas(key, 'sheet.png', 'sheet.json')로 불러온 뒤 프레임 이름으로 애니메이션을 만드세요.
• Godot 4: .tres를 PNG 옆에 두고 AnimatedSprite2D의 Sprite Frames에 지정하세요.
• Unity: 그리드 레이아웃은 설정 파일의 값으로 Grid By Cell Size 슬라이스를 하세요. Point 필터링에 압축 없음을 쓰세요.
• PixiJS, Defold, Cocos, Construct: TexturePacker JSON(hash)을 직접 또는 각자의 임포터로 읽습니다.

게임을 만들며 얻은 팁

• 캐릭터 애니메이션에는 균일한 프레임의 그리드를 쓰세요. 엔진의 그리드 슬라이서와 어니언 스킨 도구가 이를 전제로 합니다.
• 크기가 제각각인 이미지가 많은 아이템·UI 아틀라스에는 잘라내기와 함께 빽빽한 패킹을 쓰세요.
• 시트를 정수가 아닌 배율로 확대하거나 밉맵을 쓴다면 1–2 px 익스트루전을 추가하세요. 가장자리에서 이웃 프레임이 번져 들어오는 것을 막아 줍니다.
• 프레임 이름은 의미 있게 지으세요(hero_walk_00…). JSON에서 프레임 키가 됩니다.

활용 사례

• Aseprite, Blender, Spine에서 내보낸 프레임을 텍스처 하나로 패킹하기.
• 웹 게임용 UI나 아이템 아틀라스 만들기.
• AI로 생성한 프레임을 엔진에서 애니메이션할 수 있는 시트로 만들기.
• 랜딩 페이지용 CSS 스프라이트 애니메이션 만들기.

자주 묻는 질문