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

2222-1024x535

Pernah 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. ūüėÄ 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 :

Link* download untuk asset yang digunakan :


* Untuk melihat link download klik salah satu atau beberapa tombol like / share diatas.

Update!!

Cek tutorial baru tentang pembuatan game Tebak Siluet disertai video tutorial : http://hynra.com/post/hynra-com-unity-tutorial-game-tebak-siluet-part-1/

 

Share :

[social_share style=”circle” align=”horizontal” heading_align=”inline” facebook=”1″ twitter=”1″ google_plus=”1″ linkedin=”1″ pinterest=”1″ /]

Related Posts:

52 thoughts on “Membuat Game Android Dengan Unity : Tebak Gambar Clone (Part 1)

  1. […] 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 : […]

  2. Mantab! Komplit! dan Mudah dipahami…

  3. agan numpang belajar yahhh…

  4. link downloadnya kok ga bisa keluar ya?

  5. Ok. Sudah bisa. Yang game object (GUI dan level) itu tipenya apa ya?

  6. ziddo simanjuntak

    Mas, Link download nya koq gak keluar ?, padahal sudah saya klik tombol like dan share nya….

  7. Bisa minta link download nya … ?

  8. kak, label Health sm Help ny tetep 0
    gak mw ke-update wlaupun pencet huruf A. T_T

    solusinya gimana ya?
    script udah sama pdhl >.<

  9. ini unitynya harus pake yang pro atau bisa pakai yg free, saja?

  10. mantep mas hynra app nya izin sedot buat belajar………..

  11. Untuk multiscene supaya game yang dibuat bisa multilevel gmna caranya mas?

  12. Mas kok linknya ga hadir hadir ya? hhehe

  13. Gan Bisa Minta Videonya ??

  14. Boleh minta gamenya ?
    Thank sebelumnya

  15. Makasih buat tutorial nya

  16. gan belajar script android unity di web apa ya??
    kalau bisa yang lengkap…

  17. bro ane ga ngerti bagian “Pada folder resource, buat GUISkin baru dengan nama terserah Anda. Kemudian ubah beberapa komponen sebagai berikut :” bagaimana caranya sampai bisa keluar windows status skin ?

  18. kang klo mau nambah level kan tinggal copi aja dari scene sebelumnya,, trus cara seting jawabannya di mana kang,, contohnya yg “polisi tidur”,,

  19. oh iya maaf kang, jawabannya sudah ketemu,, hehe, makasih sangat kang,,

  20. Kang, mau nanya dong. Kalau game tebak lagu/judul lagu gitu. Cara pembuatannya sama kayak game tebak gambar ini ?
    Soalnya saya bingung dibagian masukin lagunya.

  21. ternyata membuat game tak semudah memainkannya yah.. :”)

  22. Richard Horasio

    makasih tutorialnya mas .. mau nanya dong, kalo untuk membuat level baru kan sudah bisa copy scene,tapi untuk mengedit jawabannya itu gimana caranya ya? ada di script mana? Mohon tanggapannya.. thanks

  23. Richard Horasio

    makasih tutorialnya mas .. mau tanya dong, kalo untuk membuat level baru kan sudah bisa copy scene,tapi untuk mengedit jawabannya itu gimana caranya ya? ada di script mana? saya mau membuat banyak gambar lagi mas.. Mohon tanggapannya.. makasih..

  24. Bisakah belajar membuat game android secara khusus bang?

  25. wah susah juga yah membuat game, pada hal mau praktekkin juga. hahaha, lanjutkan kreasinya mas

  26. Banyak banget Scripnya Kudu sabar dan serius ini untuk bisa bikin beginian

  27. Om Mau tanya nih.
    1. untuk gambar bisa ndak dijadikan mp3 (voice)
    2. untuk jawabannya bisa ndak di buat pilihan berganda.
    makasih udah share. di tunggu jawabannya ya om ūüėÄ

  28. Permisi bang, mau tanya itu yang awal gimana caranya dapetin GUI? ane kok nemu cuma sprite_4 aja ya di assetnya..

  29. min, ada g script lengkap untuk game 3D pakai Unity juga???

  30. mas ini tiak ada video tutorialnya ya mas ?

  31. Min, itu pakek unity versi berapa bagi link downloadnya dong kalau download di website resminya versi online, Apa perlu install Android SDKnya juga, Kalau bisa kasih tau cara installnya, Ada tugas kuliah nih mohon bantuannya saya masih pemula dalam membuat aplikasi android.

    • Sepertinya komen2 diatas juga masalahnya sama, mungkin karena kebijakan API vuforia yang berubah. Saya belum coba SDK yang baru, segera saya post tutorial baru nya.

      • Min, aplikasi saya sudah jadi nih pas mau di jadiin apk kok minta update SDK terus ya? padahal SDK dah versi yang paling baru, biar pun di tekan update gk mau ke update muncul pesan update SDK terus menerus.

        Keren nih Websitenya Dan Juga Lengkap.

  32. Min, aplikasi saya sudah jadi nih pas mau di jadiin apk kok minta update SDK terus ya? padahal SDK dah versi yang paling baru, biar pun di tekan update gk mau ke update muncul pesan update SDK terus menerus.

    Keren nih Websitenya Dan Juga Lengkap.

Leave a Reply

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