Cara Mengimpor Lembar Sprite ke Godot
Godot 4 membaca lembar sprite dengan tiga cara berbeda, dan memilih yang salah membuat Anda menulis ulang pengaturan animasi dua kali. Panduan ini membahas AnimatedSprite2D dengan SpriteFrames, wilayah AtlasTexture, dan pintasan hframes/vframes pada Sprite2D biasa — fungsi masing-masing dan langkah ketika lembar tidak berada pada kisi sebenarnya.
Memasukkan tekstur ke proyek
Godot mengimpor aset dengan memantau sistem berkas. Salin PNG ke mana pun dalam direktori proyek dan gambar muncul di dock FileSystem, dengan .import file yang dibuat di sampingnya. Jangan pernah mengedit file itu secara manual; ubah pengaturan pada panel Import dan tekan Impor ulang.
Sebelum hal lain, tangani pemfilteran karena inilah pengaturan yang paling terlihat untuk seni piksel. Di Godot 4, filter tekstur berada pada node, bukan pada impor, di bawah CanvasItem → Texture → Filter. Atur menjadi Nearest dan tepi piksel yang tegas tetap tegas. Mengaturnya per node segera menjadi merepotkan, jadi ubah default proyek: Project Settings → Rendering → Textures → rendering/textures/canvas_textures/default_texture_filter → Nearest. Setiap CanvasItem yang dibiarkan pada Inherit lalu mengambilnya.
Saat berada di panel Import, biarkan Mipmaps nonaktif untuk sprite 2D yang digambar mendekati ukuran asli, dan ingat bahwa Godot 4 mengompres tekstur ke format VRAM hanya ketika Anda memilih VRAM Compressed. Nilai bawaan Lossless mode yang Anda perlukan untuk pixel art; kompresi VRAM menghasilkan artefak blok yang justru paling terlihat pada gambar berwarna rata.
Metode 1: AnimatedSprite2D dan SpriteFrames
Jalur untuk apa pun yang dianimasikan dan tempat awal kebanyakan proyek. AnimatedSprite2D adalah node yang memuat SpriteFrames sumber daya — koleksi animasi bernama, masing-masing berupa daftar tekstur berurutan dengan nilai bingkai per detik dan flag pengulangan.
- Tambahkan AnimatedSprite2D ke adegan Anda.
- Dalam Inspector, klik Sprite Frames properti dan pilih New SpriteFrames. Panel SpriteFrames terbuka di bagian bawah editor.
- Ganti nama animasi bawaan dari default menjadi sesuatu yang bermakna — walk, idle. Anda akan merujuk string ini dari kode.
- Tambahkan bingkai dengan salah satu dari dua tombol bilah alat: Add Frames from Sprite Sheet (ikon kisi) atau Add Frames from File(s) (ikon berkas).
- Atur FPS animasi dan tombol loop, lalu putar dalam panel untuk memeriksa waktu sebelum menghubungkan kode.
Add Frames from Sprite Sheet
Memilih ikon kisi membuka dialog untuk memilih PNG dan menjelaskan tata letaknya: Horizontal dan Vertical jumlah, ditambah Separation dan Offset jika sheet memiliki margin atau celah. Pratinjau diperbarui langsung, lalu klik sel yang Anda inginkan sesuai urutan yang diinginkan. Shift-klik memilih rentang.
Ada dua detail yang perlu diketahui. Pertama, urutan pemilihan menjadi urutan bingkai, jadi mengeklik sel tidak berurutan menghasilkan animasi yang juga diputar tidak berurutan. Kedua, dialog ini mengasumsikan kisi beraturan, persis seperti Grid By Cell Count di Unity. Sama sekali tidak ada mode deteksi konten — tidak ada padanan pemotongan Automatic di Unity. Jika kisinya tidak benar, dialog ini tidak bisa memperbaikinya.
Add Frames from File(s)
Pilih beberapa PNG individual dan gambar menjadi bingkai dalam urutan Godot, yaitu alfabetis. Tambahkan nol di depan nama berkas — walk_01.png melalui walk_12.png — atau bingkai 10 berada tepat setelah bingkai 1. Jalur ini paling mudah dilakukan dengan benar, dan itulah sebabnya memotong sheet menjadi file terlebih dahulu sering menjadi alur kerja lebih lancar khususnya di Godot.
Metode 2: Wilayah AtlasTexture
Sebuah AtlasTexture adalah sumber daya yang menunjuk area tekstur lebih besar dan bertindak seperti tekstur mandiri di mana pun Godot menerimanya. Buat dengan mengatur properti tekstur apa pun ke New AtlasTexture, dengan menetapkan lembar tersebut ke atlas properti, dan memasukkan region persegi panjang (x, y, width, height).
Opsi paling fleksibel dan manual. Unggul saat sprite pada posisi sembarang, beberapa node memerlukan bagian berbeda satu tekstur, atau wilayah dibuat dari data dalam kode:
- Tema UI yang mengambil potongan nine-patch dan ikon dari satu tekstur bersama.
- Tileset atau katalog item tempat skrip membuat AtlasTextures dari manifest JSON yang diekspor bersama lembar.
- Sprite statis sekali pakai ketika membuat berkas terpisah terasa berlebihan.
Bagian filter_clip properti perlu diketahui: mengaktifkannya mencegah tekstur mengambil sampel di luar area, yang memperbaiki garis tipis sprite tetangga yang merembes di sepanjang tepi.
Metode 3: hframes dan vframes pada Sprite2D
Sebuah Sprite2D memiliki tiga properti yang memungkinkan pembacaan sheet tanpa sumber daya tambahan sama sekali: hframes, vframes, dan frame. Atur hframes menjadi 4 dan vframes menjadi 4, lalu Godot membagi tekstur menjadi kisi 4×4; mengatur frame ke indeks dari 0 hingga 15 menampilkan sel tersebut.
Ini pendekatan paling ringan dan dianimasikan dengan bersih dari track AnimationPlayer pada frame properti, atau dari beberapa baris dalam _process. Untuk lembar yang diekspor dari alat, memang hanya itu yang Anda perlukan.
Mengapa sheet tidak beraturan merusak ketiganya, dan apa solusinya
Setiap metode di atas memiliki asumsi yang sama: Anda dapat menjelaskan lembar secara aritmetis. Add Frames from Sprite Sheet memerlukan jumlah. hframes/vframes memerlukan jumlah. AtlasTexture memerlukan persegi panjang eksplisit yang dapat Anda tentukan dengan benar, tetapi hanya dengan mengukur masing-masing secara manual.
Lembar generator gambar merusak asumsi itu. Model diminta "siklus berjalan 4×4" membuat sesuatu mirip kisi karena sudah melihat ribuan kisi, bukan karena menghitung batas sel. Jarak bergeser beberapa piksel per kolom dan terakumulasi kiri ke kanan; ukuran sprite berubah menurut pose; konten tidak di tengah sel. Atur hframes 4 dan kolom pertama tampak baik, kedua sedikit terpotong, keempat memotong karakter.
Solusi andal berhenti mendeskripsikan lembar dan mulai membacanya. Pada latar transparan, setiap piksel sprite (alfa di atas nol) atau latar (alfa nol), dan baris serta kolom sepenuhnya transparan menandai batas nyata di mana pun. Potong tengah setiap celah, pangkas setiap bagian ke kontennya sendiri, dan Anda memiliki bingkai individual tanpa bergantung asumsi kisi.
Itulah yang dilakukan tab Magic Slice pada Pemotong Lembar Sprite melakukan, dengan beberapa putaran penyempurnaan untuk menemukan potongan yang masih berisi dua sprite atau padding berlebih. Ekspor hasil sebagai PNG terpisah dan muat dengan Add Frames from File(s). Ketika deteksi otomatis kesulitan — sprite bersentuhan, cahaya menyebar di seluruh kanvas, atau karakter memiliki bagian terpisah — tab Manual & Preset memungkinkan Anda menyeret setiap garis kisi ke celah yang benar, yaitu enam kali menyeret untuk lembar enam belas bingkai.
Jika lembar berlatar solid, bukan transparan, proses dengan penghapusan latar terlebih dahulu. Melakukannya sekali pada seluruh sheet berarti satu operasi dan satu hasil konsisten; melakukannya pada enam belas bingkai terpisah memberi enam belas peluang hasil berbeda.
PNG individual dibandingkan satu lembar
| Satu lembar | PNG Individual | |
|---|---|---|
| Upaya penyiapan | Rendah jika kisi nyata, tinggi jika tidak | Selalu rendah |
| Mengedit satu bingkai | Ekspor ulang dan potong ulang lembar | Ganti satu berkas |
| Pengurutan bingkai | Urutan klik dalam dialog | Urutan nama berkas — tambahkan nol di depan |
| Draw call | Mudah digabung dalam batch — satu tekstur | Lebih banyak tekstur kecuali dibuat atlas |
| Menangani tata letak tidak merata | Tidak | Ya — setiap file menjadi satu bingkai |
Untuk kebanyakan proyek 2D, perbedaan draw call bukan hambatan utama dan kemudahan berkas individual lebih unggul. Jika perpindahan tekstur akhirnya menjadi penting, jawabannya mengemas bingkai jadi ke atlas sebagai langkah build, bukan membuatnya sejak awal sebagai mega-lembar yang dipotong manual.
Pertanyaan yang sering diajukan
Seni piksel saya kabur di Godot 4. Apa yang terlewat?
Filter tekstur. Atur rendering/textures/canvas_textures/default_texture_filter ke Nearest pada Project Settings, dan periksa Texture Filter node sendiri menggunakan Inherit, bukan Linear eksplisit. Jika masih lembut, viewport mungkin diskalakan dengan faktor bukan bilangan bulat — periksa stretch mode dan scale mode pada Display → Window.
Haruskah saya menggunakan AnimatedSprite2D atau AnimationPlayer yang mengendalikan Sprite2D?
AnimatedSprite2D untuk animasi sederhana bingkai demi bingkai — memang dibuat untuk itu dan memerlukan lebih sedikit pengaturan. Gunakan AnimationPlayer ketika Anda perlu menganimasikan hal lain serempak dengan bingkai: posisi hitbox, pemicu suara, emisi partikel, visibilitas node. Banyak proyek akhirnya menggunakan keduanya.
Sedikit bagian bingkai berikutnya terlihat di sepanjang tepi sprite saya.
Perembesan tekstur akibat sampel tepat di luar wilayah. Ubah filter menjadi Nearest, aktifkan filter_clip jika Anda memakai AtlasTexture, dan pastikan ukuran sel habis membagi tekstur. Satu atau dua piksel padding transparan di antara sprite pada sumber menghilangkan masalah secara permanen.
Bisakah saya mengganti bingkai melalui kode, bukan panel animasi?
Ya. Pada Sprite2D, tetapkan ke frame properti secara langsung. Pada AnimatedSprite2D, panggil play("walk") atau atur frame saat dijeda. Mengendalikan bingkai secara manual umum untuk hal seperti bilah kesehatan yang dibangun dari status sprite terpisah.
Potong lembar menjadi bingkai terlebih dahulu
Semua pengimpor Godot mengasumsikan kisi merata. Jika milik Anda tidak demikian, potong di peramban dan muat hasilnya dengan Add Frames from File(s). Magic Slice membaca kanal alfa; Manual & Preset memungkinkan Anda menempatkan garis sendiri. Tidak ada yang meninggalkan perangkat.
Buka Pemotong Lembar Sprite