Sprite Sheet
Sprite Sheet (Görüntü Atlası)
Bir ızgarada düzenlenmiş birden fazla küçük görüntü veya çerçeve içeren tek bir görüntü dosyası; oyun ve web geliştirmede HTTP isteklerini azaltmak ve oluşturma performansını artırmak için kullanılır.
Teknik Detay
Sprite sheet'ler birçok görüntüyü bin-paketleme algoritmaları ile tek bir dokuya birleştirir. CSS sprite'ları bölgeleri göstermek için background-position kullanır: .icon { background: url(sprites.png) -32px -64px; width: 16px; height: 16px; }. Oyun sprite'ları çerçeve başına sınırlayıcı kutular, pivot noktalar ve animasyon verilerini tanımlayan atlas biçimleri (JSON/XML) kullanır. Doku paketleme alan kullanımını optimize eder — MaxRects ve Skyline algoritmaları >%95 verimlilik sağlar. Sprite sheet'ler çizim çağrılarını (oyun) ve HTTP isteklerini (web) azaltır. Modern alternatifler: SVG sprite (satır içi ), ikon fontları ve HTTP/2 çoğullama CSS sprite'larını ikonlar için daha az gerekli kılar.
Ornek
```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)
```