Sprite Sheet Oluşturucu

Yerleşim nasıl çalışır

Oluşturucu tek ve öngörülebilir bir yerleşim kullanır: eşit bir ızgara. Sütun sayısını siz belirlersiniz; satır sayısı yukarı_yuvarla(görseller / sütunlar) olur. Her hücre aynı kare boyuttadır (seçtiğiniz döşeme boyutu), bu yüzden her görsel en boy oranı korunarak hücresine sığacak şekilde ölçeklenir ve ortalanır. Farklı boyuttaki görsellerin hepsi eşit hücrelere yerleşir, background-position kullanan CSS sprite’larının beklediği tam da budur.

Üretilen CSS’in biçimi

Her görsel, dosyasının adını taşıyan bir sınıfa dönüşür (.spr-<ad>), döşeme boyutunda ve kendi hücresine ötelenmiş olarak. Dört sütun, 128 px döşeme boyutu ve boşluk yokken sayfa şöyle görünür:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Ofset iki boyutta hareket eder: sprite’lar her satırı soldan sağa doldurur, sonra bir sonraki satıra geçer. PNG’yi CSS’inizin yanına spritesheet.png olarak kaydedin (ya da yolunuza uyması için url(...) değerini düzenleyin).

Boşluk ve taşma

Kenar kenara paketlenen sprite’lar, tarayıcı sayfayı ölçeklediğinde (tam sayı olmayan piksel oranları, CSS dönüşümleri) birbirine taşabilir. Komşu piksellerin sızmasını önlemek için hücreler arasına 2 ila 4 piksel boşluk ekleyin.

Yüksek yoğunluklu ekranlar (retina)

Otomatik 2x dışa aktarma yoktur, ancak daha keskin bir sayfayı kolayca elde edebilirsiniz: her sprite daha çok piksel taşısın diye daha büyük bir döşeme boyutu seçin (örneğin 128 px yerine 256 px), sonra onu CSS boyutunun yarısında gösterin. Böylece ayrı bir geçiş olmadan yüksek yoğunluklu ekranlarda keskin sprite’lar elde edersiniz.

Sprite sheet mi, alternatifler mi

• Sprite sheet’ler: CSS’te klasik simge setleri, HTML5 oyun kareleri ve çok sayıda küçük görseli tek dosyada toplamaktan yararlanan sayfalar.
• SVG sprite’lar (symbol): modern arayüz simgeleri için daha iyidir, kayıpsız ölçeklenir, CSS fill kabul eder, background-position ile uğraşmak gerekmez.
• Simge yazı tipleri: sınırlıdır ama minik tek renkli simgeler için hâlâ kullanılır.
• HTTP/2 veya HTTP/3 ile ayrı dosyalar: çoğullama, istek sayısını eskisinden daha az önemli hale getirir.