Sprite Çıkarıcı

Drop files here or click (max 12 MB)

Sprite'ları çıkarmak için yukarıya bir görsel bırakın.

Hakkında Çevrimiçi Sprite Çıkarıcı

Bir sprite sayfasını veya statik görseli tek tek spritelara dönüştürmeniz mi gerekiyor? Bu Sprite Çıkarıcı, sprite bölgelerini otomatik olarak algılar, temiz bir şekilde kırpar (isteğe bağlı budama ve dolgu ile) ve kullanıma hazır şeffaf PNG'ler olarak dışa aktarır. 🚀 Scratch projeleri, 2D oyun prototipleri, sınıf etkinlikleri ve bağımsız oyunlar için ideal. Piksel sanatı, UI öğeleri, ikonlar ve karakterlerle harika çalışır.

Bu Sprite Çıkarıcıyı Neden Kullanmalısınız?

  • Şeffaflık ve yapılandırılabilir eşiklere dayalı otomatik sprite tespiti
  • Her sprite etrafındaki şeffaf kenarların isteğe bağlı budanmasıyla temiz kırpma
  • Dolgu, hizalama (merkez/alt) ve isteğe bağlı tek tip çıktı boyutu kontrolü
  • PNG dışa aktarımlar için şeffaflığı (alfa kanalı) korur – döşeme haritaları ve karakterler için ideal
  • İndirmeden önce hızlı inceleme için tespit edilen tüm sprite'ların görsel galerisi
  • Dosya adlarınızı ve sprite sıranızı sabit tutan JSZip kullanılarak istemci tarafında ZIP dışa aktarımı
  • Scratch-dostu: tek bir sprite sayfasını hızla birden fazla kostüm veya varlığa dönüştürün
  • Motorlar arasında varlıkları yeniden kullanmak için mükemmel (Scratch, Godot, Unity 2D, Phaser, vb.)

🛠️ Bir Sprite Sayfasından Sprite'lar Nasıl Çıkarılır for sprite-extractor

1

1. Görüntünüzü bırakın

Bir sprite sayfasını veya görüntüyü bırakma alanına sürükleyip bırakın veya dosya seçmek için tıklayın. En iyi sonuçlar için şeffaf arka planlı PNG veya sprite'lar ile arka plan arasında yüksek kontrast kullanın.

2

2. Otomatik tespiti çalıştırın

Araç, görüntünüzün hafif bir temsilini bir tespit uç noktasına gönderir ve bu, şeffaflık ve minimum boyuta dayalı olarak her sprite için sınırlayıcı kutular hesaplar. Kutular, neyin dışa aktarılacağını hızlıca görebilmeniz için görüntünüzün üzerine yerleştirilir.

3

3. Çıkarma seçeneklerini ayarlayın

Dolgu, şeffaf arka plan vs. düz renk, şeffaf kenarların budanması, hizalama (merkez veya alt) ve isteğe bağlı tek tip çıktı genişliği/yüksekliğini ayarlayın. Araç, her sprite tuvalini buna göre yeniden oluşturur.

4

4. Sprite'ları önizleyin

Oluşturulan sprite'ların galerisinde gezinin. Her önizleme, istemci tarafında bir ekran dışı tuval kullanılarak oluşturulur ve kullanıcı arayüzü seçeneklerine bağlı olarak yeniden adlandırılabilir veya atılabilir.

5

5. PNG'leri veya bir ZIP'i indirin

Tek tek PNG sprite'ları dışa aktarın veya mevcut tüm önizlemeleri içeren tek bir ZIP dosyası indirin. ZIP, JSZip kullanılarak istemci tarafında oluşturulur ve dosya adları <code>sprite_0000.png</code>, <code>sprite_0001.png</code> vb. gibi sıralı bir desen izler.

Teknik Özellikler

Tespit & Sınırlayıcı Kutular

Tespit aşaması, özel bir arka uç uç noktasında çalışır ve istemcinin nihai sprite'ları oluşturmak için kullandığı temiz sınırlayıcı kutuları döndürür.

YönDavranışNotlar
Tespit uç noktasıPOST /api/sprite-extractor/inspectBir veri URL'si ve algılama seçeneklerini kabul eder, sprite kutuları dizisi döndürür.
Algılama girdileritolerans, alphaEşiği, minGenişlik, minYükseklikKüçük gürültüleri görmezden gelmek veya yalnızca anlamlı sprite'ları yakalamak için bu parametreleri kullanıcı arayüzünde ayarlayın.
Kutu şekliEksen hizalı dikdörtgenlerHer <code>SpriteBox</code>, kaynak görüntü koordinatlarında <code>x</code>, <code>y</code>, <code>genişlik</code>, <code>yükseklik</code> değerlerini tutar.
Şeffaflık işlemeAlfa duyarlıŞeffaf pikseller kırpma/trimleme kararlarına katkıda bulunur ancak çıktıda korunabilir.
Hata yönetimiZarif yedeklemelerAlgılama başarısız olursa, araç okunabilir bir hata gösterir ve kullanıcı arayüzünü bozmaz.

Kırpma, Trimleme & Hizalama

Kutular belirlendikten sonra, tüm sprite işleme HTML canvas kullanılarak tarayıcıda yapılır.

AdımUygulamaDetaylar
İlk kırpmadrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Her sprite önce orijinal görüntüden geçici bir canvasa kırpılır.
Şeffaf trimlemegetImageData ile alfa kanalını taramaTrimleme etkinleştirildiğinde, araç minimum şeffaf olmayan sınırlayıcı kutu hesaplamak için pikselleri tarar.
Dolguyapılandırılabilir 0–256 pxMotorlardaki kenar bozukluklarını azaltmak için trimlenmiş veya kırpılmış sprite çevresine dolgu uygulanır.
Hizalamamerkez / altSprite'lar ortalanabilir veya alta hizalanabilir (bir taban çizgisinde duran karakterler için kullanışlıdır).
Tek tip çıktı boyutuisteğe bağlı spriteGenişliği / spriteYüksekliğiEtkinleştirildiğinde, tüm sprite'lar animasyonları standartlaştırmak için sabit boyutlu bir canvasa işlenir.
Arka planşeffaf veya düz renkTam şeffaflığı koruyun veya canvas'ı seçilen bir arka plan RGBA rengiyle doldurun.

Performans & Sınırlar

Tarayıcıda etkileşimli kullanım için tasarlanmıştır.

ParametreTipik DavranışNotlar
Maksimum giriş boyutu~10 MB görselDaha büyük dosyalar çalışabilir ancak yükleme/algılama daha yavaş olacaktır.
Sprite sayısıen fazla ~400 spriteÇok yüksek sayılar mümkündür, ancak önizleme oluşturma ve ZIP yapımı daha uzun sürecektir.
Dışa aktarma formatıZIP içinde PNG (Blob)ZIP, tamamen istemci tarafında JSZip kullanılarak oluşturulur.
Canvas işlemleriSprite başına kırpma ve çizimTarayıcının 2D canvas API'sine dayanır; performans çözünürlük ve sayı ile ölçeklenir.

Komut Satırı Alternatifleri

Devasa sprite sayfaları veya otomatikleştirilmiş iş akışları için ImageMagick gibi CLI araçlarını betikle birleştirebilirsiniz.

Linux / 🍎 macOS

ImageMagick ile düzgün ızgara kırpma

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Düzenli 64×64 ızgarayı ayrı PNG dosyalarına keser.

Tüm sprite'ları zip yap

zip sprites.zip sprite_*.png

Oluşturulan tüm sprite'ları tek bir arşivde paketler.

Windows (PowerShell + ImageMagick)

Izgara tabanlı kırpma

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Windows'ta <code>magick</code> CLI kullanılarak yukarıdakiyle aynı.

Pratik Kullanım Alanları

2D Oyun Geliştirme

  • Godot, Unity 2D, Phaser veya Construct için bir sprite sayfasından karakter animasyon karelerini çıkarın.
  • Bir taslak tasarımdan UI öğelerini (düğmeler, simgeler, can çubukları) ayırın.
  • Seviye editörleri için tileset'leri ayrı karelere ayırın.
// Godot örneği: birden fazla kare yükleme\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & Sınıf Projeleri

  • Tek bir sprite sayfasını bir Scratch karakteri için birden fazla kostüme dönüştürün.
  • Programlama atölyeleri için temalı varlık paketleri (hayvanlar, gezegenler, simgeler) hazırlayın.
  • Öğrencilerin bir çizim aracında sprite sayfaları tasarlayıp Scratch için çıkarmalarına izin verin.
// Basit animasyon için Scratch tarzı sahte kod\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Piksel Sanatı & Varlık Kütüphaneleri

  • Eski piksel sanatı sayfalarını, aranabilir bir bireysel sprite kütüphanesine bölün.
  • Büyük ticari veya açık kaynak paketlerden yalnızca ihtiyacınız olan varlıkları çıkarın.
  • Farklı kaynaklardan gelen sprite'lar arasında dolgu ve hizalamayı normalleştirin.

❓ Frequently Asked Questions

❓Sprite tespiti tamamen otomatik mi?

Araç, şeffaflık ve yapılandırılabilir eşiklere (tolerans, alfa eşiği, minimum genişlik/yükseklik) dayalı otomatik tespit gerçekleştirir. Çoğu durumda "sadece çalışır", ancak karmaşık sayfalar için seçenekleri değiştirmeniz veya ikinci bir geçiş yapmanız gerekebilir.

📏Çıkarıcı orijinal görselimi değiştirir mi?

Hayır. Orijinal görseliniz dokunulmadan kalır. Araç yalnızca onu bellek içi bir tuval olarak okur, bölgeleri yeni tuvallere kırpar ve yeni PNG sprite'ları olarak dışa aktarır.

🎯Dolgu ve hizalamayı kontrol edebilir miyim?

Evet. Dolguyu (piksel cinsinden) yapılandırabilir, şeffaf veya dolu bir arka plan arasında seçim yapabilir, şeffaf kenarların kırpılmasını etkinleştirebilir ve sprite'ları çıktı tuvalinde ortalanmış veya alt hizalı olarak ayarlayabilirsiniz.

🔒Görsellerim sunucuda saklanıyor mu?

Tespit adımı, sprite kutularını hesaplamak için görselinizi (veri URL'si olarak) özel bir uç noktaya gönderir, ancak sprite'ların kendisi tarayıcınızda oluşturulur ve sıkıştırılır. Hizmet, kalıcı depolama için değil, geçici işleme için tasarlanmıştır. Her zaman olduğu gibi, kesinlikle gizli kalması gereken varlıklar için üçüncü taraf araçları kullanmaktan kaçının.

🧊Dışa aktarılan sprite'larda şeffaflık korunacak mı?

Evet. Varsayılan olarak çıktı tuvali şeffaf bırakılır ve sprite'larınız alfa kanalını korur. Hedef motorunuz opak varlıkları tercih ediyorsa, isteğe bağlı olarak dolu bir arka plan rengi seçebilirsiniz.

Pro Tips

Best Practice

Motorunuzda ölçeklendirme veya döndürme yaparken kenar taşmasını önlemek için her sprite'ın etrafında küçük bir dolgu (2–4 px) kullanın.

Best Practice

Sprite'ları tutarlı bir şekilde adlandırın (örneğin, <code>kahraman_kos_0001.png</code>, <code>kahraman_kos_0002.png</code>) animasyon içe aktarmalarını ve komut dosyası yazmayı basitleştirmek için.

Best Practice

Sınıf ortamlarında, öğrencilerin anında sonuç görmesi için çok basit sprite sayfalarıyla (az sayıda büyük sprite, net arka plan) başlayın.

Best Practice

Dışa aktarılan ZIP'ı projenizin kaynak dosyalarının yanında saklayın, böylece animasyonları daha sonra kolayca yeniden oluşturabilir veya değiştirebilirsiniz.

Additional Resources

Scratch Wiki – Sprite'lar
Documentation
Godot Dokümanları – 2D Sprite Animasyonu
Documentation
Unity El Kitabı – 2D Sprite'lar
Documentation

Other Tools