🍋
Menu
Image

Sprite Sheet

스프라이트 시트 (이미지 아틀라스)

하나의 이미지 파일에 결합된 작은 이미지 또는 프레임의 컬렉션으로, 게임 개발과 웹 디자인에서 여러 개별 파일 대신 하나의 파일만 로드하여 성능을 향상시키는 데 사용됩니다.

기술 세부사항

스프라이트 시트는 CSS에서 background-position으로 개별 스프라이트를 선택하여 HTTP 요청을 줄이고, 게임 엔진에서는 텍스처 아틀라스로 사용하여 드로우 콜을 줄입니다. 균일(고정 크기 셀) 또는 팩(크기가 다른 스프라이트를 빈 공간을 최소화하여 배치) 방식으로 구성됩니다.

예시

```javascript
// Sprite Sheet: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```

관련 도구

관련 용어