Cara Memotong Tileset dari Satu Gambar

Tileset dibandingkan lembar sprite: alasan persyaratan lebih tinggi

Lembar sprite berisi gambar-gambar terpisah. Jika satu bingkai siklus berjalan bergeser satu piksel dari tengah dibandingkan bingkai berikutnya, tidak ada yang memperhatikan — setiap bingkai digambar sendiri, dan sedikit ketidakteraturan posisi tampak seperti gerakan alami. Tileset berbeda. Setiap ubin ditempatkan tepat berdampingan dengan tetangganya pada kisi, berulang kali, di seluruh level. Ketidaksejajaran satu piksel pada satu ubin tidak terbatas pada ubin itu; hal tersebut berulang pada setiap sambungan tempat ubin muncul, dan pada tekstur lantai atau dinding berubin dapat berarti puluhan sambungan terlihat akibat satu potongan buruk.

Itulah seluruh batasan desain tileset: sambungan harus tak terlihat, sehingga tepi harus tepat per piksel, sehingga sumber memerlukan kisi nyata yang dapat ditemukan sebelum memotong.

Memilih ukuran ubin

Jika mengekstrak ubin dari aset orang lain yang sudah ada, ukuran ubin biasanya sudah ditentukan gambar — hitung berapa kali motif berulang (bata, rumpun rumput, papan lantai) muncul sepanjang lebar gambar lalu bagi. Jika Anda menentukan tileset sendiri dari gambar referensi atau lembar tekstur hasil generasi, ukuran umum adalah 16×16, 32×32, dan 48×48 piksel.

• 16×16 terlihat seperti pixel art retro klasik. Detail sangat terbatas — setiap tile harus menyampaikan materialnya (rumput, batu, air) melalui sangat sedikit piksel, yang merupakan keterampilan seni tersendiri.
• 32×32 merupakan default modern paling umum. Cukup ruang untuk tekstur dan bayangan tanpa memerlukan ketepatan subpiksel agar terbaca jelas pada zoom normal.
• 48×48 dan lebih besar cocok untuk game dengan tile layar yang lebih besar atau gambar bergaya lukisan, ketika Anda menginginkan detail tekstur terlihat, bukan tampilan pixel art datar.

Apa pun pilihan Anda, pertahankan konsistensinya di seluruh tileset dan, idealnya, setiap tileset dalam proyek. Ukuran tile campuran memaksa Anda menskalakan gambar saat runtime — yang menghadirkan kembali masalah kabur yang justru ingin dihindari pixel art — atau memelihara beberapa sistem kisi terpisah dalam editor level.

Menemukan offset ketika kisi tidak dimulai dari nol

Langkah yang menjebak. Ukuran ubin 32px, lalu potong pada 0, 32, 64, 96… dan ubin terbelah, tekstur dinding sebagian besar lantai pada satu baris dan dinding pada berikutnya. Kisi sebenarnya tidak dimulai di kiri atas gambar — memiliki offset beberapa piksel, sering karena batas sumber, margin tangkapan layar, atau ruang tambahan ekspor.

Untuk mencari offset, perbesar hingga tingkat piksel dan cari fitur berulang — garis mortar bata, bayangan dasar ubin rumput, sorotan tepi atas. Ukur koordinat piksel kemunculan pertama, lalu periksa apakah berulang setiap N piksel di mana N adalah ukuran tile Anda. Jika garis pemisah pertama berada pada x = 6 dan berikutnya pada x = 38, offset adalah 6 piksel dan perkiraan ukuran tile 32 terbukti benar. Terapkan offset pada kedua sumbu secara terpisah; offset horizontal dan vertikal tidak saling berkaitan, dan gambar dapat memiliki salah satunya saja.

Tile tanpa celah dan masalah rembesan warna

Lembar sprite sering memiliki celah transparan antarbingkai. Tileset biasanya tidak — ubin langsung berdampingan tanpa celah agar dapat tersambung mulus saat ditempatkan. Ini memiliki efek samping setelah tileset berada di engine: perembesan tekstur, ketika sedikit ubin tetangga terlihat pada tepi ubin yang ditempatkan.

Perembesan terjadi karena cara GPU mengambil sampel tekstur. Ketika ubin digambar pada ukuran yang tidak tepat sama 1:1 dengan piksel — sedikit diskalakan atau berada pada posisi kamera subpiksel — perender mengambil campuran piksel tepi ubin dan apa pun yang tepat berada di sampingnya dalam tekstur sumber, yaitu ubin tetangga. Solusinya bukan menambahkan celah pada gambar sumber, yang akan merusak penyusunan ubin; melainkan menggunakan filter point/nearest agar tidak ada interpolasi yang merembes, atau meminta engine mengekstrusi batas satu piksel otomatis saat pengemasan/impor. Sprite Atlas Unity dan pengimpor TileSet Godot sama-sama memiliki opsi ruang tambahan atau ekstrusi khusus untuk ini — aktifkan untuk setiap tileset yang akan diskalakan atau digerakkan pada posisi bukan bilangan bulat.

Menghapus ubin duplikat

Setelah memotong seluruh kisi, sering ada beberapa ubin berpiksel identik atau hampir identik — ubin rumput polos mungkin muncul empat kali dalam lembar referensi karena karya sumber mengulangnya demi keseimbangan visual. Menyimpan duplikat tidak sepenuhnya salah, tetapi memperbesar aset tileset, mempersulit pemindaian palet ubin editor level, dan membuat edit "ubin rumput" perlu diterapkan di beberapa tempat nanti.

Cara sederhana mendeteksi duplikat tanpa memeriksa puluhan kotak kecil satu per satu: hitung hash data piksel mentah setiap ubin dan bandingkan hash-nya. Ubin dengan hash identik memiliki piksel identik dan aman digabung menjadi satu. Ubin yang hampir sama — misalnya berbeda satu piksel yang diwarnai ulang, seperti obor menyala dan padam — memiliki hash berbeda dan memerlukan keputusan manusia apakah benar-benar berbeda atau merupakan varian yang sengaja perlu disimpan terpisah.

Memasukkannya ke engine

Unity: Tile Palette

Impor tileset terpotong sebagai Sprite dengan Sprite Mode diatur Multiple, potong dalam Sprite Editor menggunakan Grid By Cell Size sesuai ukuran ubin, lalu buka Window → 2D → Tile Palette, buat palet baru, lalu seret sprite yang sudah dipotong ke dalamnya. Setelah itu, Anda dapat melukis ubin langsung pada komponen Tilemap di adegan. Jika Anda sudah memotong PNG ubin satu per satu di luar Unity, Anda dapat melewati langkah Sprite Editor sepenuhnya dan langsung menyeret folder PNG ke palet.

Godot: resource TileSet

Buat resource TileSet pada node TileMapLayer, lalu pada sumber Atlas tambahkan gambar tileset yang sudah dipotong dengan ukuran ubin yang sesuai. Pengimpor Godot juga menyediakan pengaturan Separation dan Margin pada sumber atlas, untuk lembar dengan celah kecil antarubin, bukan tata letak tanpa celah yang dijelaskan di atas. Jika sumber tidak memiliki celah dan terlihat perembesan dalam viewport editor, aktifkan opsi texture padding atlas, yang menduplikasi piksel tepi secara internal agar pengambilan sampel tidak pernah mencapai ubin tetangga.

Urutan langkah yang praktis

1. Kenali ukuran ubin dengan menghitung fitur berulang sepanjang gambar.
2. Temukan offset x dan y dengan mencari titik awal ubin pertama yang sebenarnya.
3. Potong pada kisi itu — alat peramban dengan garis yang dapat diseret membuatnya langkah visual yang dapat diperiksa, bukan perhitungan buta.
4. Bandingkan hash ubin dan gabungkan duplikat yang persis sama.
5. Impor ke engine dengan ruang tambahan atau ekstrusi aktif jika ubin akan dirender pada skala atau posisi bukan bilangan bulat.

Pertanyaan yang sering diajukan