Pembuat Lembar Sprite

Gabungkan beberapa gambar menjadi satu lembar sprite dengan koordinat CSS, SCSS, atau JSON

👇 Gulir ke bawah untuk panduan langkah demi langkah singkat

Lepaskan sprite Anda di sini

atau klik di mana saja untuk mencari file

PNGJPGWEBPGIF

Dibuat CSS

Unggah gambar untuk membuat kode

Kelas CSS dan koordinat JSON akan muncul di sini

Sebelum Anda mulai dengan Pembuat Lembar Sprite

Kemas beberapa gambar menjadi lembar sprite dengan pengaturan ruang tambahan dan keluaran koordinat CSS, SCSS, atau JSON di peramban.

Paling cocok untuk

Menggabungkan bingkai game terpisah atau ikon UI menjadi satu atlas PNG
Membuat koordinat CSS, SCSS, atau JSON bersama lembar
Membuat lembar sederhana dengan pengemasan baris langsung di peramban

Ketahui sebelum mulai

Pengemas menyusun gambar dalam baris; bukan pengoptimal bin packing serbaguna
Pilihan ruang tambahan dan skala memengaruhi dimensi lembar akhir
Batch besar menggunakan memori peramban selama setiap gambar didekode

Lanjutkan alur kerja

Pemotong Lembar SpriteBagi atlas yang ada menjadi bingkai terpisah.Pembesar Seni PikselPerbesar bingkai seni piksel sebelum mengemasnya.Kompresor GambarPerkecil ukuran lembar ekspor untuk penyerahan.Panduan pengemasan atlas spritePelajari ruang tambahan, ukuran pangkat dua, dan perembesan.Panduan sprite CSSTentukan kapan sprite CSS masih masuk akal.Impor sprite sheet UnityMasukkan atlas yang dihasilkan ke Unity.

Cara Menggunakan Pembuat Lembar Sprite

1Tambahkan Gambar

• Klik "Tambah Gambar" atau seret-lepas gambar sprite
• Mendukung format PNG, JPG, JPEG, WebP
• Gunakan Optimalkan otomatis untuk optimasi otomatis

2Konfigurasi Kanvas

• Kanvas: Atur dimensi (mode Khusus/Maks)
• Ubah ukuran: Skalakan sprite dengan penggeser persentase
• Jarak: Sesuaikan ruang tambahan antarsprite

3Buat Kode

• Format: Pilih keluaran CSS, SCSS, atau JSON
• Penamaan: Atur pola penamaan sprite
• Urutkan: Urutkan berdasarkan ukuran atau nama

4Unduh Aset

• Klik "Unduh PNG" untuk gambar sprite sheet
• Klik "Unduh Kode" untuk koordinat CSS/JSON
• Gunakan "Bersihkan" untuk memulai ulang dengan sprite baru

Fitur Utama:

Pengemasan baris dengan pengaturan ruang tambahan

Ubah ukuran sprite sebelum mengemas

Keluaran CSS, SCSS & JSON

Berjalan di peramban, tanpa unggahan

Pertanyaan Pembuat Lembar Sprite

Apa fungsi generator sprite sheet?

Alat mengemas berkas gambar terpisah menjadi satu gambar atlas. Menyatukan sprite terkait dapat mempermudah pengiriman aset, sementara koordinat yang dihasilkan memberi tahu CSS atau kode game lokasi setiap sprite dalam lembar.

Format kode apa yang dapat saya ekspor?

Alat membuat koordinat CSS, SCSS, atau JSON bersama lembar sprite PNG. JSON berisi posisi dan dimensi bingkai, sehingga dapat disesuaikan ke format aset engine atau aplikasi.

Apakah gambar saya diunggah ke server?

Tidak. Gambar didekode dan dikemas dalam peramban. Berkas sumber dan lembar yang dibuat tidak dikirim ke server unggahan ImageMint.

Mengapa padding penting dalam atlas sprite?

Ruang tambahan memberi jarak antarsprite tetangga. Tanpa pemisahan cukup, pemfilteran tekstur atau render berskala dapat mengambil sampel sprite dekat dan menyebabkan perembesan warna di tepi.

Alur Sprite Terkait

Untuk membagi atlas kembali ke bingkai terpisah, gunakan Pemotong Lembar Sprite . Bagian panduan pengepakan atlas sprite menjelaskan padding dan rembesan warna tepi. Untuk tindak lanjut khusus mesin, lihat Panduan impor Unity dan Panduan impor Godot.