Ekstraktor Sprite

Drop files here or click (max 12 MB)

Jatuhkan gambar di atas untuk mulai mengekstrak sprite.

Tentang Ekstraktor Sprite Online

Perlu mengubah lembar sprite atau gambar statis menjadi sprite individu? Ekstraktor Sprite ini secara otomatis mendeteksi wilayah sprite, memotongnya dengan rapi (dengan pemangkasan dan padding opsional), dan mengekspor PNG transparan siap pakai. 🚀 Ideal untuk proyek Scratch, prototipe game 2D, aktivitas kelas, dan game indie. Berfungsi baik dengan seni piksel, elemen UI, ikon, dan karakter.

Mengapa Menggunakan Ekstraktor Sprite Ini?

  • Deteksi sprite otomatis berdasarkan transparansi dan ambang batas yang dapat dikonfigurasi
  • Pemotongan bersih dengan opsi pemangkasan batas transparan di sekitar setiap sprite
  • Kontrol padding, perataan (tengah/bawah) dan ukuran keluaran seragam opsional
  • Mempertahankan transparansi (saluran alfa) untuk ekspor PNG – ideal untuk tilemap dan karakter
  • Galeri visual semua sprite yang terdeteksi untuk inspeksi cepat sebelum unduh
  • Ekspor ZIP sisi klien menggunakan JSZip, menjaga nama file dan urutan sprite tetap stabil
  • Ramah Scratch: cepat mengubah lembar sprite tunggal menjadi banyak kostum atau aset
  • Sempurna untuk menggunakan kembali aset di berbagai mesin (Scratch, Godot, Unity 2D, Phaser, dll.)

🛠️ Cara Mengekstrak Sprite dari Lembar Sprite for sprite-extractor

1

1. Jatuhkan gambar Anda

Seret & lepas lembar sprite atau gambar ke zona jatuh, atau klik untuk memilih file. Untuk hasil terbaik, gunakan PNG dengan latar belakang transparan atau kontras tinggi antara sprite dan latar belakang.

2

2. Jalankan deteksi otomatis

Alat ini mengirimkan representasi ringan gambar Anda ke titik akhir deteksi, yang menghitung kotak pembatas untuk setiap sprite berdasarkan transparansi dan ukuran minimum. Kotak-kotak ditumpangkan pada gambar Anda sehingga Anda dapat dengan cepat melihat apa yang akan diekspor.

3

3. Sesuaikan opsi ekstraksi

Sesuaikan padding, latar belakang transparan vs warna solid, pemangkasan tepi transparan, perataan (tengah atau bawah), dan lebar/tinggi keluaran seragam opsional. Alat ini membangun kembali kanvas setiap sprite sesuai.

4

4. Pratinjau sprite

Gulir melalui galeri sprite yang dihasilkan. Setiap pratinjau dibangun di sisi klien menggunakan kanvas di luar layar dan dapat diganti namanya atau dibuang tergantung opsi UI.

5

5. Unduh PNG atau ZIP

Ekspor sprite PNG individual atau unduh satu file ZIP yang berisi semua pratinjau saat ini. ZIP dibangun di sisi klien menggunakan JSZip, dan nama file mengikuti pola berurutan seperti <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, dll.

Spesifikasi Teknis

Deteksi & Kotak Pembatas

Fase deteksi berjalan di titik akhir backend khusus dan mengembalikan kotak pembatas bersih yang digunakan klien untuk membangun sprite akhir.

AspekPerilakuCatatan
Titik akhir deteksiPOST /api/sprite-extractor/inspectMenerima URL data dan opsi deteksi, mengembalikan array kotak sprite.
Input deteksitoleransi, ambangAlfa, lebarMin, tinggiMinSesuaikan parameter ini di UI untuk mengabaikan noise kecil atau menangkap hanya sprite yang bermakna.
Bentuk kotakPersegi panjang sejajar sumbuSetiap <code>SpriteBox</code> menyimpan <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> dalam koordinat gambar sumber.
Penanganan transparansiSadar alfaPiksel transparan berkontribusi pada keputusan pemotongan/penyesuaian tetapi dapat dipertahankan dalam output.
Penanganan kesalahanFallback yang eleganJika deteksi gagal, alat menampilkan kesalahan yang mudah dibaca dan tidak merusak UI.

Pemotongan, Penyesuaian & Penyelarasan

Setelah kotak diketahui, semua rendering sprite dilakukan di browser menggunakan kanvas HTML.

LangkahImplementasiDetail
Potongan awaldrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Setiap sprite pertama kali dipotong dari gambar asli ke kanvas sementara.
Penyesuaian transparanpindai saluran alfa via getImageDataAlat memindai piksel untuk menghitung kotak pembatas non-transparan minimal saat penyesuaian diaktifkan.
Paddingdapat dikonfigurasi 0–256 pxPadding diterapkan di sekitar sprite yang disesuaikan atau dipotong untuk mengurangi artefak tepi di mesin.
Penyelarasantengah / bawahSprite dapat dipusatkan atau disejajarkan ke bawah (berguna untuk karakter yang berdiri di garis dasar).
Ukuran output seragamopsional lebarSprite / tinggiSpriteSaat diaktifkan, semua sprite dirender ke kanvas berukuran tetap untuk menstandarkan animasi.
Latar belakangtransparan atau warna solidPertahankan transparansi penuh atau isi kanvas dengan warna RGBA latar belakang yang dipilih.

Kinerja & Batasan

Dirancang untuk penggunaan interaktif di browser.

ParameterPerilaku KhasCatatan
Ukuran input maksimumGambar ~10 MBFile yang lebih besar mungkin masih berfungsi tetapi akan memuat/mendeteksi lebih lambat.
Jumlah spritehingga ~400 spriteJumlah yang sangat tinggi dimungkinkan, tetapi rendering pratinjau dan pembuatan ZIP akan memakan waktu lebih lama.
Format eksporPNG dalam ZIP (Blob)ZIP dihasilkan sepenuhnya di sisi klien menggunakan JSZip.
Operasi kanvasPemotongan dan penggambaran per spriteMengandalkan API kanvas 2D browser; kinerja skala dengan resolusi dan jumlah.

Alternatif Baris Perintah

Untuk lembar sprite besar atau pipeline otomatis, Anda dapat menggabungkan alat CLI seperti ImageMagick dengan skrip.

Linux / 🍎 macOS

Pemotongan grid seragam dengan ImageMagick

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

Memotong grid 64×64 reguler menjadi file PNG individual.

Zip semua sprite

zip sprites.zip sprite_*.png

Kemas semua sprite yang dihasilkan ke dalam satu arsip.

Windows (PowerShell + ImageMagick)

Pemotongan berbasis grid

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

Sama seperti di atas, menggunakan CLI <code>magick</code> di Windows.

Kasus Penggunaan Praktis

Pengembangan Game 2D

  • Ekstrak frame animasi karakter dari lembar sprite untuk Godot, Unity 2D, Phaser, atau Construct.
  • Pisahkan elemen UI (tombol, ikon, bilah kesehatan) dari mock-up desain.
  • Pecah tileset menjadi ubin individual untuk editor level.
// Contoh Godot: muat beberapa frame\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & Proyek Kelas

  • Ubah lembar sprite tunggal menjadi beberapa kostum untuk karakter Scratch.
  • Siapkan paket aset bertema (hewan, planet, ikon) untuk lokakarya pemrograman.
  • Biarkan siswa mendesain lembar sprite di alat gambar lalu ekstrak untuk Scratch.
// Pseudocode gaya Scratch untuk animasi sederhana\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Seni Pixel & Perpustakaan Aset

  • Pisahkan lembar seni piksel lama menjadi pustaka sprite individual yang dapat dicari.
  • Ekstrak hanya aset yang Anda butuhkan dari paket komersial atau sumber terbuka yang besar.
  • Normalisasikan padding dan perataan di seluruh sprite dari berbagai sumber.

❓ Frequently Asked Questions

❓Apakah deteksi sprite sepenuhnya otomatis?

Alat ini melakukan deteksi otomatis berdasarkan transparansi dan ambang batas yang dapat dikonfigurasi (toleransi, ambang alfa, lebar/tinggi minimal). Dalam banyak kasus, alat ini "langsung berfungsi", tetapi untuk lembar yang kompleks Anda mungkin perlu menyesuaikan opsi atau menjalankan proses kedua.

📏Apakah ekstraktor mengubah gambar asli saya?

Tidak. Gambar asli Anda tetap tidak tersentuh. Alat ini hanya membacanya ke dalam kanvas memori, memotong wilayah menjadi kanvas baru, dan kemudian mengekspor sprite PNG baru.

🎯Bisakah saya mengontrol padding dan perataan?

Ya. Anda dapat mengonfigurasi padding (dalam piksel), memilih antara latar belakang transparan atau solid, mengaktifkan pemotongan tepi transparan, dan menyelaraskan sprite baik di tengah atau sejajar bawah dalam kanvas keluaran.

🔒Apakah gambar saya disimpan di server?

Langkah deteksi mengirim gambar Anda (sebagai URL data) ke endpoint khusus untuk menghitung kotak sprite, tetapi sprite itu sendiri dibuat dan di-zip di browser Anda. Layanan ini dirancang untuk pemrosesan sementara, bukan penyimpanan jangka panjang. Seperti biasa, hindari menggunakan alat pihak ketiga untuk aset yang harus tetap sangat pribadi.

🧊Apakah transparansi akan dipertahankan dalam sprite yang diekspor?

Ya. Secara default kanvas keluaran dibiarkan transparan dan sprite Anda mempertahankan saluran alfa mereka. Anda dapat memilih warna latar belakang solid jika mesin target Anda lebih menyukai aset buram.

Pro Tips

Best Practice

Gunakan sedikit padding (2–4 px) di sekitar setiap sprite untuk mencegah bleeding tepi saat menskalakan atau memutar di mesin Anda.

Best Practice

Beri nama sprite secara konsisten (misalnya, <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) untuk menyederhanakan impor animasi dan penulisan skrip.

Best Practice

Dalam pengaturan kelas, mulailah dengan lembar sprite yang sangat sederhana (sedikit sprite besar, latar belakang jelas) agar siswa melihat hasil langsung.

Best Practice

Simpan ZIP yang diekspor bersama file sumber proyek Anda sehingga Anda dapat dengan mudah menghasilkan ulang atau menyesuaikan animasi nanti.

Additional Resources

Scratch Wiki – Sprite
Documentation
Dokumentasi Godot – Animasi Sprite 2D
Documentation
Manual Unity – Sprite 2D
Documentation

Other Tools