Sprite Sheet Oluşturucu

Birden fazla görseli tek bir sprite sayfasında birleştirin ve CSS kodu oluşturun.

Paylaş:

Görselleri Buraya Sürükleyin

veya birden fazla dosya yüklemek için tıklayın

Bu Aracı Neden Kullanmalısınız?

Frontend Optimizasyonu İçin Yüksek Verimli Araçlar

Reduce HTTP requests and speed up loading.

Otomatik Koordinat Oluşturma

Matematiği biz yapıyoruz, böylece sizin yapmanıza gerek kalmaz. Birleştirilmiş sprite sayfanızdaki her bir görüntü için anında kesin X ve Y koordinatlarını alın.

Akıllı Izgara Paketleme Algoritması

Motorumuz, farklı boyutlardaki görüntüleri mümkün olan en verimli ızgaraya akıllıca yerleştirerek boş alanı en aza indirir ve nihai dosya boyutunu küçültür.

Kullanıma Hazır CSS Sınıfları

Background-position ve boyut özellikleri dahil olmak üzere her varlık için ayrı sınıflara sahip temiz, kopyalanabilir bir CSS bloğu oluşturur.

Özelleştirilebilir Düzen Modları

Özel proje mimarinizin ihtiyaçlarına göre Dikey şeritler, Yatay şeritler veya en verimli 'Izgara' modu arasında seçim yapın.

Dolgu ve Boşluk Kontrolü

Bitişik simgenin parçalarının yanlışlıkla UI'nızda göründüğü 'piksel kanamasını' önlemek için sprite'lar arasına özel boşluk ekleyin.

Yerel Bellek İşleme Koruması

UI varlıklarınız sizin mülkünüzdür. Tüm paketleme ve kod oluşturma işlemi doğrudan tarayıcınızda gerçekleşir, hiçbir verinin cihazınızdan çıkmamasını sağlar.

Yüksek Hızlı Varlıklar Kılavuzu: Oluşturucu Nasıl Kullanılır

Create sprites in minimal steps.

Küçük Varlıklarınızı Toplayın

Birleştirmek istediğiniz tüm küçük simgeleri, düğmeleri veya bir animasyonun karelerini toplayın. Bunların PNG gibi yüksek kaliteli bir formatta olduğundan emin olun.

Araca Toplu Yükleme

Tüm dosyaları aynı anda seçin ve yükleyin. Araç, bunların nasıl birlikte paketlenebileceğine dair anında görsel bir önizleme oluşturacaktır.

Optimizasyonu Yapılandırın

Retina ekranlarda kenarların görünmesinden endişeleniyorsanız 'Dolgu'yu ayarlayın veya bir yan menü veya film şeridi oluşturuyorsanız 'Dikey' bir düzen seçin.

Sprite Önizlemesini İnceleyin

Oluşturulan sayfayı kontrol edin. Her öğenin görünür olduğundan ve ızgaranın sıkı ve verimli olduğundan, boşa harcanan alan olmadığından emin olun.

Atlas Resmini İndirin

Birleştirilmiş görüntü dosyasını projenizin varlıklar klasörüne kaydetmek için 'Sprite Sheet İndir' düğmesine tıklayın.

Sprite Sheet Ustalığı: Oyun Varlığı Oluşturma Sırları

HTTP/2 ile sprite sheet'ler hala geçerli mi?

Evet! HTTP/2 birden fazla isteği daha iyi işlese de, toplam meta veri miktarını ve sıkıştırma yükünü azalttığı için sprite sheet'ler hala daha hızlıdır.

Farklı boyutlarda görüntülerim varsa ne olur?

Akıllı ızgara algoritmamız bunun için tasarlandı! Her şekil ve boyuttaki görüntülerinizi mümkün olan en kompakt dikdörtgende düzenleyecektir.

Sprite sayfam için JPG mi yoksa PNG mi kullanmalıyım?

Kesinlikle PNG'yi öneriyoruz. Simgelerin 'keskin kenarlarını' daha iyi işler ve çoğu web UI çalışması için gerekli olan şeffaflığı destekler.

Dahil edebileceğim görüntü sayısında bir sınır var mı?

Teknik olarak hayır. Ancak, dosya boyutlarının aşırı büyük olmasını önlemek için sayfa başına yaklaşık 50-100 görüntüye bağlı kalmanızı öneririz.

'Piksel Kanaması' nedir?

Bu, alt piksel işlemenin sayfadaki bir sonraki görüntünün bir şeridini gösterdiği durumdur. Bunu önlemek için aracımızda 1-2 piksellik 'Dolgu' ekleyin.

Bu araç SVG'yi destekliyor mu?

Bu araç raster sprite'lar (PNG/JPG) içindir. SVG'ler için, modern tarayıcılarda farklı şekilde işlenen bir 'SVG Sprite' yaklaşımı kullanmalısınız.

Bir sprite sayfasını daha sonra nasıl güncellerim?

Orijinal simgeleri ve yenisini tekrar yüklemeniz yeterlidir. Aracımız size saniyeler içinde yeni bir sayfa ve yeni CSS verecektir.

Bu araç oyun geliştiricileri için ücretsiz mi?

Evet! İster bir web sitesi ister bir mobil oyun yapıyor olun, oluşturucumuz %100 ücretsizdir ve ticari kısıtlaması yoktur.

Tarayıcılar sprite sayfalarını önbelleğe alabilir mi?

Evet! Bu en büyük avantajlardan biridir. Tarayıcının sitenizin tüm sayfaları için her simgeyi hazır hale getirmek için yalnızca bir dosyayı önbelleğe alması gerekir.

Tescilli simge verilerim güvende mi?

Kesinlikle. Dosyalarınız tarayıcınızda yerel olarak işlendiğinden, tasarımlarınız asla sistemimiz tarafından yüklenmez, saklanmaz veya görüntülenmez.