Generator Sprite Sheet
Gabungkan gambar menjadi sprite sheet dengan seret untuk mengurutkan, tata letak grid, padding, mode skala. Ekspor PNG/WebP/JPG dengan data JSON atlas untuk game engine dan CSS.
Apa itu sprite sheet dan mengapa menggunakannya?
Sprite sheet adalah satu file gambar yang berisi beberapa gambar kecil (sprite) yang disusun dalam grid. Menggunakan sprite sheet mengurangi permintaan HTTP, meningkatkan kinerja pemuatan halaman, dan membuat rendering game lebih efisien.
Format gambar apa yang didukung?
Anda dapat mengunggah gambar PNG, JPG, GIF, SVG, dan WebP. Alat ini mendukung unggahan batch dan tempel dari clipboard (Ctrl+V) untuk alur kerja yang cepat.
Format ekspor apa yang tersedia?
Ekspor sprite sheet sebagai PNG (dengan transparansi), WebP (format modern dengan ukuran file lebih kecil), atau JPG (terbaik untuk foto tanpa transparansi). Pilih berdasarkan kebutuhan platform target Anda.
Bagaimana cara mengurutkan ulang gambar di sprite sheet?
Seret dan lepas thumbnail gambar untuk mengatur ulang posisinya di sprite sheet. Anda juga dapat menempelkan gambar langsung dari clipboard menggunakan Ctrl+V.
Apa itu data JSON atlas dan engine apa yang mendukungnya?
Data JSON atlas berisi posisi, ukuran, dan informasi frame untuk setiap sprite. Ini kompatibel dengan engine game populer seperti Phaser, PixiJS, Unity, Cocos2d, dan banyak lainnya untuk ekstraksi sprite otomatis.
Apa saja mode skala yang berbeda?
Fit menjaga rasio. Isi menutupi sel dan memotong kelebihan. Regang mendistorsi untuk mengisi.
Apakah alat ini mendukung transparansi?
Ya, PNG dan WebP mempertahankan transparansi. Anda juga dapat mengatur warna latar belakang kustom, yang berguna untuk ekspor JPG yang tidak mendukung transparansi.
Bagaimana padding mempengaruhi sprite sheet?
Padding menambahkan ruang antara sprite individual di sheet, mencegah pendarahan visual saat tekstur diambil sampelnya. Ini sangat penting untuk engine game yang menggunakan pemfilteran linear.
Bisakah saya menggunakan sprite sheet untuk CSS?
Ya, sprite sheet sangat bagus untuk sprite CSS. Data JSON atlas dapat digunakan untuk menghasilkan aturan CSS background-position, mengurangi permintaan HTTP dan meningkatkan kinerja pemuatan halaman.
Apa praktik terbaik untuk dimensi sprite sheet?
Jaga dimensi sebagai pangkat 2 (256x256, 512x512, 1024x1024) untuk penanganan tekstur GPU yang optimal. Sebagian besar engine game lebih suka dimensi ini untuk kinerja dan kompatibilitas yang lebih baik.
Bagaimana sprite sheet meningkatkan kinerja game?
Sprite sheet mengurangi draw call dengan mengelompokkan beberapa sprite menjadi satu tekstur. Ini meminimalkan perubahan status GPU, mengurangi overhead memori, dan memungkinkan rendering yang lebih efisien.
Apa perbedaan antara sprite sheet dan atlas tekstur?
Sprite sheet biasanya mengatur frame dalam grid seragam, sementara atlas tekstur dapat mengemas sprite berbentuk tidak beraturan lebih efisien menggunakan algoritma seperti bin packing.
Cara Menggunakan Generator Sprite Sheet
Gabungkan beberapa gambar menjadi satu sprite sheet langsung di browser Anda. Seret untuk menyusun ulang frame, atur grid dan padding dengan presisi, lalu ekspor atlas PNG/WebP/JPG beserta data JSON untuk game engine dan sprite CSS. Semua diproses secara lokal.
- Tambahkan gambar Anda dan gunakan tombol + dan − untuk mengatur Columns dan Rows grid.
- Atur Padding (px) agar ada ruang antar-sprite dan mencegah texture bleeding.
- Biarkan Sprite Size di Auto agar menyesuaikan frame terbesar, atau ketik dimensi tetap untuk sel yang seragam.
- Pilih Scale Mode — Fit, Fill, atau Stretch — untuk mengatur bagaimana tiap gambar menempati selnya.
- Pilih Background (Transparent, White, Black, atau Custom), atur Format ke PNG, WebP, atau JPG, dan beri nama file di Filename.
- Seret thumbnail untuk menyusun ulang frame — koordinat atlas diperbarui otomatis — lalu ekspor sheet beserta atlas JSON-nya.
Gunakan padding minimal 2 px agar sprite yang berdampingan tidak saling menyatu saat tekstur diskalakan atau difilter di engine Anda.
Alat Terkait
- Kalkulator Chmod Kalkulator chmod online gratis untuk memvisualisasikan dan menghitung izin file Linux dengan kotak centang. Konversi instan antara notasi numerik (755, 644) dan simbolik (rwxr-xr-x). Mendukung izin khusus seperti setuid, setgid, sticky bit.
- Tabel ASCII Referensi pengkodean karakter ASCII lengkap dengan kode desimal, heksadesimal, oktal, biner, entitas HTML, dan deskripsi karakter. Cari dan filter secara instan.
- Penguji Permintaan HTTP Uji API REST langsung di browser Anda. Kirim permintaan GET, POST, PUT, DELETE dengan header, body, dan parameter kustom. Lihat status, header, dan body JSON respons secara instan.
- Generator .htaccess Buat aturan .htaccess Apache untuk redirect, rewrite, header keamanan, caching, dan lainnya.
- Generator Robots.txt Generator robots.txt online gratis. Buat dan sesuaikan file robots.txt untuk mengontrol perayapan mesin pencari, mengelola akses crawler, dan mengoptimalkan SEO situs Anda.
- Generator Sitemap Generator sitemap XML online gratis. Tambah URL, atur prioritas dan frekuensi, buat sitemap SEO secara instan.
- GIF Pisahkan Frame Ekstrak dan unduh frame individual dari animasi GIF sebagai PNG atau sprite sheet. Alat online gratis dengan pratinjau dan ekspor ZIP.
- GIF Terbalik Balikkan urutan pemutaran animasi GIF online gratis. Unggah, pratinjau dan unduh secara instan.