Cara Memotong Lembar Sprite Hasil AI yang Tidak Beraturan

Anda meminta model gambar membuat siklus berjalan empat kali empat dan mendapatkan satu PNG besar. Tampak seperti kisi. Namun sebenarnya bukan kisi. Memotongnya menjadi enam belas persegi panjang sama besar memotong kepala di sini, ujung pedang di sana, dan membuat separuh bingkai tidak terpusat. Berikut alasan hal itu terjadi dan cara tetap mendapatkan bingkai yang dapat digunakan dari sheet.

Pengembangan gameOleh Dev.SWL13 Agustus 2026Waktu baca 10 menit

Mengapa sprite sheet AI tidak pernah memiliki kisi sempurna

Lembar sprite tradisional dibuat oleh alat. Seniman menggambar bingkai pada ukuran sel tetap, dan pengekspor mengemasnya pada offset piksel yang tepat. Setiap sel identik, setiap sprite berada dalam kotak yang diketahui, dan pemotongannya hanya perhitungan.

Generator gambar tidak bekerja demikian. Model difusi seperti DALL·E, Midjourney, dan Stable Diffusion menghasilkan satu gambar berkesinambungan. Ketika Anda meminta "lembar sprite kesatria berjalan, kisi 4x4", model menghasilkan sesuatu yang terlihat seperti sprite sheet karena sudah melihat ribuan contohnya. Model meniru gaya visual kisi, bukan menghitung batas sel. Tidak ada dalam proses generasi yang memastikan baris ketiga dimulai tepat 384 piksel dari atas.

Konsekuensi praktisnya konsisten:

Jarak yang berubah-ubah. Celah antarsprite bervariasi dari beberapa piksel hingga beberapa puluh. Pergeseran biasanya terakumulasi dari kiri ke kanan dan atas ke bawah, sehingga bingkai kanan bawah paling bermasalah.
Ukuran sprite tidak konsisten. Karakter yang sedang melangkah lebih lebar daripada yang berdiri diam. Model menggambar setiap pose pada ukuran yang dianggap cocok, bukan menskalakannya ke dalam kotak seragam.
Konten tidak di tengah. Bahkan ketika sel cukup merata, sprite dalam sel jarang berada di tengah, sehingga potongan kisi yang benar tetap menghasilkan bingkai yang bergetar saat diputar.
Bingkai hilang atau tergabung. Terkadang Anda mendapat lima belas sprite dalam tata letak 4x4, atau dua pose bertumpang tindih dan tampak satu gumpalan.
Dimensi kanvas ganjil. Keluaran 1024x1024 yang dibagi menjadi tiga kolom menghasilkan 341.33 piksel. Ada nilai yang harus dibulatkan, dan kesalahan pembulatan akan terakumulasi.

Lembar sprite hasil generasi seorang kesatria berzirah biru, dengan enam belas pose berukuran dan ber-offset tidak konsisten, serta celah dengan lebar berbeda-beda, bukan kisi yang merata — Lembar hasil generasi yang umum. Sekilas tampak seperti tata letak 4x4, tetapi ukuran pose bervariasi, celahnya tidak merata, dan beberapa sprite tidak berada di tengah sel yang seharusnya. Satu bingkai bahkan melewati tepi kanvas.

Mengapa pemotongan kisi tetap gagal

Pemotongan kisi tetap membuat satu asumsi: gambar merupakan kisi sel sama besar. Lebar dibagi jumlah kolom, tinggi dibagi jumlah baris, lalu dipotong. Jika asumsi itu benar, hasilnya sempurna dan cepat. Jika tidak, kesalahannya bukan gangguan acak yang dapat diabaikan. Setiap potongan jatuh di tempat salah, dan kesalahan terlihat dengan cara yang paling penting bagi animasi.

Bingkai yang terpotong empat piksel di bagian atas bukan sekadar masalah kosmetik. Dalam engine game, semua bingkai digambar pada titik jangkar yang sama, sehingga sprite yang isinya berada empat piksel lebih rendah pada bingkai kedua daripada bingkai pertama akan tampak memantul saat diputar. Pemain menganggapnya bug meskipun tidak dapat menjelaskan penyebabnya. Memperbaikinya secara manual setelahnya, bingkai demi bingkai, memakan lebih banyak waktu daripada memotong dengan benar sejak awal.

Perbandingan berdampingan: kiri, garis kisi merah berjarak merata memotong beberapa karakter; kanan, kotak hijau mengikuti garis luar sebenarnya setiap karakter — Lembar sama dipotong dua cara. Garis tetap jatuh menurut perhitungan, memotong kepala dan senjata; deteksi berbasis konten menemukan batas nyata dahulu lalu memotong sekelilingnya.

Patokan: jika sheet berasal dari generator gambar, anggap tidak beraturan sampai Anda membuktikan sebaliknya. Jika berasal dari Aseprite, TexturePacker, atau pengekspor spritesheet, pemotongan kisi tetap hampir pasti benar dan sebaiknya digunakan.

Solusi: potong berdasarkan konten, bukan koordinat

Jika kisi tidak dapat menunjukkan lokasi sprite, piksel dapat melakukannya. Pada lembar berlatar transparan, setiap piksel merupakan bagian sprite (alfa di atas nol) atau bagian latar (alfa nol). Perbedaan tunggal itu cukup untuk menemukan sprite tanpa mengetahui tata letak sebelumnya.

Cara kerja deteksi berbasis konten

Pastikan latar transparan. Ambil sampel piksel sudut. Jika sepenuhnya transparan, lembar dapat dipertimbangkan untuk deteksi otomatis. Jika putih atau warna datar, lembar perlu penghapusan latar dahulu.
Temukan baris dan kolom kosong. Pindai seluruh gambar dan catat baris piksel yang sama sekali tidak mengandung piksel tidak transparan, begitu pula kolom. Pita kosong itu adalah celah antarsprite, di mana pun letaknya.
Potong di tengah setiap celah. Celah merupakan suatu rentang, bukan garis. Memotong di tengahnya memberi ruang paling luas kepada kedua sprite tetangga dan masih menoleransi satu atau dua piksel antialias yang tersasar.
Pangkas setiap potongan sesuai kotak pembatasnya sendiri. Setelah potongan terpisah, perkecil ke persegi panjang paling rapat yang memuat piksel tidak transparan. Ini menghapus ruang tambahan tidak merata yang membuat sel tidak cocok.
Periksa hasil dan ulangi. Pemrosesan pertama sering menyisakan masalah: satu potongan masih berisi dua sprite karena bersentuhan, atau sebuah potongan memiliki ruang kosong jauh lebih banyak daripada tetangganya. Menganalisis ulang keluaran dan membaginya atau memangkasnya lagi menangani sebagian besar masalah tersebut.

Inilah yang dilakukan Magic Slice tab pada Pemotong Lembar Sprite melakukan. Alat mendeteksi latar transparan, menemukan batas sprite dari saluran alfa, lalu menjalankan hingga tiga putaran penyempurnaan, memeriksa setiap potongan untuk padding berlebih atau beberapa sprite dan memotong ulang jika diperlukan. Pengaturan sensitivitas rendah, sedang, atau tinggi mengontrol agresivitas deteksi batas: naikkan ketika sprite hampir bersentuhan, turunkan ketika satu sprite dengan bagian terpisah (perisai melayang, efek mantra) terpecah.

Lembar sprite enam belas karakter dimuat dalam pemotong, dengan garis batas terdeteksi digambar di atasnya; garis berada di celah transparan antarkarakter, bukan pada interval merata, sehingga lebar kolom berbeda-beda — Batas mengikuti pita kosong antarkarakter, bukan kisi merata, sehingga kolom tidak sama besar. Baca dimensi di bawah ekspor di kanan: berbeda puluhan piksel, tepat hasil yang seharusnya diberikan pemangkasan — dan tepat alasan tahap ruang tambahan berikutnya penting.

Hasil potongan: enam belas berkas sprite terpisah bernama sprite_1 hingga sprite_16, masing-masing satu karakter, dengan dimensi seperti 204x257 dan 181x260 yang berbeda satu sama lain — Batas mengikuti pita kosong antarkarakter, bukan kisi merata, sehingga kolom tidak sama besar. Baca dimensi di bawah ekspor di kanan: berbeda puluhan piksel, tepat hasil yang seharusnya diberikan pemangkasan — dan tepat alasan tahap ruang tambahan berikutnya penting.

Jika lembar Anda memiliki latar solid

Deteksi konten memerlukan transparansi. Jika lembar Anda berlatar putih, hitam, atau magenta polos, jalankan penghapus latar terlebih dahulu — alat kami berada di /remove-bg dan bekerja dengan mengambil sampel piksel sudut serta menghapus setiap piksel yang cukup dekat dengan warna tersebut, lalu mengekspor PNG transparan. Lakukan ini sebelum pemotongan, bukan setelahnya: menghapus latar sekali pada satu sheet berarti satu operasi, sedangkan melakukannya pada enam belas bingkai terpisah memberi enam belas peluang hasil tidak konsisten.

Waspadai latar yang muncul dalam sprite. Jika karakter berbaju putih dan latarnya putih, penghapusan berbasis sudut akan melubangi bajunya. Dalam kasus itu, minta generator memakai warna latar yang tidak muncul pada subjek — magenta cerah dan hijau neon merupakan pilihan klasik karena alasan ini.

Garis kisi manual: cadangan yang selalu berhasil

Deteksi otomatis gagal pada beberapa lembar, dan penting untuk mengetahui kapan. Sprite yang tumpang tindih atau bersentuhan tidak dapat dipisahkan oleh pemindaian pita kosong karena memang tidak ada pita kosong. Lembar dengan bayangan atau cahaya yang menjangkau seluruh kanvas tidak memiliki baris yang sepenuhnya transparan di mana pun. Lembar yang satu karakternya terdiri dari bagian terpisah akan dipotong terlalu banyak.

Untuk semua itu, seret garis sendiri. Manual & Preset tab dimulai dari kisi preset antara 2x2 dan 6x6 — atau jumlah baris dan kolom khusus, hingga 20x20 — lalu memungkinkan Anda menyeret setiap garis kisi ke letak sebenarnya. Alur kerjanya:

Pilih preset terdekat dengan tata letak yang dimaksud — 4x4 untuk lembar enam belas bingkai, meskipun jarak sebenarnya meleset.
Seret setiap garis vertikal ke celah di kiri atau kanannya. Kerjakan dari kiri ke kanan agar selalu menyesuaikan terhadap garis yang sudah diperbaiki.
Lakukan hal yang sama untuk garis horizontal, dari atas ke bawah.
Perbesar bingkai yang paling rapat — biasanya pose terlebar — dan pastikan tidak ada garis yang melintasinya.
Ekspor. PNG mempertahankan transparansi dan cocok untuk sprite; JPG dan WebP juga tersedia, tetapi JPG membuang kanal alfa sepenuhnya.

Penyesuaian manual terdengar lambat, padahal tidak: lembar enam belas bingkai hanya memiliki enam garis bagian dalam, sehingga Anda menyeret enam kali, bukan membuat enam belas pangkasan. Dibandingkan membuka lembar dalam editor dan menyeleksi setiap bingkai, cara ini jauh lebih cepat.

Menyiapkan bingkai untuk engine game

Setelah memiliki PNG individual, ada dua jalur ke engine: impor sebagai bingkai terpisah atau kemas ulang menjadi lembar bersih seragam. Pilihan bergantung pada engine dan proyek.

Unity

Untuk bingkai terpisah, masukkan PNG ke proyek dan atur Texture Type menjadi Sprite (2D and UI), Sprite Mode menjadi Single. Atur Filter Mode menjadi Point (no filter) dan Compression ke None untuk pixel art — filter bilinear pada sprite 32x32 membuatnya terlihat buram. Atur Pixels Per Unit sesuai kisi, lalu pilih semua bingkai dan seret ke GameObject agar Unity membuat Animation Clip otomatis.

Untuk lembar yang dikemas ulang, gunakan Sprite Mode Multiple dan Sprite Editor. Grid By Cell Size hanya bekerja jika sheet yang dikemas ulang benar-benar seragam — itulah yang dihasilkan pengepakan ulang, dan itulah yang tidak dimiliki sheet AI asli.

Godot

Di Godot 4, tambahkan AnimatedSprite2D, buat SpriteFrames sumber daya, dan gunakan Add Frames from Sprite Sheet untuk sheet seragam atau Add Frames from File(s) untuk memuat PNG terpisah langsung. Bingkai terpisah lebih mudah di sini karena pengimpor sprite sheet mengharapkan sel sama besar. Untuk pixel art, atur filter tekstur ke Nearest — per node pada CanvasItem → Texture → Filter, atau secara global melalui rendering/textures/canvas_textures/default_texture_filter pengaturan proyek.

Jangkar dan kesejajaran

Langkah yang sering dilewati lalu menghabiskan sore menelusuri bug. Jika setiap bingkai dipangkas ke kotak sendiri, dimensi kini berbeda dan engine memusatkan masing-masing pada titik awal sama. Karakter dengan lengan terentang pada bingkai dua tampak meluncur mundur karena lebar tambahan menggeser pusat visual.

Perbaikannya menambahkan ruang setiap bingkai kembali ke ukuran bersama dengan posisi konten konsisten — biasanya tengah horizontal dan sejajar bawah vertikal agar kaki tetap berpijak. Tentukan ukuran bersama dari bingkai terbesar, bulatkan ke angka praktis, lalu isi sisanya transparan. Memangkas lalu menambahkan ruang terdengar berputar, tetapi tidak: pemangkasan membuang ruang sembarang generator, penambahan menerapkan ruang yang Anda kendalikan.

Pemecahan masalah

Deteksi menemukan terlalu banyak potongan

Sensitivitas terlalu tinggi atau sprite memiliki bagian terpisah. Turunkan sensitivitas agar celah transparan kecil dalam sprite tidak dianggap celah pemisah. Jika tidak membantu, beralih ke garis manual — karakter memegang objek terpisah selalu tampak sebagai dua sprite bagi pemindaian alfa.

Deteksi menemukan terlalu sedikit potongan

Sprite bersentuhan atau cahaya samar menghubungkan celah. Naikkan sensitivitas dahulu. Jika benar-benar tumpang tindih, tidak ada metode otomatis yang memisahkan; buat ulang dengan meminta ruang jelas antarbingkai secara eksplisit atau potong manual.

Lembar sprite padat berisi dua puluh karakter dengan garis batas terdeteksi digambar di atasnya; karakter saling berdekatan dan hanya beberapa garis horizontal ditemukan, sehingga beberapa baris dianggap sebagai satu pita — Seperti apa deteksi yang kurang, dan cara memperbaikinya. Tandanya adalah jumlah file lebih sedikit daripada bingkai pada sheet: pemindaian tidak menemukan kolom yang sepenuhnya transparan di antara karakter yang bersebelahan dan menganggapnya satu sprite. Menaikkan sensitivitas membuat pemotongan dilakukan pada celah lebih sempit.

Hasil deteksi terlalu sedikit: delapan berkas, bukan dua puluh, beberapa berupa strip lebar 1557 piksel berisi empat karakter menyatu, bukan satu per berkas — Seperti apa deteksi yang kurang, dan cara memperbaikinya. Tandanya adalah jumlah file lebih sedikit daripada bingkai pada sheet: pemindaian tidak menemukan kolom yang sepenuhnya transparan di antara karakter yang bersebelahan dan menganggapnya satu sprite. Menaikkan sensitivitas membuat pemotongan dilakukan pada celah lebih sempit.

Bingkai memiliki garis samar dari latar lama

Penghapusan latar menyisakan piksel tepi semitransparan yang diwarnai warna latar lama. Lihat panduan kami tentang PNG transparan dan tepi putih untuk perbaikannya.

Animasi bergetar dalam engine

Hampir selalu merupakan masalah jangkar, bukan pemotongan. Pastikan semua bingkai memiliki ukuran dan konvensi kesejajaran yang sama, lalu periksa pivot sprite dalam engine.

Tidak ada yang berhasil, lembar berantakan

Membuat ulang murah. Prompt yang andal meningkatkan hasil: minta latar transparan secara eksplisit, jarak merata dan ukuran karakter konsisten, lebih sedikit bingkai per lembar (3x3 jauh lebih mungkin dapat digunakan daripada 6x6), dan buat pose individual terpisah jika animasi lebih penting daripada kemudahan.

Pertanyaan yang sering diajukan

Bisakah saya memotong lembar sprite berlatar putih secara otomatis?

Tidak langsung dengan deteksi berbasis alfa karena tidak ada kanal alfa untuk dibaca. Hapus latar dahulu untuk membuat PNG transparan, lalu potong. Teknik berbasis warna datar, bukan alfa, memang ada tetapi jauh lebih rapuh ketika subjek berbagi warna dengan latar.

Apakah pemotongan di peramban menurunkan kualitas gambar?

Tidak jika mengekspor ke PNG atau WebP. Keduanya lossless untuk tujuan ini dan mempertahankan kanal alfa utuh. JPG lossy dan tidak memiliki alfa, sehingga ekspor JPG memampatkan ulang piksel sekaligus mengganti transparansi dengan warna solid. Untuk sprite, selalu ekspor PNG.

Apakah gambar saya diunggah ke mana pun saat menggunakan pemotong?

Tidak. Semua pemrosesan berjalan di peramban melalui Canvas API. Gambar dibaca dari perangkat ke canvas, dipotong di sana, lalu ditulis kembali sebagai unduhan. Tidak ada yang dikirim ke server, sehingga alat juga bekerja offline setelah halaman dimuat.

Berapa banyak bingkai yang sebaiknya saya minta kepada generator?

Lebih sedikit daripada yang Anda kira. Kualitas menurun cepat saat jumlah sel bertambah karena setiap sprite mendapat lebih sedikit perhatian model dan area piksel. Lembar 3x3 atau 4x4 pada 1024x1024 memberi sekitar 256 hingga 340 piksel per bingkai, cukup detail untuk digunakan. Kisi 6x6 pada resolusi sama memberi sekitar 170 piksel per bingkai dan pose cenderung menyatu kabur.

Coba pada sheet Anda sendiri

Buka Pemotong Lembar Sprite, masukkan lembar, dan mulai dengan tab Magic Slice. Jika deteksi otomatis tidak tepat, beralih ke Manual & Preset dan seret garis. Semua berjalan secara lokal di peramban.

Buka Pemotong Lembar Sprite