GIF 만들기
여러 이미지 프레임이나 스프라이트 시트로 GIF를 만들고 FPS와 크기를 조절합니다.
GIF애니메이션
바로가기무료 이미지 툴킷
스프라이트 시트 만들기
PNG 프레임을 하나의 스프라이트 시트로 합치고 프레임 간격과 애니메이션 미리보기를 조절합니다.
회원가입이나 결제 없이 사용할 수 있으며, 파일은 가능한 한 브라우저에서 처리됩니다.
이미지 업로드
클릭하거나 파일을 끌어오세요
대용량 이미지는 브라우저가 느려질 수 있습니다.
스프라이트 시트는 브라우저 canvas로 생성됩니다. 큰 캔버스는 브라우저 제한에 걸릴 수 있습니다.
예상 캔버스 크기: 업로드 후 자동 계산 / 한 줄 프레임 수: 4 / 행 수: -
프레임 간격은 각 프레임 사이의 거리입니다. 게임 엔진에서 일정한 셀 크기로 자동 자르기를 할 때는 0px이 편하고, 사람이 보기 쉬운 시트를 만들 때는 2~4px 정도를 권장합니다.
추천 단위는 px입니다. 픽셀 아트와 게임 리소스는 픽셀 단위 좌표가 중요하기 때문에 %, rem 같은 단위보다 px가 가장 적합합니다.
- - 0px: 프레임을 딱 붙여야 하는 게임 엔진/자동 슬라이스용
- - 1~2px: 픽셀 아트에서 프레임이 붙어 보이는 것을 방지
- - 4px: 미리보기와 편집이 편한 일반적인 간격
- - 8px 이상: 설명용 이미지, 문서용, 사람이 보기 쉬운 스프라이트 시트
애니메이션 미리보기
행은 아래/위/왼쪽/오른쪽 같은 방향 애니메이션으로 쓸 수 있지만 실제 의미는 이미지 구성에 따라 자유롭게 정하면 됩니다.
프레임 좌표 설명
- 1.스프라이트 시트는 한 장의 이미지에서 특정 사각형 영역만 잘라 그리는 방식으로 애니메이션을 재생합니다.
- 2.frameX와 frameY는 시트 안에서 프레임이 시작되는 위치를 의미합니다.
- 3.frameWidth와 frameHeight는 한 프레임의 크기입니다.
- 4.frame spacing은 프레임 사이 간격, cell padding은 셀 안 이미지 주변 여백, outer margin은 전체 시트 바깥쪽 여백입니다.
- 5.metadata 파일은 게임 엔진이나 자체 렌더링 코드에서 프레임 좌표를 읽을 때 사용할 수 있습니다.
JavaScript 사용 예시
const image = new Image();
image.src = "spritesheet.png";
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const frameWidth = 32;
const frameHeight = 32;
const columns = 4;
const frameSpacing = 2;
const cellPadding = 0;
const outerMargin = 0;
let frame = 0;
let last = 0;
function drawFrame(index) {
const col = index % columns;
const row = Math.floor(index / columns);
const sx = outerMargin + col * (frameWidth + cellPadding * 2 + frameSpacing) + cellPadding;
const sy = outerMargin + row * (frameHeight + cellPadding * 2 + frameSpacing) + cellPadding;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, sx, sy, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
}
function loop(time) {
if (time - last > 125) {
drawFrame(frame);
frame = (frame + 1) % 1;
last = time;
}
requestAnimationFrame(loop);
}
image.onload = () => requestAnimationFrame(loop);CSS 애니메이션 예시
CSS steps 예시는 frame spacing이 0인 단일 행 스프라이트 시트에서 가장 단순하게 동작합니다. 여러 행이나 간격이 있으면 JavaScript 방식이 더 유연합니다.
.sprite {
width: 32px;
height: 32px;
background-image: url("spritesheet.png");
animation: play 0.13s steps(1) infinite;
}
@keyframes play {
from { background-position: 0 0; }
to { background-position: -32px 0; }
}Unity 사용 팁
- - Texture Type = Sprite (2D and UI)
- - Sprite Mode = Multiple
- - Pixel art는 Filter Mode = Point
- - Compression = None 권장
- - Sprite Editor에서 Slice 사용
- - 셀 크기가 일정해야 자동 Slice가 편합니다
- - Pivot은 캐릭터 중심 또는 발밑 기준으로 맞추면 좋습니다
- - 자동 Slice에는 프레임 간격 0px이 가장 단순합니다
- - 간격을 둔 경우 Unity Sprite Editor에서 Grid By Cell Size의 offset/spacing을 맞춰야 할 수 있습니다
GIF 파일이 필요하신가요?
프레임 애니메이션을 GIF로 저장하고 싶다면 GIF 만들기 도구를 사용해 보세요.
GIF 만들기 열기사용법
- 1.PNG 프레임을 순서대로 업로드합니다.
- 2.열 수, 프레임 간격, 배경 옵션을 조절합니다.
- 3.애니메이션 미리보기와 메타데이터를 확인합니다.
- 4.스프라이트 시트 PNG와 보조 파일을 다운로드합니다.
주의사항
- 1.브라우저와 기기 성능에 따라 처리 시간이 달라질 수 있습니다.
- 2.이 도구는 게임 리소스용 스프라이트 시트 제작에 집중합니다. 프레임 애니메이션을 GIF로 저장하려면 GIF 만들기 도구를 사용하세요.
- 3.다운로드 전에 미리보기로 결과를 확인하세요.
FAQ
파일이 서버에 저장되나요?
파일은 가능한 한 브라우저에서 처리되며 서버에 저장되지 않습니다.
큰 파일도 사용할 수 있나요?
이 도구는 게임 리소스용 스프라이트 시트 제작에 집중합니다. 프레임 애니메이션을 GIF로 저장하려면 GIF 만들기 도구를 사용하세요.