Sprite Sheet Oluşturucu

Sprite sheet işin yalnızca yarısıdır. Motorun ayrıca her karenin nerede olduğunu ve ne kadar sürdüğünü bilmesi gerekir. Bu oluşturucu karelerinizi bir ızgaraya, bir şeride veya sıkı bir atlasa paketler ve bu veriyi motorların gerçekten içe aktardığı formatlarda yazar: TexturePacker/Phaser JSON, Aseprite JSON, Godot 4 SpriteFrames kaynağı, CSS ve Unity dilimleme ayarları. Kareler sizin numaralandıracağınız şekilde sıralanır, yani walk_10, walk_9'dan sonra gelir.

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

1. Tüm kare PNG'lerinizi aynı anda bırakın. Ada göre doğal sırada dizilirler. İstediğiniz zaman daha fazlasını ekleyin.
2. Oklarla yeniden sıralayın, fazla kareleri kaldırın ya da sırayı ters çevirin.
3. Bir düzen seçin: Izgara (otomatik veya sabit sütun), tek Satır, tek Sütun ya da saydam kenarları kırpılmış Sıkı paket.
4. Kareler arası padding'i, dış kenar boşluğunu ve kenar extrusion'ını ayarlayın. Hedefiniz 64, 128, 256 px dokular gerektiriyorsa ikinin kuvveti'ni açın.
5. Animasyonu önizlemede kontrol edin ve FPS'ini ayarlayın.
6. PNG'yi ve bir veri dosyasını ya da PNG ve tüm formatları içeren bir ZIP'i indirin.

Neler elde edersiniz

• PNG sheet: saydamlıkla, tam önizlemedeki gibi.
• Phaser / TexturePacker JSON (hash ve array): sıkı paketlenmiş kareler yine hizalı dursun diye kırpma ofsetleri dahil.
• Aseprite JSON: bir kare etiketi ve sürelerle.
• Godot 4 SpriteFrames .tres: AtlasTexture kullanır, AnimatedSprite2D'ye hazır.
• CSS sprite'ları: kare başına bir sınıf ve adımlı bir animasyonla; ayrıca Unity içe aktarma ve dilimleme ayarları.

Hangi motorlara uyar

• Phaser 3: this.load.atlas(key, 'sheet.png', 'sheet.json'), ardından animasyonu kare adlarından oluşturun.
• Godot 4: .tres dosyasını PNG'nin yanına koyun ve bir AnimatedSprite2D'nin Sprite Frames alanına atayın.
• Unity: ızgara düzenleri, ayar dosyasındaki değerlerle Grid By Cell Size kullanılarak dilimlenir. Point filtreleme kullanın ve sıkıştırmayı kapatın.
• PixiJS, Defold, Cocos, Construct: TexturePacker JSON'u (hash) doğrudan veya kendi içe aktarıcılarıyla okur.

Onunla oyun yaparken öğrendiğimiz ipuçları

• Karakter animasyonu için tek tip karelerle Izgara kullanın. Motorların ızgara dilimleyicileri ve onion-skin araçları bunu bekler.
• Farklı boyutlarda çok sayıda görsel içeren eşya ve UI atlasları için kırpmalı Sıkı paket kullanın.
• Sheet tam sayı olmayan bir oranla ölçeklendiğinde veya mipmap kullanıldığında 1–2 px extrusion ekleyin. Komşu karelerin kenarlardan sızmasını önler.
• Kare adlarını anlamlı tutun (hero_walk_00…). JSON'da kare anahtarları bunlar olur.

Kullanım alanları

• Aseprite, Blender veya Spine'dan dışa aktarılan kareleri tek bir dokuya paketlemek.
• Bir web oyunu için UI veya eşya atlası oluşturmak.
• AI üretimi kareleri motorunuzun animasyonlandırabileceği bir sheet'e dönüştürmek.
• Bir açılış sayfası için CSS sprite animasyonu yapmak.

SSS