1. Ana sayfa
  3. Görsel
  5. Sprite Sheet Oluşturucu

Sprite Sheet Oluşturucu

Birden çok görseli CSS sınıfları ve JSON koordinatlarıyla tek bir sprite sheet PNG dosyasında toplayın.

Tarayıcınızda çalışır Ücretsiz

    Sprite sheet nedir?

    Sprite sheet, birden çok küçük görselin (oyun animasyon kareleri, ikonlar, düğme durumları) tek bir büyük görselde düzenli şekilde toplanmasıdır. Oyun motorları animasyonları bu dosyadan okur; web sitelerinde ise CSS sprite tekniğiyle onlarca HTTP isteği teke indirilir.

    Neler üretir?

    • Tüm karelerin yerleştirildiği tek bir PNG dosyası
    • Her kare için background-position değerlerini içeren hazır CSS sınıfları
    • Oyun motorları ve JavaScript için her karenin x, y, genişlik ve yükseklik bilgisini içeren JSON haritası

    Ayarlar

    Sütun sayısını, kareler arası boşluğu, dış kenar boşluğunu ve arka planı seçebilirsiniz. Ayar değiştirdikçe CSS ve JSON çıktısı anında güncellenir. Görseller tarayıcınızda işlenir.

    Sprite Sheet Oluşturucu nasıl kullanılır?

    1. Sprite sheet'e eklemek istediğiniz görselleri seçin.
    2. Sıralamayı, sütun sayısını ve boşlukları ayarlayın.
    3. Oluşan PNG'yi ve CSS/JSON çıktısını kontrol edin.
    4. Sprite sheet'i indirin, kodu projenize kopyalayın.

    Neden bu aracı kullanmalısınız?

    TexturePacker gibi ücretli araçlara gerek kalmadan, koordinatları elle hesaplamadan hızlıca sprite sheet hazırlarsınız.

    Sıkça sorulan sorular

    Görseller hangi sırayla yerleştiriliyor?

    Dosya listesindeki sırayla, soldan sağa ve yukarıdan aşağıya. Sırayı değiştirmek için okları kullanın.

    Farklı boyutlardaki görseller kullanılabilir mi?

    Evet. Her karenin konumu ve boyutu CSS ve JSON çıktısında ayrı ayrı belirtilir.

    Hangi oyun motorlarıyla uyumlu?

    JSON haritası basit bir koordinat listesidir; Phaser, PixiJS, Unity veya Godot gibi motorlarda kolayca okunabilir.

    İlgili araçlar

    Gizli

    Görsel Bölücü (Izgara)

    Bir görseli 2×2, 3×3, 4×4 veya özel bir ızgarada parçalara bölün; tek tek veya ZIP olarak indirin.

    Aracı aç
    Gizli

    Görselleri Yan Yana Birleştirme

    İki veya daha fazla görseli boşluk, hizalama ve arka plan seçenekleriyle tek bir resimde yan yana koyun.

    Aracı aç
    Gizli

    Favicon ve ICO Oluşturucu

    Logonuzdan 16×16'dan 512×512'ye kadar favicon.ico ve PNG site ikonları oluşturun.

    Aracı aç
    Gizli

    Görselden Base64'e Dönüştürücü

    Bir görseli HTML, CSS veya JSON içinde kullanılmaya hazır Base64 metnine ve data URL'ye çevirin.

    Aracı aç