Pengantar sistem kartu ubin Unity baru

Keakraban dengan sistem ubin Unity 2D memberikan peluang yang sangat baik untuk menghemat waktu bagi pengembang dan studio game indie untuk membuat prototipe dan membuat game 2D berkualitas tinggi.

Tanpa sistem ini, Anda dapat menghabiskan berhari-hari, jika tidak berminggu-minggu, menulis sistem kartu ubin Anda sendiri atau memproses kartu orang lain. Dan ini hanya pemrograman, tetapi bagaimana dengan editor peta ubin?

Sistem baru ini gratis dan dibangun langsung ke editor Unity. Ini menyediakan banyak fitur yang akan kita bahas dalam tutorial ini.

Pada artikel ini, kami akan menggunakan game 2D ubin sederhana untuk mengetahui hal-hal berikut:

• Cara kerja kartu ubin.
• Cara mengaktifkan petak peta di Unity dan menyesuaikan kisi.
• Cara menambahkan sprite ke proyek, mengubahnya menjadi ubin, dan kemudian menambahkannya ke palet ubin.
• Cara menggunakan alat editor ubin untuk membuat level.
• Cara mengurutkan ubin dan menempatkannya di berbagai lapisan.
• Bagaimana cara menambahkan ubin fisika Unity.
• Bagaimana warna dinamis ubin.
• Cara mengganti petak prefab menggunakan kode dan logika asli.
• Cara menambahkan ekstensi Anda sendiri dan skrip peta skrip ke proyek.

Ya, daftarnya sangat bagus. Tapi jangan takut - ketika kita mulai mengerti, Anda akan segera memahami betapa sederhananya alat ini.

Catatan: tutorial ini mengasumsikan bahwa Anda pandai bekerja dengan editor Unity. Jika Anda merasa tidak terbiasa dengan hal itu, maka tutorial Pendahuluan untuk Persatuan memiliki semua yang Anda butuhkan untuk mempelajari tutorial ini. Selain itu, Anda memerlukan versi Unity 2017.3 atau lebih tinggi.

Apa itu game ubin?

Gim ubin 2D adalah gim mana pun di mana level atau area gim terdiri dari banyak ubin kecil (ubin) yang bersama-sama membentuk kotak ubin. Kadang-kadang perbedaan antara ubin bisa jelas, dan kadang-kadang mereka tampak solid dan tidak bisa dibedakan bagi para pemain.

Kumpulan ubin dalam permainan disebut tileset, dan setiap ubin biasanya adalah sprite, bagian dari spritesheet. Jika Anda ingin menangani lembar sprite dengan lebih baik, maka kami memiliki tutorial yang menjelaskan lembar sprite Unity.

Seperti yang Anda lihat dalam tutorial ini, biasanya ubin adalah kotak. Tetapi mereka dapat mengambil bentuk lain - persegi panjang, jajaran genjang atau segi enam. Dalam permainan, tampilan atas atau samping biasanya digunakan, tetapi kadang-kadang dalam permainan ubin, 2.5D juga digunakan.

Mungkin Anda sudah tahu dua game paling populer yang menggunakan sistem kartu ubin: Starbound dan Terraria .

Mulai bekerja

Unduh materi proyek untuk tutorial ini dan unzip file .zip.

Luncurkan editor Unity dan muat proyek pemula-Rayzor dari materi proyek yang belum dibongkar.

Inilah yang akan Anda kerjakan dalam proyek ini:

• Cinemachine / Gizmos: Unity Cinemachine ditambahkan hanya untuk mengimplementasikan kamera yang mudah digunakan mengikuti pemain.
• Palet: dalam folder ini kita akan menyimpan palet ubin kita sendiri.
• Rak pabrikan: Beberapa pabrikan pabrikan yang kami gunakan nanti dalam permainan.
• Adegan: di sini kita akan membuka dan menyimpan adegan.
• Skrip: beberapa skrip sederhana untuk mengontrol pergerakan pemain, logika tabrakan jebakan dan menang / kalah dalam permainan. Folder ini juga berisi skrip Unity Tilemap dari repositori Unity 2D Extras Github , yang akan kita gunakan nanti.
• Sfx: terdengar untuk game.
• Sprite: Sprite 2D dari mana kita akan membuat palet ubin. Mereka diambil dari paket gua dan ruang bawah tanah untuk roguelike . Penulis paket ini adalah kenney.nl.

Pembuatan game

Buka adegan Game dari folder Adegan .

Klik tombol Play di editor untuk meluncurkan game. Di jendela Game , pindahkan pahlawan dengan tombol WASD atau "panah".


Sementara sang pahlawan berkeliaran di sekitar latar belakang kamera yang sepertinya tak berujung dengan warna # 00000, hilang dalam kehampaan.

Untuk memperbaikinya, kita membutuhkan alat ubin 2D untuk membangun level dan mekanisme permainan yang menarik.

Mengenal palet ubin

Di editor, klik Window -> Tile Palette untuk membuka jendela 2D Tile Palette.


Jendela ini akan menjadi teman terbaik Anda ketika mengerjakan game ubin di Unity.

1. Serangkaian ikon ini menyediakan alat dasar untuk memanipulasi ubin, menggambar dan menghapus
2. Selektor ini memungkinkan Anda untuk membuat palet berbeda yang dapat dianggap sebagai palet untuk menggambar, di mana kami menempatkan "warna", dan dalam hal ini - ubin.
3. Pemilih ini memungkinkan Anda untuk membuat kuas dengan perilaku yang berbeda. Anda dapat menambahkan kuas Anda sendiri, yang perilakunya berbeda dari kuas default (misalnya, menggambar petak prefab dengan fungsionalitas tambahan)

Klik pada Create New Palette dan beri nama palet RoguelikeCave . Jangan mengubah opsi kisi dan sel.


Klik Buat dan pilih untuk menyimpan palet baru di folder Aset \ Palet proyek. Di dalamnya, buat folder RoguelikeCave baru.

Sekarang struktur folder proyek Anda akan terlihat seperti ini:


Di jendela editor palet Tile , RoguelikeCave harus dipilih; saat ini kami masih belum memiliki ubin:


Bagaimana seorang seniman dapat membuat karya agungnya jika ia tidak memiliki bahan?

Tanpa menutup jendela Tile Palette, pilih folder proyek Sprite / roguelike-cave-pack dan rentangkan aset roguelikeDungeon transparent.png . Kemudian pilih semua sprite di sprite sheet ini: pilih sprite pertama, tahan shift dan pilih sprite terakhir.

Seret semua sprite yang dipilih ke jendela Tile Palette RoguelikeCave:


Seret dan jatuhkan sprite ke jendela Tile Palette dan pilih tempat untuk menyimpan aset di Unity.

Buat folder Ubin baru di Aset / Palet / RoguelikeCave dan pilih folder ini sebagai lokasi penyimpanan:


Unity akan menghasilkan aset ubin untuk setiap sprite yang ditambahkan dari sprite sheet. Tunggu proses untuk menyelesaikan, kemudian tingkatkan ukuran jendela Tile Palette dan kagumi barisan ubin baru yang indah yang terletak di palet RoguelikeCave:


Ulangi proses di atas untuk membuat palet ubin menggunakan jendela Palet Tile , tapi kali ini beri nama palet RoguelikeCustom baru.

Tempatkan palet baru di folder baru. Beri nama folder RoguelikeCustom dan pindahkan ke folder Aset / Palet proyek.

Kali ini, menggunakan proses yang dijelaskan di atas, gunakan sprite dari Aset / Sprite / roguelike-custom / roguelike-normal-cutdown-sheet.png untuk mengisi ubin petak palet baru. Buat folder Ubin di dalam folder palet RoguelikeCustom dan pindahkan aset ubin di sana:


Bersukacitalah untuk diri sendiri, sekarang Anda tahu keajaiban membuat palet genteng!

Tile Map Mesh

Buka menu GameObject di bagian atas editor Unity (atau bilah menu Unity jika Anda menggunakan MacOS), klik pada Objek 2D dan kemudian Tilemap untuk membuat kotak Tilemap baru:


Anda harus melihat bahwa Grid GameObject baru telah ditambahkan ke hierarki adegan. Perluas dan pilih GameObject Tilemap bawaan .

Pikirkan Tilemap ini sebagai layer (mungkin salah satu dari banyak) dalam gim Anda. Anda dapat menambahkan objek baru untuk membuat lapisan Tilemap tambahan.

Di inspektur, Anda akan melihat dua komponen yang secara otomatis ditambahkan ke dalam GameObject ini:

• Komponen Tilemap digunakan oleh mesin Unity untuk menyimpan sprite di sirkuit yang ditandai dengan komponen Grid - dalam kasus kami, ini adalah GameObject Grid . Saat Anda membuat Tilemap untuk pertama kalinya, Anda tidak perlu khawatir tentang semua fitur teknis tentang bagaimana Unity berkomunikasi antara semua komponen ini.
• Tilemap Renderer menunjuk material yang akan digunakan untuk membuat ubin di Tilemap. Ini juga memungkinkan Anda untuk mengkonfigurasi properti penyortiran dari layer Tilemap ini.

Ganti nama GameObject Tilemap menjadi BaseLayer .

Menggunakan berbagai alat menggambar palet genteng

Ganti editor ke mode Pemandangan.

Tanpa menutup Tile Palette, pilih palet RoguelikeCave, dan kemudian pilih alat sikat (atau tekan B ). Pilih ubin pasir seperti yang ditunjukkan di bawah ini:


Di jendela adegan, gerakkan kursor ke kisi di sebelah pemain. Sikat ubin pasir akan patah ke kisi.

Memegang dan menahan tombol kiri mouse, menggambar area persegi panjang di sekitar pemain. Ini akan digambar pada layer Tilemap BaseLayer:


Menggambar area yang luas bisa menjadi tugas yang monoton, jadi ada sikat Filled Box yang dapat digunakan untuk mengecat area yang luas. Di jendela Tile Palette, klik pada ikon brush square (atau tekan U ).

Kembali ke editor dan gambar persegi panjang yang lebih besar di sekitar pemain dengan menekan dan menahan tombol kiri mouse, menyeret kursor dari kiri atas ke sudut kanan bawah:


Meskipun kami menambahkan sedikit warna pada game, penjara bawah tanah ini terlihat membosankan. Saatnya menambahkan beberapa detail!

Gunakan GameObject -> Objek 2D -> opsi menu Tilemap untuk membuat layer Tilemap baru. Kali ini akan menjadi satu-satunya objek yang dibuat dalam hierarki, karena kita sudah memiliki Grid yang cocok. Ubah nama layer ini menjadi DungeonFloorDecoration :


Di jendela Tile Palette, alihkan Active Tilemap ke layer DungeonFloorDecoration :


Pilih alat kuas ( B ), lalu gambar objek yang tersebar di peta di jendela Adegan:


Nonaktifkan dan kemudian aktifkan kembali DungeonFloorDecoration di hierarki GameObject untuk melihat bagaimana rendering pada Tilemap yang aktif mengubah lapisan DungeonFloorDecoration, dan semua ubin yang diberikan jatuh pada layer baru ini:


Buat layer Tilemap baru menggunakan GameObject -> Objek 2D -> opsi Tilemap lagi . Sebut saja Collideable . Di masa depan, kami menggunakannya untuk membuat dinding dan perbatasan.

Ganti Active Tilemap di jendela Tile Palette ke Collideable . Pilih alat sikat ( B ) dan kemudian gambarkan ubin berikut untuk membangun dinding di sekitar area bermain. Area yang disorot dengan warna merah pada gambar di bawah ini adalah bagian-bagian baru yang perlu ditambahkan:


Lihatlah tangkapan layar di bawah jendela Tile Palette untuk mencari tahu di mana menemukan ubin yang dibutuhkan untuk membangun dinding. Jangan lupa bahwa Anda dapat menggunakan kombinasi CTRL-Z atau CMD-Z untuk membatalkan tindakan atau menghapus kesalahan menggunakan sikat saat ini (sambil menahan Shift ):


Luncurkan game di editor dan cobalah untuk melewati tembok:


Anda tidak mengharapkan ini?

Masalahnya adalah kita baru menggambar ubin standar dan belum menerapkan Unity fisika sihir ke lapisan Tilemap.

Pilih GameObject Collideable dan tambahkan komponen baru dengan mengklik tombol Tambah Komponen di jendela Inspektur ; Di bidang pencarian, masukkan Tilemap Collider 2D :


Komponen ini dibuat khusus untuk game ubin Unity 2D. Ini hanya menerapkan bentuk collider fisik ke semua ubin di lapisan yang ditambahkan, tanpa melakukan pekerjaan lain.

Mulai permainan lagi dan coba untuk melewati dinding. Akses ditolak!

Catatan: terkadang saat memindahkan kamera Anda mungkin melihat garis hitam kecil di antara beberapa ubin. Ini tampaknya menjadi masalah pergerakan kamera dalam proyek-proyek dengan sistem 2D Tilemap Unity. Anda hampir dapat sepenuhnya menghilangkannya dengan menonaktifkan Anti-Aliasing dalam pengaturan gambar. Namun, bahkan jika ini dilakukan dalam proyek pengadaan, efeknya masih sedikit terlihat. Solusi untuk masalah ini mungkin dengan menambahkan skrip gerakan kamera Anda sendiri dengan piksel offset. Diskusi yang bagus tentang masalah ini dapat ditemukan di sini .

Tabrakan bekerja dengan baik, dan Anda mungkin berpikir itu sudah cukup. Tetapi untuk saat ini, colliders tidak dioptimalkan secara efisien. Dalam mode Pemandangan, perbesar bagian dinding dan lihat kontur colliders:


Ada collider di sekitar setiap ubin. Bagian dinding tengah tidak perlu colliders tambahan ini.

Dengan GameObject Collideable dipilih , tambahkan komponen 2D Collider Komposit ke dalamnya. Ini juga akan secara otomatis menambah RigidBody2D.

Setel parameter BodyType RigidBody2D ke Statis , lalu pilih kotak centang Digunakan oleh Komposit di komponen Tilemap Collider 2D :


Setelah itu, Anda akan melihat bahwa colliders persegi yang tidak perlu di tengah dinding menghilang.

Selesai membuat dinding dengan membangunnya dan menutup di bagian atas, sekitar 16 ubin. Jangan lupa bahwa Collideable harus dipilih sebagai Tilemap Aktif dari jendela Tile Palette:


Bagian penjara bawah tanah tidak akan menyulitkan pahlawan kita tanpa hambatan. Sekarang kita akan mulai bekerja untuk menciptakan ruang kematian, dilengkapi dengan koridor marmer kuno yang indah. Setelah mengatasi semua rintangan ini, pemain akan menerima hadiah - gunung emas.

Untuk menggambar koridor ini, kita akan menggunakan sikat genteng Rule Tile khusus . Seperti yang Anda lihat di awal tutorial, skrip ubin tambahan dari repositori Unity 2D Extras Github telah ditambahkan ke proyek. Salah satunya adalah Rule Tile.

Rule Tile memungkinkan kita untuk menetapkan aturan tentang ubin yang akan digambar tergantung pada ubin tetangga yang kita miliki.

Klik kanan pada folder Rak itan proyek dan pilih Buat -> Rule Tile (item ini harus di bagian atas menu). Namai elemen MarbleFloorRuleTile baru:


Pilih MarbleFloorRuleTile baru ini dan gunakan inspektur untuk mengatur Default Sprite ke roguelikeDungeon_transparent_335 . Kemudian tambahkan aturan Tiling Rule baru dengan mengklik ikon + . Pilih nilai roguelikeDungeon_transparent_339 untuk Sprite dari aturan ini dan klik semua kotak luar dalam skema aturan sehingga masing-masing memiliki panah hijau yang menunjuk ke luar:


Menggunakan alat kotak mengisi sikat ( B ) di Palet Tile dan memilih Tilemap BaseLayer , menggambar bagian lurus dari dinding marmer. Perlu bahwa itu mencakup semua saat ruang bebas lantai.

Anda dapat melihat bahwa ketika kita melakukan ini, lapisan akan menutup ubin dinding dengan colliders, karena urutan lapisan belum diatur. Ini dapat dengan mudah diperbaiki dengan memilih GameObject Collideable dan mengubah Order in Layer dari komponen Tilemap Renderer ke nilai yang lebih tinggi ( 5 akan cukup):


Kembali ke folder Prefabs proyek, buka jendela Tile dan pilih palet RoguelikeCave, lalu seret MarbleFloorRuleTile ke ruang kosong di palet:


Gunakan sikat isian kotak dan gambar beberapa bagian lantai marmer di ruangan:


Perhatikan bahwa ubin aturan khusus, yang sepenuhnya dikelilingi dari semua sudut dan wajah, menjadi ubin yang dihiasi (sprite yang dipilih dalam editor Aturan Ubin).

Ini jebakan!

Tidak, kami tidak akan menambahkan Admiral Akbar ke permainan sebagai karakter. Kami akan membuat sikat ubin untuk cetakan dari perangkap, yang akan kami gunakan untuk menggambar perangkap yang menembak dengan pisau berputar!

Buat GameObject kosong baru di hierarki dan beri nama ShootingTrap . Buat anak GameObject kosong di ShootingTrap. Beri nama itu Sprite :


Pilih Sprite dan tambahkan komponen Sprite Renderer ke dalamnya. Atur Layer Sorting ke Player dan Order in Layer menjadi 1 sehingga ia merender di atas sisa layer. Pilih bidang Sprite , dan setel roguelikeDungeon_transparent_180 sebagai sprite.

Sekarang putar Transform objek Sprite oleh -90 pada sumbu Z :


Selanjutnya, kembali ke GameObject ShootingTrap dan tambahkan komponen baru menggunakan inspektur. Di bidang pencarian, temukan Perangkap Pemotretan dan lampirkan skrip ini.

Skrip ini ditambahkan ke file proyek yang Anda unduh; pada kenyataannya, ia meluncurkan corutin setiap dua detik, menciptakan contoh cetakan dari pisau gergaji yang berputar (atau cetakan lainnya) pada posisi perangkap saat ini.

Setel item ke parameter Prefab Tembak komponen Perangkap Menembak ke Proyektil (cetakan terletak di / Aset / cetakan ):


Luncurkan game lagi di editor dan gunakan mode Scene untuk menemukan jebakan. Dia bekerja!


Seret salinan ShootingTrap dari hierarki ke folder / Asset / Prefabs proyek untuk membuat cetakan. Hapus ShootingTrap dari hierarki.

Kami menggunakan skrip kuas ubin lain yang disebut PrefabBrush untuk membuat kuas yang dapat menggambar cetakan pada lapisan Tilemap.

Klik kanan pada folder / Asset / Prefab proyek dan pilih Create -> Prefab Brush . Beri nama objek PrefabBrush .

Gunakan inspektur untuk mengatur parameter Prefab Size PrefabBrush ke 1 , dan parameter Elemen 0 ke ShootingTrap .


Buat layer Tilemap baru yang disebut Traps in the Grid dan buka jendela Tile Palette.

Pilih sikat ubin biasa ( B ) dan gunakan menu drop-down di bagian bawah jendela Tile Palette untuk memilih PrefabBrush . Pilih Active Tilemap Traps sebagai layer dan gunakan jendela Scene untuk menggambar beberapa trap cetakan di sepanjang batas kiri ruangan.


Rentangkan GameObject Traps dalam hierarki dan bereksperimen dengan nilai Shoot Start Delay untuk setiap nilai pada setiap Gameobject ShootingTrap menggunakan skrip Trap Menembak di inspektur. Tambahkan 0,25 ke nilai setiap perangkap, yaitu .:

• ShootingTrap Pertama -> Tunda Mulai Tembak = 0,1
• ShootingTrap Kedua -> Tunda Mulai Tembak = 0,35
• ShootingTrap Ketiga -> Tunda Mulai Tembak = 0,6
• Dan seterusnya ...

Luncurkan game dan lulus ujian, jika Anda berani.

Tujuan akhir

Tujuan dari penjara bawah tanah mini ini adalah untuk mendapatkan tumpukan emas. Ketenaran dan kekayaan menunggu mereka yang mencapainya, menghindari pisau terbang yang mematikan.

Buat layer Tilemap baru yang disebut Goal di GameObject Grid . Pilih Goal dan ubah nilai Urutan Renderer Tilemap di Layer menjadi 2 :


Tanpa menutup jendela Tile Palette, pastikan PrefabBrush masih dipilih. Jadikan Elemen 0 merujuk ke preset Sasaran dari folder / Asset / Prefabs proyek.

Ini adalah cetakan dengan gunung sprite emas, dengan Box Collider 2D dengan Is Trigger aktif, sumber suara yang ditambahkan, dan skrip Goal.cs sederhana yang mereproduksi suara mencapai target dan memulai kembali level ketika pemain jatuh ke area pemicu.

Gunakan sikat ubin standar untuk menggambar satu ubin prefab target di bagian atas ruangan di belakang jebakan:


Mulai permainan lagi dan cobalah untuk mencapai tujuan. Saat Anda masuk ke ubin ini, logika OnTriggerEnter2D() dari Goal.cs , mereproduksi efek suara dan memulai kembali level.

Sentuhan akhir

Sekarang penjara bawah tanah terlalu ringan dan gratis. Kita dapat menambahkan gaya padanya dengan beralih ke bahan sprite 2D yang dapat merespons cahaya.

Pilih objek Sprite Player, Goal, dan ShootingTrap, dan minta Spender Renderer Material menggunakan SpriteLightingMaterial :


Ini adalah material dengan Sprite / Diffuse shader yang melekat padanya. Ini memungkinkan pencahayaan pemandangan memengaruhi sprite.

Di GameObject Grid, pilih objek BaseLayer, DungeonFloorDecoration, Collideable, dan Goal , dan kemudian gunakan inspektur untuk menggunakan Tilemap Renderer Material SpriteLightingMaterial dalam materi juga .

Kemudian pilih Directional light di GameObject Lights dan kurangi Intensity Light menjadi 0,3 .

Jauh lebih baik!


Juga, Anda sekarang akan melihat bahwa Player membawa cahaya Point , yaitu, Lantern bersinar di sekelilingnya.

Sekarang sprite dalam adegan menggunakan material yang tepat, pencahayaan Unity memengaruhi semua sprite di sekitarnya.

Seret dua salinan prefab FlickerLight dari folder / Asset / Prefab proyek di Scene dan letakkan di GameObject Lights .

Atur posisi cetakan pertama (X: -11.25, Y: 4, Z: -1.35) , dan yang kedua - (X: 2.75, Y: 4, Z: -1.35) .

Buat layer Tilemap baru yang disebut WallsAndObjects dan atur inspektur Tilemap Renderer di Layer menjadi 15 . Ingatlah bahwa Material juga menggunakan SpriteLightingMaterial .

Ubah kuas palet ubin kembali ke Default Brush dan Active Tilemap ke WallsAndObjects .

Gunakan alat brush ( B ) untuk menggambar dua ubin "lampu" di bawah masing-masing FlickerLight baru yang kami tempatkan di sudut-sudut area awal:

Waktu kesulitan

Mari kita lihat apakah kita bisa meningkatkan dungeon lebih jauh. Gunakan layer Tilemap WallsAndObjects untuk membuat rak buku di bagian atas ruang bawah tanah menggunakan palet ubin lain yang disebut RoguelikeCustom . Juga gambar satu atau dua bagian dari dinding yang retak.

Kembali ke lapisan Tilemap DungeonFloorDecoration dan tambahkan beberapa detail lagi ke lantai marmer, misalnya, retakan pada beberapa ubin:


Selamat, Anda telah menyelesaikan level mini dungeon pertama Anda! Akibatnya, Anda harus mendapatkan yang serupa:

Ke mana harus pergi selanjutnya?

Jika Anda melewatkan satu langkah, Anda dapat melihat hasil akhir dari tutorial ini dengan membuka proyek final Unity Rayzor dari materi yang dapat diunduh.

Kami belajar banyak dalam tutorial ini, tetapi seperti halnya bisnis lain, selalu ada hal lain!

Ada skrip sikat ubin yang menarik yang tidak dibahas dalam tutorial ini. Baca tentang mereka di sini dan pikirkan apakah Anda dapat menggunakannya.

Anda juga dapat mempelajari cara membuat ubin animasi di sini .