Sprite Sheet Paketleyici ve Çıkartıcı

Tekil animasyon karelerini doku atlaslarında birleştirerek veya mevcut sayfalardan sprite kareleri çıkartarak 2D oyun performansını optimize edin.

Kareleri Buraya Sürükleyin
Optimize edilmiş doku atlasınızı oluşturmak için PNG veya WebP görselleri yükleyin
0%
Doku Verimliliği
0
Azaltılan Draw Call
0
Paketlenen Kare Sayısı
0x0
Atlas Boyutu
Animasyon Oynatıcı Flipbook
Motor Entegrasyon Kodu
 
Panoya Kopyalandı
Zoom 100%
Araç Stüdyosu

Bu aracı kendi sitenizde kullanmak ister misiniz?

WordPress, Notion veya kendi siteniz için renkleri ve karanlık modu özelleştirin.

Sıkça Sorulan Sorular

Sprite sheet nedir ve 2D oyunlar için neden önemlidir?

Sprite sheet, birden fazla animasyon karesini içeren tek bir görsel dosyasıdır. Oyun motorunun tek bir GPU komutuyla çok sayıda nesneyi çizmesini sağlar.

Bu araçtaki yerel işleme nasıl çalışır?

Tüm işlemler sunucuya hiçbir veri gönderilmeden tarayıcınızın HTML5 Canvas API sinde yerel olarak gerçekleşir.

Mevcut bir sprite sayfasından kareleri çıkartabilir miyim?

Evet. Çıkartıcı moduna geçin, görselinizi yükleyin ve ızgara boyutlarını ayarlayın.

# 2D Oyun Motorlarında GPU Batching ve Draw Call Optimizasyonu

Tekil görsel karelerini tek bir doku atlasında toplamak, işlemciden ekran kartına gönderilen çizim komutu sayısını (draw call) önemli ölçüde azaltır.
%95 Draw Call Azalması
4x Daha Hızlı GPU İşleme
60 FPS Mobilde Kararlı Hedef
100% Tarayıcıda Yerel İşlem

# Tekil Görsel Dosyaları ile Paketlemiş Doku Atlasları Karşılaştırması

Tekil Görsel Dosyaları

Ayrı ayrı kaydedilmiş PNG veya WebP dosyaları

  • Erandaki her bir kare için ayrı bir çizim komutu oluşturur
  • Ekran kartında sürekli bağlam değişimine yol açar
  • Web oyunlarında HTTP istek sayısını artırır
  • Mobil cihazlarda kare hızının düşmesine neden olur

Paketlenmiş Doku Atlası

JSON koordinat verisi ile birleştirilmiş tek PNG görseli

  • Yüzlerce sprite karesini tek bir GPU çizim komutunda birleştirir
  • Bellek bant genişliğini ve grafik işleme hızını en üst düzeye çıkarır
  • Görsel ve veriyi birleştirerek dosya isteklerini azaltır
  • Tüm platformlarda akıcı 60 FPS performansı sağlar

# Alt Piksel Kamera Hareketi ve Kenar Uzatma Matematiği

1 ila 2 piksellik kenar uzatması (Border Extrusion) uygulamak, dış kenar piksellerini dışarıya doğru kopyalayarak kamera hareketlerinde oluşan çizgi kusurlarını engeller.
Kenar Uzatma Stratejisi
Kamera hareketlerinde piksel sızmasını tamamen önlemek için paketleme esnasında kenar uzatması kullanın.

# Farklı Platformlar İçin Önerilen Doku Boyutları

Hedef Platform Önerilen Maks Boyut 2 nin Kuvveti Şartı Bellek Profili
Mobil Tarayıcılar2048 x 2048 pxWebGL 1.0 İçin ZorunluDüşük Bant Genişliği
Masaüstü PC / Konsol4096 x 4096 pxÖnerilirYüksek GPU Kapasitesi
Retro El Konsolları1024 x 1024 pxKesin ŞartKatı VRAM Sınırları
Avantajlar
  • Eski grafik sürücüleri ve WebGL 1.0 ile %100 uyumluluk sağlar
  • Donanımsal otomatik mipmap oluşturmayı destekler
  • Ekran kartındaki VRAM bellek tahsisini optimize eder
Dezavantajlar
  • Az sayıda sprite olduğunda kullanılmayan şeffaf alan bırakabilir
  • Düzensiz şekillerde dikkatli kenar boşluğu ayarı gerektirir
  • Başlangıç doku alanını az miktarda artırır

# Sprite Paketleme Temel Terimleri

Draw Call
İşlemcinin ekran kartına grafik çizmesi için gönderdiği komut.
Bin Packing
Dikdörtgen elemanları en küçük alana optimal şekilde yerleştirme algoritması.
Border Extrusion
Kamera hareketinde çizgi kusurlarını engellemek için dış kenar piksellerini kopyalama.
Flipbook Animation
2D oyunlarda sürekli hareketi simüle etmek için karelerin hızlıca sırayla oynatılması.

# Performans Kontrol Listesi

Üretim Kuralları

Dikkat edilmesi gereken
Animasyonları ortak atlaslarda toplayın ve WebGL derlemelerinde 2 nin kuvveti boyutlarını kullanın.
Bu bölüm temiz bir dışa aktarma ve güvenilir bir önizleme için gerekli kontrolleri özetler. 1.Bu bölüm temiz bir dışa aktarma ve güvenilir bir önizleme için gerekli kontrolleri özetler. 2.

# Padding, kenar genişletme ve dışa aktarma verilerini ayarlama

Padding komşu kareleri ayırır, kenar genişletme ise dış pikselleri tekrarlar. Bu değerleri filtreleme, mipmap ve kamera hareketiyle birlikte değerlendirin: az boşluk dikiş oluşturur, fazla boşluk dokunun alanını boşa harcar.Paketlemeden sonra JSON koordinatlarını hedef motorda kontrol edin. Atlas ancak kare boyutu, başlangıç noktası, dönüş ve şeffaflık dışa aktarılan dosyayla aynı şekilde yorumlandığında güvenilir olur.Doku biçimi ile metadatanın hedef motora uygun olduğunu da kontrol edin. Maksimum boyut, şeffaflık kırpma ve ikinin kuvveti ayarı bellek kullanımını ve eski cihazlardaki uyumluluğu etkiler.

Bibliyografik Referanslar