스프라이트 시트란 무엇이며 왜 사용해야 하나요?

스프라이트 시트는 그리드에 배열된 여러 작은 이미지(스프라이트)를 포함하는 단일 이미지 파일입니다. HTTP 요청을 줄이고, 페이지 로딩 성능을 향상시키며, 드로우 콜을 일괄 처리하여 게임 렌더링을 더 효율적으로 만듭니다.

어떤 이미지 형식이 지원되나요?

PNG, JPG, GIF, SVG, WebP 이미지를 업로드할 수 있습니다. 도구는 빠른 워크플로우를 위해 배치 업로드 및 클립보드 붙여넣기(Ctrl+V)를 지원합니다.

스프라이트 시트를 PNG(투명도 지원), WebP(더 작은 파일 크기의 현대적 형식) 또는 JPG(투명도 없는 사진에 최적)로 내보낼 수 있습니다. 대상 플랫폼 요구 사항에 따라 선택하세요.

이미지 썸네일을 드래그 앤 드롭하여 스프라이트 시트에서의 위치를 재배열합니다. Ctrl+V를 사용하여 클립보드에서 직접 이미지를 붙여넣을 수도 있습니다.

JSON 아틀라스 데이터는 각 스프라이트의 위치, 크기, 프레임 정보를 포함합니다. Phaser, PixiJS, Unity, Cocos2d 등 인기 있는 게임 엔진과 호환되어 자동 스프라이트 추출이 가능합니다.

맞춤 모드는 비율을 유지하여 축소. 채우기는 셀을 덮고 넘침을 자름. 늘리기는 비율 무시하고 늘립니다.

네, PNG와 WebP는 투명도를 유지합니다. 사용자 정의 배경색도 설정 가능하며, 투명도를 지원하지 않는 JPG 내보내기에 유용합니다.

여백은 시트의 개별 스프라이트 사이에 공간을 추가하여 텍스처 샘플링 시 시각적 블리딩을 방지합니다. 이는 선형 필터링을 사용하는 게임 엔진이나 스프라이트에 투명 가장자리가 있을 때 특히 중요합니다.

네, 스프라이트 시트는 CSS 이미지 스프라이트에 매우 적합합니다. JSON 아틀라스 데이터를 사용하여 CSS background-position 규칙을 생성할 수 있어 HTTP 요청을 줄이고 아이콘 세트 및 UI 요소의 페이지 로딩 성능을 향상시킵니다.

최적의 GPU 텍스처 처리를 위해 치수를 2의 거듭제곱(256x256, 512x512, 1024x1024)으로 유지하세요. 대부분의 게임 엔진은 더 나은 성능과 호환성을 위해 이러한 치수를 선호합니다.

스프라이트 시트는 여러 스프라이트를 단일 텍스처로 일괄 처리하여 드로우 콜을 줄입니다. 이는 GPU 상태 변경을 최소화하고, 메모리 오버헤드를 줄이며, 더 효율적인 렌더링을 가능하게 합니다.

스프라이트 시트는 일반적으로 프레임을 균일한 그리드에 배열하는 반면, 텍스처 아틀라스는 bin packing과 같은 알고리즘을 사용하여 불규칙한 모양의 스프라이트를 더 효율적으로 패킹할 수 있습니다.

이미지를 스프라이트 시트로 결합, 드래그로 재정렬, 그리드 레이아웃, 여백, 배율 모드. PNG/WebP/JPG 및 JSON 아틀라스 데이터로 내보내기, 게임 엔진과 CSS 스프라이트에 최적.

