Apa itu Generator Sprite Sheet?

Generator Sprite Sheet menggabungkan beberapa gambar terpisah menjadi satu sprite sheet yang dioptimalkan. Unggah bingkai atau ikon Anda — atau jatuhkan GIF animasi dan setiap bingkai diambil secara otomatis —, pilih tata letak (grid, strip horizontal, strip vertikal, atau padat), pilih latar transparan atau warna solid, lalu ekspor gambar gabungan dengan data posisi dalam JSON, JSON Array, XML TextureAtlas, atau CSS.

Mode grid menata semuanya dalam tata letak N kali M yang seragam, ideal untuk siklus animasi di mana setiap bingkai berukuran sama. Strip horizontal dan vertikal menjajarkan bingkai dalam satu baris atau kolom — tata letak standar untuk animasi engine 2D sederhana. Mode padat menjalankan bin-packing agar ikon dengan ukuran berbeda muat dengan sisa seminimal mungkin. Jatuhkan GIF animasi dan setiap bingkai didekode ke dalam sheet, jadi tidak perlu mengekspor bingkai lebih dulu. Keluaran mempertahankan latar transparan secara bawaan, atau Anda bisa memilih warna solid sebagai isian chroma key. Metadata tersedia dalam empat format — JSON hash, JSON Array, XML TextureAtlas, dan CSS — agar langsung pas di Phaser, PixiJS, Unity, Godot, atau background-position CSS. Pratinjau animasi memungkinkan Anda menelusuri bingkai pada 1 hingga 60 FPS agar pengaturan waktu tepat sebelum mengunduh. Telusuri bingkai satu per satu untuk menangkap sprite yang tidak sejajar, pangkas tepi transparan setiap bingkai agar lembar tetap ringkas, dan unduh rangkaiannya sebagai GIF animasi untuk membagikan hasilnya tanpa mesin gim.

Cara menggunakan

1. Unggah gambar individual yang ingin Anda gabungkan menjadi sprite sheet.
2. Pilih tata letak (grid, horizontal, vertikal, atau packed), atur padding, dan setel latar menjadi transparan atau warna padat.
3. Unduh gambar sprite sheet beserta data posisi CSS atau JSON.

Kapan menggunakan

• Membungkus siklus jalan karakter atau animasi ledakan ke dalam satu gambar untuk diserahkan ke engine.
• Menyatukan kumpulan ikon UI ke satu aset agar halaman cukup melakukan satu permintaan HTTP, bukan empat puluh.
• Menyiapkan sprite tilemap dengan padding seragam supaya warna ubin tetangga tidak meluber.

Hasil

Seorang game developer mengunggah 16 frame animasi karakter (masing-masing 64×64). Alat ini menyusunnya dalam grid 4×4, menghasilkan sprite sheet 256×256 dengan koordinat frame JSON untuk game engine.

FAQ

Kapan sebaiknya memilih packed alih-alih grid?

Pakai grid kalau semua frame berukuran sama, misalnya animasi karakter 32x32. Pakai strip horizontal atau vertikal untuk urutan satu baris atau satu kolom; format ini paling mudah dimuat oleh sebagian besar engine. Pakai packed kalau ukuran ikon bervariasi, misalnya set UI dengan 16x16 dan 48x48 dicampur; sheet jadi paling ramping tapi metadata-nya lebih sulit dibaca manual.

Pengaturan padding itu untuk apa?

Padding menambah piksel transparan di sekeliling tiap frame. Tanpa padding, renderer dengan filter linear bisa membuat warna frame tetangga merembes ke tepi frame yang sedang digambar. Padding 1 sampai 2 piksel sudah cukup mencegah artefak itu.

Format metadata mana yang harus saya ekspor?

JSON (hash) adalah format TexturePacker yang dimuat sebagian besar engine, dengan setiap bingkai diberi kunci berdasarkan nama. JSON Array menyimpan bingkai sebagai daftar berurutan, yang lebih disukai Phaser 3 dan beberapa alur kerja. XML adalah TextureAtlas Starling/Sparrow yang dipakai Unity, Godot, dan Friday Night Funkin. CSS memberi kelas background-position untuk kumpulan ikon web. Pilih yang diharapkan oleh perender Anda.

Apakah transparansi tetap terjaga di hasilnya?

Ya secara default. Sheet diekspor sebagai PNG dengan channel alfa utuh, jadi latar transparan dari PNG sumber tetap terbawa. Kalau butuh sheet opaque, pilih warna latar padat di sebelah kontrol tata letak; berguna untuk chroma keying atau engine yang mengabaikan alfa. Hindari JPG sebagai sumber bila transparansi penting, karena JPG meratakan alfa menjadi putih bahkan sebelum diunggah.

Berapa banyak frame yang bisa dimuat dalam satu sheet?

Praktiknya, GPU ponsel membatasi tekstur tunggal sekitar 2048 atau 4096 piksel per sisi, jadi sheet 4096×4096 dengan frame 64×64 menampung 4096 frame. Untuk animasi, membagi menjadi dua sheet 2048×2048 lebih aman pada perangkat lawas.

Alat terkait