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

2222-1024x535Pernah main game mobile Tebak Gambar ? Gue rasa udah banyak banget ya yang main, secara popularitas game ini sangat familiar, hampir setiap smartphone temen gue aja pasti ada game ini. Oke tanpa basi-basi lagi, kali ini gue bakalan sharing tutorial membuat game Android yang gameplaynya hampir mirip dengan game Tebak Gambar, so yes game nya gue namain juga Tebak Gambar Clone.
Pertama, buat project baru dengan nama Tebak Gambar Clone, pastikan pilihan 2D dipilih pada menu dropdown. Masuk ke menu Build, pilih platform Android kemudian klik Switch Platform. Selanjutnya buatlah folder seperti pada gambar berikut :

Ini untuk memudahkan kita dalam mengelola Asset. Untuk Asset bisa Anda download dibagian akhir post ini. Jika Asset sudah di download, simpan asset sesuai dengan jenisnya.

Pilih file sprite yang sudah Anda simpan di folder Sprite, buat tipenya menjadi sprite > multiple, kemudian slice menjadi 5 bagian seperti gambar diatas. Sprite-sprite ini adalah yang akan kita gunakan sebagai soal untuk setiap level.

Begitu juga dengan folder texture, ubahlah modenya menjadi texture pada inspector. File texture ini akan kita gunakan sebagai GUI.

Jika sudah, buatlah scene dengan nama Level 1, kemudian simpan di folder Scenes. Selanjutnya tambahkan beberapa game Object seperti gambar diatas (Level dan GUI). Drag Sprite_4 ke dalam game object ‘Level’, aturlah posisinya sehingga menjadi seperti pada gambar diatas.
Selanjutnya kita akan membuat HUD sebagai salah satu system dalam game. Komponen yang kita pasang adalah berupa status dengan menggunakan Label dan Button yang terdiri dari : Menampilkan Life / darah / kesempatan menjawab, tombol bantuan yang akan menampilkan clue, serta timer untuk level yang menggunakan waktu. Gue mencoba menggunakan fitur dengan referensi yang sama persis dari game Tebak Gambar, namanya juga Clone. :D Untuk menampilkan HUD tadi kita akan membuat script dengan language C#, buatlah script baru dengan nama StatusScript.cs pada folder Scripts, kemudian drag ke game object ‘GUI’. Duble klik komponen script tadi, kemudian kita akan masuk monodevelop.
Pada bagian ini adalah variable untuk level yang menggunakan timer. Kita punya satu boolean yang akan kita gunaan untuk kondisi “Apakah ini level yang menggunakan timer ?” dan satu lagu adalah variable untuk waktu yang akan digunakan dalam level dengan waktu tersebut, gue kasih nilai 30 detik.
Bagian ini adalah variable yang dibutuhkan player, seperi banyaknya Life, Help yang dibutuhkan dan lain-lain. Kita juga mempunyai variable-variable dengan tipe data String yang akan kita gunakan sebagai penamaan Player Preferences.
Nah kalo ini variable-variable untuk setup ketika HUD tadi. Kita akan menggunakan Rectangle, sehingga masing-masing HUD harus memiliki nilai float untuk : left, top, width dan height. Nilai-nilai yang gue kasih adalah dari hasil adjusting dari inspector sehingga menjadi posisi yang diinginkan. Anda bisa mengaturnya kembali di inspector supaya sesuai dengan kebutuhan.

Klik save kemudian lihat pada inspector, maka akan tampil seperti ini. Oiya, sebelum kita lanjut coding script StatusScript.cs terlebih dahulu kita harus membuat script yang akan digunakan sebagai GUI Resizer atau scaler. Ini berfungsi untuk membuat posisi masing-masing GUI / HUD fixed. Seperti yang kita tahu device Android memiliki resolusi layar yang berbeda-beda, untuk meng-handle tersebut kita akan menggunakan Resizer supaya GUI yang kita buat fixed disemua screen. Silahkan buat satu lagi script dengan nama GUIScale.cs kemudian drag script tersbut pada game object GUI. Double klik dan mulai coding pada monodevelop.
Kita buat function ‘ResizeGUI’ static. Why ? Silahkan baca post gue tentang hal tersebut di Sini. Pada ‘resizeRatio’ terdapat angka 1280 dan 800, itu adalah ukuran screen native yang digunakan dalam development, artinya setiap UI yang memanggil fungsi ini akan di resize persis seperti size saat kita editing di layar native tadi, selanjutnya kita namakan hal tersebut sebagai size rasio.
Oke, kembali lagi ke Script StatusScript.cs, kita telah membuat satu variable dengan tipe GUISkin. GUSkin ini akan kita gunakan untuk menampilkan HUD tadi. Sebenarnya kita bisa saja menggunakan GUIStyle supaya lebih praktis, tapi entah kenapa setelah gue coba setiap komponen GUI dengan Resizer tadi ketika memakai GUIStyle backgroundnya enggak mau muncul, padahal sebelum-sebelumnya muncul. Mungkin masalahnya ada di Unity gue, soalnya kemaren baru install versi 4.6. Di Unity 4.6 ini sebenernya sudah ada UI System baru yang lebih mudah dan banyak sekali fiturnya. Berhubung masih beta, jadi tutorial ini gue masih pake UI system yang lama (legacy). Pada folder resource, buat GUISkin baru dengan nama terserah Anda. Kemudian ubah beberapa komponen sebagai berikut :

Label -> Untuk HUD Life, ubah background dengan texture ‘Health’ pada folder ‘Textures’.
Box -> Untuk HUD Time, ubah background dengan texture ‘waktu’ pada folder ‘Textures’.
Button -> Untuk tombol Help, ubah background dengan texture ‘bantuan’ pada folder ‘Textures’.

Buka kembali monodevelop > StatusScript.cs , tambahkan line berikut :
Pada line-line berikutnya beberapa kita akan menggunakan implementasi dari Player Pref, supaya lebih memudahkan pekerjaan dan meminimalisir kesalahan dalam menulis juga sebagai efektitas, kita membuat fungsi yang berguna menyimpan data ke Player Preferences. Apa itu Playerpref ? Silahkan baca referensinya di Unity manual di sini : Playerprefs, next kita akan membuat beberapa setup pada Start(), tambahkan line berikut :
Gue gak akan terlalu banyak bahas teknisnya, karena di script beberapa udah gue kasih komen. Sekarang kita perhatikan game aslinya, yaitu Tebak Gambar, yang gue sorot adalah Life / Health player dan fitur Bantuan (dalam gamenya tombol bintang). Dalam game tersebut satu level terdapat beberapa stage, ketika player berada pada stage satu kemudian stage selanjutnya (stage 2) terkunci, maka otomatis Life & Help dalam keadaan maksimal. Kemudian ketika player finish stage satu kemudian berada pada stage 2, Life & Help meneruskan Life & Help dari stage (sebelumnya). Namun ketika stage dua udah kebuka, terus player bermain lagi di stage satu, Life dan Health tetap dengan value sebelumnya (Gak reload / keadaan awal). Jadi kapan player boleh reload ? Ketika game over (Life Habis), maka stage semua terkunci kecuali stage satu dan reload state = true, dalam baris kode kita dapat menemukan SaveStatus(0, reloadPref); value 0 berarti Playerpref reload dalam keadaan false, dan 1 dalam keadaan true. Itu sebabnya kita menggunakan Playerpref supaya kita mempunyai data global yang dapat diakses dari scene / level mana saja dengan nilai yang dapat diubah.
Ini adalah fungsi untuk menampilkan GUI, kita tadi sudah membuat class sebagai Resizer, selanjutnya tinggal kita panggil aja fungsinya dari Script ini.
Pada fungsi Update() kita akan membuat timer. Timer harus berada dalam Update() karena akan bekerja secara realtime dengan Time.deltaTime. Jika timer = 0, do something, namun pada pembahasan kali ini kita hanya membahas sekitar GUI saja, untuk gameplaynya akan dibahas di part selanjutnya. Klik save, kemudian akan tampil seperti ini :

Jangan lupa untuk custom opsi Font pada masing-masing HUD di GUISkin seperti warna, jenis font, ofset, dan lain-lain. Selanjutnya buat script baru dengan nama LevelScript.cs, pada script ini kita akan tentukan karakteristik sistem game seperti bagaimana jika jawaban benar, mendekati benar atau salah dan lain sebagainya. Namun kali ini kita akan membahas sampai interface pendukungnya saja seperti text field dan button check. Buka script tadi pada monodevelop kemudian masukkan baris berikut :
Seperti biasa pertama kita buat variable yang kita butuhkan terlebih dahulu. Kita membutuhkan dua GUI, yaitu textfield sebagai pembaca karakter dari keyboard, dan button Cek sebagai pembanding jawaban (input dari keyboard) dengan jawaban sebenarnya. Kemudian tampilkan kedua interface tadi pada OnGUI() :
Again, kita hanya perlu memanggil fungsi dari class resizer untuk membuat gui dalam posisi dan ukuran fixed. Dibaris tengah kita mempunya beberapa statement if yang berfungsi sebagai statement untuk membuat semacam text hint. Jadi ketika text field dalam keadaan focus, maka text default = null, sehingga field kosong. Selanjutnya ketika text field != focus dan user tidak menginput apa-apa pada textfield maka field return ke text dafault. Klik save, dan jangan lupa pada inspector isi object referensi sesuai yang dibutuhkan :

Ubah backgroun text field pada GUI Skin yang telah kita buat sebelumnya, kemudia pada ‘Cek Texture’ pilih texture Cek. Hit play, kemudian hasilnya akan seperti berikut :

Coba jalankan di device Android Anda, gue coba running di device Android nokia x dan hasilnya adalah sebagai berikut :

What’s Next :

Bagaimana ? Cukup mudah bukan. Selanjutnya kita akan membuat karakteristik sistem gamenya. Insya Alloh nanti tutorialnya gue bagi jadi 3 part aja. Jika ada yang kurang dimengerti bisa tinggalkan pesan atau bisa via fanspage facebook.

Full Scripts :

GUScale.cs
 StatusScript.cs
LevelScript.cs

 Download :

Post a Comment