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)

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

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

Tutorial Networks Unity 02

Cube ini rencananya akan menjadi dadu kita. ūüôā

Tutorial Networks Unity 03

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

Tutorial Networks Unity 04

Sphere ini akan kita jadikan sebagai mata dadu.

Tutorial Networks Unity 05

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

Tutorial Networks Unity 06

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

Tutorial Networks Unity 07

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.¬†ūüôā

Tutorial Networks Unity 08

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

Tutorial Networks Unity 09

Selanjutnya ngapan? Klik kanan dan Duplicate saja Spherenya.

Tutorial Networks Unity 10

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.

Added

Sepasang angka itu selalu berlawanan posisinya.

Tutorial Networks Unity 11

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

Tutorial Networks Unity 12

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

Tutorial Networks Unity 13

Buat Script dengan nama Dadu.cs dan dobel klik

Tutorial Networks Unity 14

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.

Tutorial Networks Unity 15

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

Tutorial Networks Unity 16

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”.

Tutorial Networks Unity 17

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.

Tutorial Networks Unity 18

Tes lagi game anda. Klik Play dan klik Lempar!

Tutorial Networks Unity 19

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.

Tutorial Networks Unity 20

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.

Tutorial Networks Unity 22

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?

Tutorial Networks Unity 23

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.

Tutorial Networks Unity 24

Sehingga seluruh parameter menjadi seperti berikut.

Tutorial Networks Unity 25

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”.

Tutorial Networks Unity 26

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.

Jika anda tertarik untuk mempelajari cara membuat game, silahkan sempatkan diri anda untuk membaca 1-2 artikel pada halaman dibawah ini. Semoga bermanfaat.

Cara Membuat Game Menggunakan Unity3D

Tutorial Pemula:

Tutorial Berseri #1:

Tutorial Berseri #2:



One thought on “Cara Membuat Game Ular Tangga Dengan Unity #1 (Animasi Dadu)

  • December 28, 2016 at 12:31 pm
    Permalink

    Om angka 6 gk bakal muncul om. Ada solusi lebih baik lagi gk?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares