Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Complete Games

Menciptakan Game Puzzle Berbasis Grid Seperti Minesweeper Pada Unity: Interaksi

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Build a Grid-Based Puzzle Game Like Minesweeper in Unity.
Build a Grid-Based Puzzle Game Like Minesweeper in Unity: Setup
Build a Grid-Based Puzzle Game Like Minesweeper in Unity: Winning

Indonesian (Bahasa Indonesia) translation by Kaso Toluppa (you can also view the original English article)

Kami melanjutkan untuk membangun permainan puzzle berbasis grid dengan menghubungkan ubin satu sama lain, membuat mereka menyala dengan kursor mouse, dan menambahkan kemampuan untuk menempatkan bendera.

Pada bagian terakhir dari tutorial ini, kami menciptakan bidang tile yang menjadi basis permainan puzzle kami. Pada bagian ini, kita akan membuatnya dapat dimainkan. Tutorial ini melanjutkan dari tutorial sebelumnya yang terakhir kali dipos, jadi bacalah tutorial tersebut sebelum memulai ini.

Menyalakan ubin pada Gunaka mouse di atas

Saat mouse Anda berada di atas Tile, tentusaja kita menginkannya menyala dan bersinar. Ini adalah fitur keren yang bahkan memberikan tindakan sederhana (seperti mengarahkan pointer mouse Anda) yaitu memberikan umpan balik otomatis.

Kami menggunakan fungsi OnMouseOver () untuk melakukannya. Ini akan dipanggil secara otomatis setiap kali kursor mouse bergerak di atas objek kode dilampirkan. Tambahkan variabel ini ke skrip Tile :

Kemudian tetapkan material dasar Anda ke slot materialIdle. Kita juga membutuhkan material lightup, yang seharusnya memiliki warna yang sama, namun menggunakan shader yang berbeda. Sementara material dasarnya bisa memiliki shader yang diffuse

... material lightup bisa memiliki shader specular. Banyak game menggunakan pelek shader tambahan untuk efek itu juga. Mereka tidak terdapat dalam Unity, tapi jika Anda bisa memikirkan cara mendapatkannya, Anda bisa menggunakannya sendiri!

Jangan lupa untuk benar-benar menetapkan material ke slot Material pada prefab tile, sehingga bisa digunakan.

Kemudian tambahkan fungsi OnMouseOver() ini ke script Tile

Cobalah! Bila Anda memindahkan kursor mouse ke atas tile, mereka harus mengubah penampilan mereka.

sesuatu yang mungkin Anda sadari adalah bahwa tile mengubah penampilan mereka begitu mouse menutupi mereka, tapi sebenarnya tidak berubah kembali. Untuk itu, kita perlu menggunakan fungsi OnMouseExit ():

Dan voilá; Kita sekarang memiliki tile yang menyala dan membuat permainan jauh lebih menarik.

Menetapkan ID ke Tile

Agar tile saling berkomunikasi (untuk mengetahui berapa banyak ranjau yang ada di dekatnya), setiap tile perlu mengetahui tile tetangganya. Salah satu cara untuk melakukannya adalah dengan menggunakan ID, yang akan ditetapkan untuk masing masing tile. 

Mulailah dengan mengadaptasi kode Tile untuk menyertakan variabel ID. Selain itu, tambahkan variabel untuk menampung jumlah tile per baris, yang akan kita gunakan dalam perhitungan ini:

Kemudian ubah perintah instantiate dalam kode Grid agar terlihat seperti potongan berikut. (Baris baru menetapkan ID ke tile saat dibuat.)

Tile pertama akan mendapatkan ID 0, yang berikutnya akan diberi ID 1, dan seterusnya. Anda dapat memeriksa mereka dengan mengklik tile selama proses berlangsung, dan melihat pada nomor berapa mereka ditetapkan.

Mendapatkan TileTetangga

Sekarang kita ingin setiap ubin tahu tentang tile tetangganya. Saat kita melakukan tindakan pada tile (seperti membukanya), kita perlu mempertimbangkan tile tetangga.

Dalam kasus kami, ini berarti menghitung ranjau yang bersebelahan dengan tile yang baru saja kita buka, dan mungkin juga membuka tile lainnya - tapi akan kita temukan nanti.

Ini juga bisa digunakan untuk memeriksa apakah tiga atau lebih tile saling berdekatan dalam game Match-3.

Mulailah dengan menambahkan variabel-variabel ini ke skrip Tile:

Ini akan menampung semua tile tetangga. Mereka bersifat publik sehingga kita dapat memeriksa selama proses berjalan bahwa mereka sebenarnya telah ditetapkan dengan benar.

Karena sekarang setiap Tile memiliki ID, jumlah tile yang muncul di kolom, dan akses ke array statis yang memiliki semua tile yang tersimpan di kelas Grid, kita dapat menghitung posisi tile tetangga setelah dibuat.

Bagian itu terlihat seperti ini:

Dengan ID dan jumlah tile per baris, kita bisa menghitung tile  mana yang terdekat. Misalkan tile yang melakukan perhitungan memiliki ID 3, dan ada lima tile per baris.  Tile di atasnya akan memiliki ID 8 (ID ubin yang dipilih ditambah jumlah tile per baris); tile ke kanan akan memiliki ID 6 (ID ubin yang dipilih ditambah satu), dan seterusnya.

Sayangnya, ini tidak cukup. Kode tersebut memeriksa nomornya dengan benar, namun saat ia meminta array allTiles untuk mengembalikan tile, ia dapat meminta nomor indeks yang berada di luar jangkauan, menghasilkan daftar kesalahan yang panjang.

Untuk memperbaiki ini, kita perlu memeriksa bahwa indeks yang kita minta dari array sebenarnya benar. Cara yang paling efisien untuk melakukannya adalah dengan fungsi inBounds () baru. Tambahkan ke Tile:

Sekarang kita perlu memeriksa bahwa setiap tile tetangga yang mungkin ada di dalam batas-batas array yang menampung semua tile, sebelum kita benar-benar mencoba mendapatkannya dari array:

Blok kode itu memeriksa semua kemungkinannya. Ini juga memeriksa apakah tile berada di tepi lapangan. Sebuah tile di sisi kanan grid sebenarnya tidak memiliki tile di sebelah kanannya.

Cobalah! Periksa beberapa tile dan lihat apakah Anda telah mendapatkan semua tile tetangga dengan benar. Seharusnya terlihat seperti ini:

Karena tile di tangkapan layar ini adalah tile di tepi kanan lapangan, tidak ada tetangga pada sisi kanan, kanan atas, atau kanan bawah. Variabel tanpa tile yang ditetapkan benar-benar kosong, dan sebuah tes menunjukkan bahwa yang tersisa telah ditetapkan dengan benar juga.

Akhirnya, setelah kami memastikan bahwa ini berhasil, kami menambahkan semua tile tetangga ke dalam array, sehingga kami dapat mengaksesnya sekaligus. Kita perlu mendeklarasikan array ini di awal:

Anda kemudian dapat menyesuaikan setiap baris algoritma yang kami buat di atas untuk memasukkan setiap tile tetangga di dalam array itu, atau tambahkan blok ini sesudahnya:

Menghitung Ranjau Terdekat

Setelah semua tile telah dibuat, semua ranjau telah ditetapkan, dan setiap tile telah menemukan tetangganya, kita kemudian perlu memeriksa apakah masing-masing tile di dekatnya ditambang atau tidak.

Kode Grid sudah menetapkan jumlah ranjau yang ditentukan ke tile yang dipilih secara acak. Sekarang kita hanya butuh setiap tile untuk mengecek tetangganya. Tambahkan kode ini di awal naskah Tile, sehingga kita memiliki tempat untuk menyimpan jumlah ranjau:

Untuk menghitungnya, kita menjalankan array yang sebelumnya menambahkan semua tile tetangga, dan memeriksa setiap entri pada gilirannya untuk melihat apakah itu diranjau atau tidak. Jika demikian, kita meningkatkan nilai nextMines menjadi1.

Fungsi ini juga mengatur elemen teks dari tile untuk menampilkan jumlah ranjau di dekatnya. Jika tidak ada ranjau itu tidak menampilkan apa-apa (bukan 0).

Melacak Keadaan Setiap Ranjau

Mari tambahkan keadaan ke setiap tile. Dengan cara ini, kita dapat melacak keadaan apa saat ini yang sedang terjadi-  keadaan diam, terbuka, atau ditandai. Bergantung pada keadaan tile mana yang berada, akan menghasilkan reaksi yang berbeda. Tambahkan sekarang, seperti yang akan kita gunakan saat ini.

Menambahkan Tanda Bendera

Kami ingin bisa menandai tile dengan tanda bendera. Tile bertanda memiliki bendera kecil di atasnya. Jika kita klik kanan bendera maka akan hilang lagi. Jika semua tile bekas ranjau telah ditandai, dan tidak ada tile yang ditandai dengan benar, permainan telah berhasilkan dimenangkan.

Mulailah dengan membuat objek bendera, dan menambahkannya ke tile (Anda akan menemukan mesh bendera di file sumber).

Kita juga butuh variabel untuk mengakses bendera. Tambahkan kode ini:

Ingatlah untuk menyeret bendera yang merupakan bagian dari tile ke slot displayFlag.

Juga, tambahkan ini ke fungsi start () tile:

Ini akan menonaktifkan bendera dan teks pada awalnya. Nantinya, kita kemudian bisa mengaktifkan bendera, membuatnya terlihat lagi, meletakkannya di sana dengan efektif. Sebagai alternatif, jika kita menemukan ubin, kita membuat teks itu terlihat lagi.

Menempatkan dan Menghapus Bendera

Kami akan menulis fungsi yang menangani penempatan dan penghapusan bendera:

Setelah menambahkannya, tambahkan juga kode untuk menangani acara klik. Untuk melakukan ini, menyesuaikan fungsi OnMouseOver () kita harus memeriksa klik mouse:

Ini akan mengenali fungsi klik kanan (tombol 1) dan mengaktifkan fungsi SetFlag (). Kemudian akan mengaktifkan atau menonaktifkan bendera pada tile saat ini. Cobalah!

Kesimpulan

Kami telah memperluas permainan puzzle kami dengan beberapa fitur vital, membuatnya lebih menarik secara visual, dan memberi pemain kemampuan untuk mempengaruhi lapangan permainan.

Lain kali, kita akan menambahkan pengungkap tile, membuat antarmuka yang sederhana, dan mengubahnya menjadi permainan yang tepat.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.