스프라이트 시트 생성기
이미지를 스프라이트 시트로 결합, 드래그로 재정렬, 그리드 레이아웃, 여백, 배율 모드. PNG/WebP/JPG 및 JSON 아틀라스 데이터로 내보내기, 게임 엔진과 CSS 스프라이트에 최적.
스프라이트 시트란 무엇이며 왜 사용해야 하나요?
스프라이트 시트는 그리드에 배열된 여러 작은 이미지(스프라이트)를 포함하는 단일 이미지 파일입니다. HTTP 요청을 줄이고, 페이지 로딩 성능을 향상시키며, 드로우 콜을 일괄 처리하여 게임 렌더링을 더 효율적으로 만듭니다.
어떤 이미지 형식이 지원되나요?
PNG, JPG, GIF, SVG, WebP 이미지를 업로드할 수 있습니다. 도구는 빠른 워크플로우를 위해 배치 업로드 및 클립보드 붙여넣기(Ctrl+V)를 지원합니다.
어떤 내보내기 형식을 사용할 수 있나요?
스프라이트 시트를 PNG(투명도 지원), WebP(더 작은 파일 크기의 현대적 형식) 또는 JPG(투명도 없는 사진에 최적)로 내보낼 수 있습니다. 대상 플랫폼 요구 사항에 따라 선택하세요.
스프라이트 시트에서 이미지 순서를 어떻게 변경하나요?
이미지 썸네일을 드래그 앤 드롭하여 스프라이트 시트에서의 위치를 재배열합니다. Ctrl+V를 사용하여 클립보드에서 직접 이미지를 붙여넣을 수도 있습니다.
JSON 아틀라스 데이터란 무엇이며 어떤 엔진이 지원하나요?
JSON 아틀라스 데이터는 각 스프라이트의 위치, 크기, 프레임 정보를 포함합니다. Phaser, PixiJS, Unity, Cocos2d 등 인기 있는 게임 엔진과 호환되어 자동 스프라이트 추출이 가능합니다.
다양한 스케일 모드는 무엇인가요?
맞춤 모드는 비율을 유지하여 축소. 채우기는 셀을 덮고 넘침을 자름. 늘리기는 비율 무시하고 늘립니다.
도구가 투명도를 지원하나요?
네, PNG와 WebP는 투명도를 유지합니다. 사용자 정의 배경색도 설정 가능하며, 투명도를 지원하지 않는 JPG 내보내기에 유용합니다.
여백이 스프라이트 시트에 어떤 영향을 미치나요?
여백은 시트의 개별 스프라이트 사이에 공간을 추가하여 텍스처 샘플링 시 시각적 블리딩을 방지합니다. 이는 선형 필터링을 사용하는 게임 엔진이나 스프라이트에 투명 가장자리가 있을 때 특히 중요합니다.
CSS에 스프라이트 시트를 사용할 수 있나요?
네, 스프라이트 시트는 CSS 이미지 스프라이트에 매우 적합합니다. JSON 아틀라스 데이터를 사용하여 CSS background-position 규칙을 생성할 수 있어 HTTP 요청을 줄이고 아이콘 세트 및 UI 요소의 페이지 로딩 성능을 향상시킵니다.
스프라이트 시트 치수의 모범 사례는 무엇인가요?
최적의 GPU 텍스처 처리를 위해 치수를 2의 거듭제곱(256x256, 512x512, 1024x1024)으로 유지하세요. 대부분의 게임 엔진은 더 나은 성능과 호환성을 위해 이러한 치수를 선호합니다.
스프라이트 시트가 게임 성능을 어떻게 향상시키나요?
스프라이트 시트는 여러 스프라이트를 단일 텍스처로 일괄 처리하여 드로우 콜을 줄입니다. 이는 GPU 상태 변경을 최소화하고, 메모리 오버헤드를 줄이며, 더 효율적인 렌더링을 가능하게 합니다.
스프라이트 시트와 텍스처 아틀라스의 차이점은 무엇인가요?
스프라이트 시트는 일반적으로 프레임을 균일한 그리드에 배열하는 반면, 텍스처 아틀라스는 bin packing과 같은 알고리즘을 사용하여 불규칙한 모양의 스프라이트를 더 효율적으로 패킹할 수 있습니다.
스프라이트 시트 생성기 사용 방법
브라우저에서 여러 이미지를 하나의 스프라이트 시트로 합칠 수 있습니다. 드래그로 프레임 순서를 바꾸고 그리드와 패딩을 세밀하게 조정한 뒤, 게임 엔진과 CSS 스프라이트용 JSON 아틀라스를 포함한 PNG/WebP/JPG로 내보내세요. 모든 처리는 로컬에서 이루어집니다.
- 이미지를 추가한 뒤 + 와 − 버튼으로 그리드의 Columns와 Rows를 지정하세요.
- Padding (px)을 설정해 스프라이트 사이에 여백을 두고 텍스처 블리딩을 방지하세요.
- Sprite Size를 Auto로 두면 가장 큰 프레임에 맞춰지고, 고정 크기를 입력하면 모든 셀 크기가 일정해집니다.
- Scale Mode에서 Fit, Fill, Stretch 중 하나를 골라 각 이미지가 셀 안에 놓이는 방식을 정하세요.
- Background를 Transparent, White, Black, Custom 중에서 고르고, Format을 PNG, WebP, JPG로 설정한 뒤 Filename에 파일 이름을 적습니다.
- 썸네일을 드래그해 프레임 순서를 바꾸면 아틀라스 좌표가 자동으로 갱신됩니다. 이후 JSON 아틀라스와 함께 시트를 내보내세요.
패딩은 최소 2 px 이상 두세요. 엔진에서 텍스처를 확대하거나 축소하고 필터링할 때 인접 스프라이트가 서로 번지는 것을 막아 줍니다.
관련 도구
- Chmod 계산기 체크박스 포함 Linux 파일 권한을 시각화하고 계산하는 무료 온라인 chmod 계산기. 숫자(755, 644)와 기호 표기법(rwxr-xr-x)을 즉시 변환. setuid, setgid, sticky bit 같은 특수 권한 지원.
- ASCII 코드표 10진수, 16진수, 8진수, 2진수 코드, HTML 엔티티 및 문자 설명을 포함한 완전한 ASCII 문자 인코딩 참조. 즉시 검색 및 필터링.
- HTTP 요청 테스터 브라우저에서 직접 REST API를 테스트하세요. 사용자 정의 헤더, 본문, 쿼리 매개변수로 GET, POST, PUT, DELETE 요청을 전송하고 응답 상태, 헤더, JSON 본문을 즉시 확인합니다.
- .htaccess 생성기 Apache .htaccess 규칙을 생성합니다. 리디렉션, 재작성, 보안 헤더, 캐싱 등.
- Robots.txt 생성기 무료 온라인 robots.txt 생성기. robots.txt 파일을 만들고 사용자 정의하여 검색 엔진 크롤링을 제어하고, 크롤러 액세스를 관리하며, 사이트 SEO를 최적화하세요.
- 사이트맵 생성기 무료 온라인 XML 사이트맵 생성기. URL 추가, 우선순위 및 빈도 설정, SEO 친화적 사이트맵을 즉시 생성하세요.
- GIF 프레임 분할 GIF 애니메이션에서 개별 프레임을 PNG 또는 스프라이트 시트로 추출 및 다운로드. 미리보기 및 ZIP 내보내기 지원 무료 온라인 도구.
- GIF 역재생 GIF 애니메이션 재생 순서를 무료로 온라인에서 역전. 즉시 업로드, 미리보기 및 다운로드.