Cara Membuat Game Ular Tangga Dengan Unity #2 (Board & Pion)

Kali ini kita akan memasuki Part 2 dari pembuatan boardgame-boardgame-man menggunakan Unity. Bagi anda yang baru tune in, dimohon untuk terlebih dahulu membaca artikel ini:

Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2Cara Membuat Game Ular Tangga Dengan Unity #2

Bagaimana Membuat Board Game Di Unity? Dan untuk artikel Part 1, barangkali ada yang ketinggalan bisa membaca di sini: Boardgame Unity Part 1 Oke. Ayo kita lanjutkan! Setelah selesai membuat dadu dan animasinya, maka langkah selanjutnya adalah kita perlu membuat Board. Ya iyalah, namanya juga boardgame.
 

Anda bisa menggunakan Terrain untuk membuat Board, tapi untuk kasus ini rasanya cukup dengan Plane saja. Jadi klik GameObject > 3D Object > Plane


Atur posisi Plane sebagai berikut. Minimal pas di sorot sama kamera "rada enakeun" viewnya.
 

Saya menyusunnya kurang lebih seperti ini.
 

Setelah itu tambahkan sebuah Asset berupa texture Boardgame yang akan anda gunakan.Tutorial ini menggunakan gambar permainan Ular Tangga.
 

Anda bisa memasukkan dengan cara men-drag langsung dari Windows Explorer.
 

Atau dengan cara yang lebih formal klik kanan di panel Asset dan pilih Import New Assets

Tarik gambar tersebut langsung ke dalam Plane. Sreet!
 

Kalau posisinya terbalik (dan biasanya memang terbalik) putar saja Planenya sebanyak Y=180 di panel Transform
 

Nah, sampai sini coba kita Play dulu. Sip! Udah kelihatan kayak boardgame beneran nih. Lanjut bro!
 

Selanjutnya kita akan tambahkan bidak-bidaknya. Pake apa? Yang gampang aja. Pake GameObject bawaan Unity yaitu si Capsule.
 

Pasang posisinya di posisi Start nomor 1.
 

Kemudian tambahkan Material Merah dan kita beri nama Red Player. Bagi anda yang tidak tahu bagaimana caranya menambahkan material dan semacamnya bisa membaca dulu artikel mengenai itu di sini: Cara Membuat Material di Unity


Oke. Udah mulai keren nih.

Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2 Cara Membuat Game Ular Tangga Dengan Unity #2

Supaya ada lawan, buatlah satu Capsule lagi dan kasih warna biru. Langkah ini pasti sudah pada bisa kan? :-)
 

Langkah selanjutnya merupakan langkah trik yang saya karang sendiri. Serius. Bagi anda yang jago dalam pemrograman pasti akan dapat menemukan langkah yang lebih baik dari ini. Tapi berhubung kemampuan pemrograman saya terbatas dan saya orangnya males ngoding, jadi saya cari cara yang lebih mudah versi saya tentunya, hehehe. Intinya saya akan membuat "plat tiruan" sebanyak petak boardgame yang akan dideteksi oleh Unity sebagai pijakan utama terutama untuk mendapatkan nilai Vector3nya. Apa maksudnya? Saya kasih gambar ini sekali lagi. Ingat bahwa Unity NGGAK BISA BACA NILAI DADU. Yang bisa baca nilai dadu adalah anda. Unity BUTUH NILAI VARIABEL. Dan Unity NGGAK BISA BACA NOMOR PETAK BOARDGAME. Yang bisa baca nomor-nomor petak adalah anda. Unity BUTUH NILAI VECTOR3 (X,Y,Z)

 

Jadi langkah yang saya lakukan adalah mencoba membuat jembatan antara MATA MANUSIA dan UNITY untuk mendapatkan persepsi yang sama tentang petak boardgame. Bingung? Sama saya juga bingung. Karena kita sama-sama bingung gimana kalau kita ketawa saja. Hahaha. *jadi kangen OVJ* 


Praktek aja yuk? Buatlah sebuah Cube.
 

Atur pandangan menjadi TOP. Ini penting biar anda tidak salah ngegeser dan tidak salah nelen. Eh?
 

Atur posisinya di salah satu petak. Mesti paaaas nutupin petaknya. Tapi menceng-menceng dikit gapapa sih. Tapi kalo bisa paaaaas banget. Boong deng. Rada mletat-mleot juga gapapa. Nggak usah maksain. Tapi kalo bisa ini mah... paassss banget. *BLETAK! Di hajar pembaca!* Hehehe.
 

Kalau sudah pas, coba anda uncek MESH RENDERER, salah satu komponennya CUBE biar bentuknya bisa transparan.
 

Atur Tipis Cubnya rada mirip lantai. Paaaas banget dengan Board. Hehehe. Rada menceng-menceng nggak apa-apa sih sebenarnya. Eaaa mulai lagi.
 

Oke. Kurang lebih bentuk lantainya seperti ini. Satu hal yang perlu anda tahu bahwa nilai Vector3 dari Cube di atas terletak paaaaas banget di tengah-tengahnya. Anda lihat bagian yang ada gizmo panah tiga warna itu? Nah, nilai Vector3 nya sebenarnya nunjuk ke sana. Paaaas banget. Nggak menceng-menceng. Nah, habis gitu ngapain? Kok pake nanya? Gunakan skill mahasiswamu yang paling keren sejagat raya dong!
 

COPY PASTE!
 

Lakukan terus sampai seluruh Boardgame tertutupi dan buat sebuah GameObject baru bernama Plat untuk menjadi Parentnya. Jadi panel Hierarchy kelihatan rada rapi.
 

Oh lupa. Jangan sampai user tahu "tipuan" kita. Jadi hapus centang di semua Lantai Cube. Biarkan user berpikir bahwa bidak yang akan bergerak nanti benar-benar bergerak berdasarkan nomor yang tertera pada Boardgame. Padahal.. you know lah.
 

Selanjutnya buat sebuah Script baru, beri nama Player.cs misalnya. Kemudian ketikkan script berikut:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class Player : MonoBehaviour {  
4:       public GameObject RedPlayer;  
5:       public GameObject BluePlayer;  
6:       public GameObject Dadu;  
7:       public GameObject[] Plat;  
8:       int RedPlayerPos, BluePlayerPos, CounterPos, TargetPos;  
9:       bool RedPlayerMove, BluePlayerMove;  
10:       // Use this for initialization  
11:       void Start () {  
12:            RedPlayerPos = 0;  
13:            BluePlayerPos = 0;  
14:            RedPlayerMove = false;  
15:            BluePlayerMove = false;  
16:       }  
17:       // Update is called once per frame  
18:       void Update () {  
19:            if (RedPlayerMove){  
20:                 RedPlayer.transform.position = Vector3.MoveTowards(RedPlayer.transform.position, Plat[RedPlayerPos].transform.position, 0.1f);  
21:                 if (Vector3.Distance(RedPlayer.transform.position, Plat[RedPlayerPos].transform.position) < 0.1f){  
22:                      if (CounterPos < TargetPos){  
23:                           CounterPos++;  
24:                           RedPlayerPos++;  
25:                      } else {  
26:                           RedPlayerMove = false;  
27:                           if (RedPlayerPos == Plat.Length-1) {  
28:                                Debug.Log("Red Player Wins!");  
29:                           }  
30:                      }  
31:                 }   
32:            } else   
33:            if (BluePlayerMove){  
34:                 BluePlayer.transform.position = Vector3.MoveTowards(BluePlayer.transform.position, Plat[BluePlayerPos].transform.position, 0.1f);  
35:                 if (Vector3.Distance(BluePlayer.transform.position, Plat[BluePlayerPos].transform.position) < 0.1f){  
36:                      if (CounterPos < TargetPos){  
37:                           CounterPos++;  
38:                           BluePlayerPos++;  
39:                      } else {  
40:                           BluePlayerMove = false;  
41:                           if (BluePlayerPos == Plat.Length-1) {  
42:                                Debug.Log("Blue Player Wins!");  
43:                           }  
44:                      }  
45:                 }  
46:            }  
47:       }  
48:       void ExecRedPlayerMove(){  
49:            RedPlayerMove = true;  
50:            TargetPos = Dadu.GetComponent<Dadu>().DaduNumber;  
51:            if ((TargetPos + RedPlayerPos) < Plat.Length){  
52:                 RedPlayerPos++;  
53:                 CounterPos = 1;  
54:            }  
55:       }  
56:       void ExecBluePlayerMove(){  
57:            BluePlayerMove = true;  
58:            TargetPos = Dadu.GetComponent<Dadu>().DaduNumber;  
59:            if ((TargetPos + BluePlayerPos) < Plat.Length){  
60:                 BluePlayerPos++;  
61:                 CounterPos = 1;  
62:            }  
63:       }  
64:       void OnGUI () {  
65:            if (GUI.Button(new Rect(10,45,100,30), "Red Go!")){  
66:                 ExecRedPlayerMove();  
67:            }  
68:            if (GUI.Button(new Rect(10,80,100,30), "Blue Go!")){  
69:                 ExecBluePlayerMove();  
70:            }  
71:       }  
72:  }  

Pasang Script tersebut di GameObject Plat. Ada beberapa hal yang harus anda atur:

1. Masukkan GameObject Red & Blue Player
2. Masukkan GameObject Cube Dadu yang sudah dipasangi Script Dadu.cs
3. Buat array sebanyak 30 untuk variabel Plat dan masukkin seluruh Cube lantai SESUAI DENGAN NOMOR dan POSISINYA. Ini penting untuk menjaga konsistensi tipuan kita. Misalnya, untuk Petak Nomor 11 (versi Manusia) Pastikan anda memasukkan Cube11 di Element 10 (versi Unity). Nah, Posisi ini Cube11 HARUS PAAAAS BANGET di Petak 11. Yah, menceng-menceng dikit gpp sih, tapi kalau bisa paaaaas banget...

Sip. Semuanya sudah selesai. Coba kita tes. Caranya? Klik dulu tombol Kocok Dadu. Kalau sudah ada angkanya, klik tombol Red Go! atau Blue Go!


Secara umum scriptnya sudah bekerja dengan baik. Saya juga sudah bermain membuat Red Player menang saat mencapai garis finish nomor 30. Tapi ada sedikit yang mengganggu. Posisi Red Playernya nyungsep ke bawah Board. Ini nggak bagus. Bisa sih diakalin dengan script, tapi... males ah. Modif tanpa script aja yuk? :-)
 

Yang perlu kita edit hanya GameObjectnya kan? Gampaang. Tambahkan sebuah Cube.
 

Atur posisinya di bawah si Capsule.
 

Beri nama RedPlate dan Kasih material merah. Tarik saja.
 

Kemudian jadikan si RedPlayer menjadi child-nya si RedPlate.
 

Lakukan hal yang sama untuk BluePlayer.
 

Ubah sedikit parameter di script Plat, karena kali ini isi dari variabel Red Player = Red Plate dan Blue Player = Blue Plate. Mantaaap.
 

Coba sekali lagi dan Yes!! Tampillannya sudah cukup oke. Sampai sini bentuk permainan boardgame sudah terlihat semakin jelas bukan? Beberapa hal yang masih kurang mungkin adalah Dadu yang terus-terusan ada di tengah padahal Player udah mulai jalan dan yang paling penting nggak ada interaksi antara Player dengan gambar Ular atau Tangga. Hallooow? Anonim: Ini kan game Ular Tangga. Kok nggak ada efek naik pas Player nginjek Tangga / efek turun pas Player nginjek ular? Saya jawab juga. Hallooow! Itu cuma visualisasi manusia. Untuk bikin efek itu kan butuh script yang lain lagi, dan butuh tipuan yang lain lagi, hehehe.

 Anonim: Bidaknya bisa beranimasi nggak kalau pas jalan? Anonim: Gimana kalau ditambahin musik juga? Jadi ada musik yang beda pas naik tangga atau turun dari ular. Anonim: Bisa nggak ularnya bergerak-gerak?  Anonim: Bisa nggak kalau bidaknya naik tangga dia teriak-teriak girang sambil bawa bendera atau nginjek ular terus orangnya kegigit, menjerit, berdarah terus turun dalam keadaan terluka.

Buset dah! Ini mau mau bikin game ular tangga mau bikin game zombie? Mumet aku.

Anyway, tutorial Boardgame ini akan coba saya tuntaskan di Part 3. Mungkin nggak semua requestnya bisa diselesaikan tapi beberapa akan saya coba akomodasi. Semoga bermanfaat.

Cara Membuat Game Ular Tangga Dengan Unity