Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu)

Mengawali bagian satu dari cara membuat game dengan materi Board Game ala Unity, saya akan membuat tutorial yang menurut saya paling sederhana yaitu pembuatan dadu dan animasinya. Anda disarankan membaca terlebih dahulu artikel saya: Bagaimana Membuat Board Game Di Unity?  yang membahas mengenai konsep pembuatan board game yang akan kita buat secara keseluruhan. Oke, langsung saja ya? Buatlah project baru di Unity.

Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu) Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu)

Tambahkan sebuah objeck Cube dengan cara klik menu 3D Object > Cube
 

Cube ini rencananya akan menjadi dadu kita. :-)
 

Tambahkan lagi sebuah GameObject dengan cara yang sama, tapi kali ini pilih Sphere
 

Sphere ini akan kita jadikan sebagai mata dadu.
 

Tambahkan sebuah material dan beri warna merah kemudian pasangkan kepada Sphere. Bagi anda yang tidak tahu bagaiamana membuat material di Unity bisa membaca dulu artikel ini: Cara membuat material di Unity


Oke, kalau tidak ada kesalahan tampilan pada IDE anda seharusnya seperti ini. Kalau sudah begini kita ngapain?
 

Tumpuk saja si Sphere itu ke dalam Cube. Jadi mata dadu kan? Loh, kalau cuma mau bikin begini kenapa nggak pake software 3D kayak Blender atau 3DMax? Yah, itu juga bisa sih. Tapi tutorial ini kebeneran saya bikin full pake Unity. :-)
 

Selanjutnya hal yang paling penting lainnya adalah jadikan Sphere ini sebagai child dari Cube. Tuh, lihat posisinya di panel Hierarchy rada menjorok kan?
 

Selanjutnya ngapan? Klik kanan dan Duplicate saja Spherenya.
 

Buat semua mata dadu dengan cara copy-paste, geser, resize dll. Anda pasti bisa lah. Kuncinya adalah angka dadu selalu berjumlah 7 di posisi yang berlawanan. Jadi posisi dadu yang benar adalah 1-6, 2-5, dan 3-4.

 

 Sepasang angka itu selalu berlawanan posisinya.
 

Oke, kalau tampilannya sudah begini maka dadu anda sudah benar.
 

Selanjutnya kita akan membuat sebuah script untuk pelemparan dadu. Caranya? Klik kanan di panel Assets, klik Create > C# Script
 

Buat Script dengan nama Dadu.cs dan dobel klik
 

Ketikkan script berikut:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class Dadu : MonoBehaviour {  
4:       public int DaduNumber;  
5:       // Use this for initialization  
6:       void Start () {  
7:       }  
8:       // Update is called once per frame  
9:       void Update () {  
10:       }  
11:       void OnGUI () {  
12:            if (GUI.Button(new Rect(10,10,100,30), "Kocok Dadu")){  
13:                 DaduNumber = Random.Range(1,7);  
14:            }  
15:       }  
16:  }  

Lalu pasang script tersebut pada Cube. Perhatikan nilai pada variabel Dadu Number.
 

Jalankan game anda dengan klik Play kemudian klik tombol Kocok Dadu.
 

Sampai tahap ini anda SUDAH SELESAI membuat script pengocokan dadu. Serius. Script menghasilkan angka dadu CUMA GITU DOANG nggak lebih. Perhatikan bahwa setiap kali anda nge-klik tombol, angka pada variabel Dadu Number sudah berubah. Angka itulah sebenarnya yang diperlukan oleh Unity. Jadi script anda sudah benar. Yang masalah apa? MATA ANDA! Anda nggak bisa menerima kalau script ini benar karena dadu di hadapan anda TIDAK BERGERAK! Inilah sebenarnya kunci penting dari logika pemrograman Unity. Pastikan anda memiliki mindset yang benar antara kebutuhan Unity sebagai pemrograman dan kebutuhan animasi kepada user sebagai "kosmetiknya".
 

Oke, dalam rangka penggunaan "kosmetik" kita akan ubah scriptnya sedikit. Ketikkan script berikut:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class Dadu : MonoBehaviour {  
4:       public GameObject ObjekDadu;  
5:       public int DaduNumber;  
6:       private int MulaiHitung;  
7:       // Use this for initialization  
8:       void Start () {  
9:            MulaiHitung = 0;       
10:       }  
11:       // Update is called once per frame  
12:       void Update () {  
13:            if (MulaiHitung == 1){  
14:                 ObjekDadu.transform.Rotate(50,50,50);  
15:            }  
16:       }  
17:       void OnGUI(){  
18:            if (MulaiHitung == 0){  
19:                 if (GUI.Button(new Rect(10,10,100,30), "Kocok Dadu")){  
20:                      MulaiHitung = 1;  
21:                 }  
22:            }  
23:            if (MulaiHitung == 1){  
24:                 if (GUI.Button(new Rect(10,10,100,30), "Lempar!")){  
25:                      DaduNumber = Random.Range(1,7);  
26:                      MulaiHitung = 0;  
27:                 }  
28:            }  
29:       }  
30:  }  

Lalu masukan GameObject Cube sebagai parameter.
 

Tes lagi game anda. Klik Play dan klik Lempar!
 

Sudah mulai lebih terasa efek "kosmetiknya" bukan? Kini anda sudah melihat bagaimana saat anda klik tombol, dadu bergerak dan angka muncul. Tapi lagi-lagi anda akan merasa ada yang kurang. Karena NILAI pada variabel dengan posisi real yang terlihat oleh MATA ANDA belum sama. Jadi yang salah siapa? Salah script? Salah gue? Salah temen-temen gue? Pertanyaannya sekarang adalah Bagaimana caranya agar NILAI yang ditunjukkan oleh variabel Dadu Number bisa TEPAT sama dengan Mata Dadu yang ditunjukkan oleh Cube? Secara kasar ITU NGGAK MUNGKIN! Kenapa? Karena antara variabel (angka) dan dadu (cube + sphere) itu kan nggak ada hubungan. Lalu gimana caranya agar bisa ada hubungan? Gunakan trik.
 

Karena ada dua "bahasa" yang berbeda di sini. Yang pertama adalah bahasa manusia yang mengatakan dadu bernilai 6. Dan yang kedua adalah bahasa Unity yang mengatakan rotasi dadu yang bagian atasnya menunjukkan 6 buah sphere. Jadi cara paling mudah adalah dengan membuat sebuah variabel tambahan yang menjadi jembatan antara nilai dadu asli dengan tampilannya. Ganti script anda menjadi seperti ini:

1:  using UnityEngine;  
2:  using System.Collections;  
3:  public class Dadu : MonoBehaviour {  
4:       public GameObject ObjekDadu;  
5:       public int DaduNumber;  
6:       public Vector3[] PosisiDadu;  
7:       private int MulaiHitung;  
8:       // Use this for initialization  
9:       void Start () {  
10:            MulaiHitung = 0;       
11:       }  
12:       // Update is called once per frame  
13:       void Update () {  
14:            if (MulaiHitung == 1){  
15:                 ObjekDadu.transform.Rotate(50,50,50);  
16:            }  
17:       }  
18:       void SetDaduPos(int aValue){  
19:            Quaternion temp = ObjekDadu.transform.rotation;  
20:            temp.eulerAngles = PosisiDadu[aValue];  
21:            ObjekDadu.transform.rotation = temp;  
22:       }  
23:       void OnGUI(){  
24:            if (MulaiHitung == 0){  
25:                 if (GUI.Button(new Rect(10,10,100,30), "Kocok Dadu")){  
26:                      MulaiHitung = 1;  
27:                 }  
28:            }  
29:            if (MulaiHitung == 1){  
30:                 if (GUI.Button(new Rect(10,10,100,30), "Lempar!")){  
31:                      DaduNumber = Random.Range(1,7);  
32:                      SetDaduPos(DaduNumber);  
33:                      MulaiHitung = 0;  
34:                 }  
35:            }  
36:       }  
37:  }  

Perhatikan parameter Posisi Dadu yang akan menjadi kunci utama dari trik kita.
 

Tambahkan nilai 7. Cuekin Element 0 dan hanya fokus pada Element 1 - Element 6 yang menunjukkan pada bentuk dadu. Perhatikan 3 hal:

1. Bentuk dadu bagi MATA MANUSIA (misal angka 1)
2. Posisi rotasi di panel Transform
3. Nilai rotasi di Element dadu (misal untuk angka 1 harus rotasi berapa?

Lakukan pengecekan beberapa kali pada setiap elemen dadu. Misalnya, untuk tampilan dadu 2, maka yang dibutuhkan adalah rotasi x = 90. Maka masukkan nilai x = 90 kepada Element 2. Begitu seterusnya.
 

Sehingga seluruh parameter menjadi seperti berikut.
 

Selanjutnya jalankan kembali game anda dan perhatikan hasilnya. Untuk lebih jelas jangan BIARKAN MATA ANDA MENIPU ANDA. Perhatikan nilai pada Dadu Number dan panel Transform khususnya bagian Rotation setiap kali tombol di klik. Angka-angka itulah sebenarnya yang mengatur otak anda untuk berpikir logis tentang seperti inilah dadu seharusnya berputar. Padahal? Itu semua cuma "kosmetik".
 

Bagian awal dari proses pengembangan board game saya cukupkan dulu sampai di sini. Dalam beberapa hari ke depan saya coba menyelesaikan kosmet... maksud saya tutorial kosmet... aargh, lama-lama saya jadi buka salon juga kalau begini caranya. Sampai ketemu di part selanjutnya,

Cara Membuat Game Ular Tangga Dengan Unity