Membuat Game Android Dengan Unity : Tebak Gambar Clone (Part 2)


Ini tutorial terakhir dari seri Membuat Game Android Dengan Unity : Tebak Gambar Clone. Part 1 bisa Anda lihat di sini. Oke selanjutnya kita akan membuat suatu tanda yang akan menjelaskan apakah jawaban player itu : salah, hampir, benar, atau salah-game over. Untuk itu silahkan pilih masing-masing tanda yang berada pada folder ‘Textures’. Saya mulai dengan sign / tanda untuk jawaban benar. Drag-n-drop sign Benar tadi pada folder ‘Level’ seperti pada gambar berikut :

Atur posisi objek sesuai keinginan Anda. Selanjutnya kita akan membuat Animasi untuk memperindah tanda tersebut. Silahkan masuk pada jendela Animation, kemudian klik tombol merah (record) yang berada pada jendela tersebut. Save animasi pada folder Animation, jika belum ada, buat;ah terlebih dahulu.

Selanjutnya kita akan membuat sebuah animasi sederhana, dimana animasi tersebut muncul secara zoom in dalam satu detik.

Add Curve pada jendela Animation, kemudia tambahkan Transform > Scale. Pada detik 0:00 masukan scale menjadi seperti gambar diatas : x = 3, Scale =3, dan Z=1. Maka pada saat animasi ini dijalankan, objek akan berada pada skala 3. 
Pada detik 0:50 buat scale menjadi : X = 0.8, Y= 0.8 dan Z tetap pada skala 1. Karena kita berada pada dimensi 2, maka sumbu Z kita biarkan saja. Klik Play pada tombol play yang ada pada jendela Animation, kemudian perhatikan objek yang akan kita buat sign tadi. Objek tersebut sudah memiliki animasi Zoom in. Kemudian set skala ke skala normal yaitu 1.

Buat scale x, y dan z menjadi 1 seperti gambar diatas.

Kemudian buat animasi objek tersebut menjadi flat, supaya lebih terlihat rapi. Klik pilihan ‘Curves’ kemudian pilih ‘bener : scale’, klik kanan pada salah satu node / titik pada Animaton Workspace, kemudian pilih ‘Flat’.

Klik tombol record untuk menghentikan proses editing Animasi. Selanjutnya buka file animasi yang telah kita buat, klik atau pilih pada file animasinya (ekstensi file *.anim), kemudian lihat pada inspector. Uncheck pilihan ‘Loop Time’ supaya animasi hanya berjalan satu kali ketika dalam keadaan OnAwake(). Disable game object pada inspector, karena kita akan menampilkannya lewat code. Selanjutnya buatlah 3 animasi lainnya : Hampir benar, salah, dan game over. Buatlah dengan step yang sama persis seperti pada animasi Benar.
Buka kembali folder Script, kita akan mengubah serta menambah beberapa baris code pada script StatusScript.cs,
Kita melakukan beberapa perubahan, diantaranya membuat posisi Time dan Help menjadi satu posisi, yaitu berada di samping kanan. Jadi level hanya membolehkan salah satu saja, variable ‘isLevelWithTime’ bernilai true, maka yang akan muncul adalah Time, jika bernilai false maka yang muncul adalah Help.
Baris ini adalah konstanta untuk script yang akan kita buat selanjutnya, yaitu DecideScript.cs, sebelum melanjutkan editing pada script StatusScript.cs silahkan buat terlebih dahulu script baru dengan nama DecideScrpt.cs, script ini berisi baris code yang akan menjelaskan tindakan bagaimana jika player menginput jawaban salah, hampir benar, benar dan kapan player dalam keadaan game over, dan lain-lain. Tambahkan baris berikut :
Pertama masukan beberapa variable yang menjelaskan jawaban pembanding dari jawaban player. Variable ini nantinya akan dijadikan jawaban rujukan, apakah salah, hampir atau benar. Juga kita mempunyai satu variable ‘nextIsLevelIs’ yang bertipe int yang akan kita gunakan sebagai lock / unlock level.
Selanjutnya kita juga mempunyai enum yang akan digunakan sebagai state. Selengkapnya tentang enum dapat anda pelajari di Enumeration.
Variable ini digunakan sebagai lamanya animasi yang akan ditampilkan untuk setiap jawaban, saya kasih 2 detik untuk setiap sign animasi jawaban. Sedangkan untuk menampilkan Bantuan bisa di modify pada inspector.
Baris code ini adalah referensi untuk setiap animasi yang akan ditampilkan. Pastikan setelah selesai mengedit script jangan lupa untuk wiring / reference objek-objek yang dibutuhkan script.
Selanjutnya kita juga mempunyai variable untuk GUI Help yang akan ditampilkan. Value yang sudah diisikan adalah berdasarkan hasil modifikasi posisi yang saya lakukan, Anda bisa merubahnya pada inspector. Terakhir kita juga mempunyai variable dari enum yang telah kita buat sebelumnya.
Pada fungsi Start() kita mereferensi variable ‘statusScript’ serta menetapkan state pada saat level pertama kali dijalanin.
Ini adalah fungsi dimana jawaban Player di bandingkan dengan jawaban benar dan hampir benar. Fungsi ini dipanggil dari script LevelScript.cs pada Button Check yang telah kita buat sebelumnya, berikut baris kodenya :
Kembali lagi ke script DecideScript.cs, masukkan kembali baris kode berikut :
Fungsi tersebut dipanggil setiap kali state berganti, sedangkan state berganti ketika jawaban Player dibandingkan dengan jawaban pembanding. Setiap state bertahan berdasarkan waktu animasi berjalan menggunakan method ‘Invoke’ dengan memenaggil state idle. Jadi setiap state berganti dari idle ke state lainnya, akan kembali idle dalam waktu variable ‘waktuHasil’ atau 2 detik.
Fungsi GUI ini digunakan untuk menampilkan bantuan, GUI ini hanya akan tampil pada saat state dalam keadaan ‘bantuan’.
Fungsi MakeIdle() digunakan untuk switch state menjadi idle, dipanggil menggunakan Invoke dari fungsi Judgement().
Sedangkan state ini berfungsi untuk switch state menjadi state bantuan atau game over. Fungsi ini dipanggil dari script StatusScrip.cs pada bagian Help seperti berikut :
Juga dipanggil dari StatusScript.cs pada bagian ketika timer = 0, seperti pada baris kode berikut :
State game over juga dipanggil dalam fungsi Judgement() pada DecideScript.cs.
Terakhir kita mempunyai sebuah IEnumerator yang akan kita masukan method WaitForSeconds di dalamnya. Fungsi ini dipanggil setiap kali berhasil ke level selanjutnya, player di navigate ke menu utama untuk memilih level selanjutnya. Klik save DecideScrpt.cs, selanjutnya drag-n-drop script tersbut ke object ‘Level’. Lihat pada inspector, variable apa saja yang membutuhkan referensi ke objek lain, isi variable tersebut sesuai kebutuhan script.

Scripts :

Berikut script lengkap masing-masing script yang digunakan dalam pembuatan Game Tebak Gambar Clone.
GUIScale.cs diletakkan pada game Object GUI :
StatusScript.cs diletakkan pada objek GUI juga :
DecideScript.cs diletakkan pada game objek Level :
Scrpt LevelScript.cs diletakkan pada game objek Level :


What’s Next :

Membuat scene untuk Menu atau Memilih level. Buat script baru untuk menampilkan Level. Kita sudah membuat system lock / unlock level dengan menggunakan Playerprefs pada setiap level yang akan generate nilai int, nilai int ini yang akan kita gunakan untuk sistem lock/unlock level. Buatlah scene baru, kemudian tambahkan script berikut pada scene : LevelSelect.cs
Klik save, kemudian pastikan kebutuhan tiap variable yang membutuhkan resource dari objek lain diisi sesuai kebutuhan Script, seperti GUISkin, dan lain-lain. Gunakan button-buton yang ada di dalam folder Texture untuk kebutuhan GUISkin.
Hit Play! Jika langkah Anda sudah benar, maka game akan berjalan sebagaimana mestinya. Jika sudah benar, maka Game Tebak Gambar Clone akan berjalan seperti pada video berikut :

Terakhir, silahkan Build game tersebut untuk Platform Android, and Gotcha! Kita sudah membuat Game Tebak Gambar Clone.
Bagaimana, mudah bukan ? Ternyata hanya menggunakan beberapa script dan dengan logika sederhana saja kita dapat membuat Game Tebak Gambar Clone.  Jika Anda ingin membuat full game nya, buatlah asset atau grafis semenarik mungkin. Dalam tutorial ini hanya menggunakan grafis alakadarnya, karena hanya menunjukan alur pembuatannya saja. Selanjutnya, terserah kreatifitas Anda. :)

Update!

Bagi Anda yang mengalami kesulitan, bisa mengunduh full file project Tebak Gambar Clone pada link* dibawah ini

1 comments:

Post a Comment