Membuat Aplikasi Android Serasa Native di Unity menggunakan MaterialUI

Mungkin artikel saya kali ini lebih cocok ditujukan bagi kalian game developer yang sudah biasa menggunakan tool Unity untuk membuat game namun ingin membuat aplikasi native Android tanpa ingin belajar lagi alias memanfaatkan skill yang sudah ada.

Artikel ini saya tulis karena saya kebetulan saya mendapatkan pekerjaan membuat sebuah aplikasi Android namun skill Android programming saya masih pas-pasan alias butuh belajar lagi. Karena tuntutan waktu akhirnya saya mencoba browsing tentang membuat aplikasi menggunakan Unity. Pencarian saya berujung di sebuah plugin unity MaterialUI yang dapat diunduh di asset store https://www.assetstore.unity3d.com/en/#!/content/51870 dengan harga $50.00. Setelah melihat-lihat review akhirnya saya putuskan menggunakan MaterialUI sebagai framework aplikasi saya.

Plugin MaterialUI ini cukup lengkap, terdiri dari berbagai komponen dasar UI dengan desain Material seperti pada gambar di bawah ini

Semua komponen berbasis UnityUI atau sebagai child dari Canvas, jadi lebih integrate dengan UI bawaan Unity. Berikut ini beberapa contoh UI yang disediakan oleh MaterialUI

Material button, berbagai jenis button dengan template Material, lengkap dengan animasi ketika di klik.

Material Button

Checkbox yang tersedia dengan template disable, enable, dan colored

Checkbox

Ada juga element slider 

MaterialUI Unity slider

Tidak ketinggalan switch

MaterialUI Switch

Dan yang paling penting adalah inputfield, dimana inputfield ini bener-bener mirip sama aslinya lengkap dengan animasinya

MaterialUI Inputfield

Yang paling keren dari MaterialUI ini adalah date dan time picker

MaterialUI Time Picker

MaterialUI Date Picker

Selain UI diatas masih banyak berbagai element yang ada pada MaterialUI yang bisa dibilang sudah cukup lengkap seperti Dialog manager, Toast manager, berbagai icon dsb. Mungkin gambar di bawah bisa mendeskripsikan apa saja yang ada dalam plugin MaterialUI ini.

MaterialUI sample scenes

Salah satu kekurangan dari MaterialUI ini adalah tidak adanya sistem mirip activity, jadi kita harus membuat sendiri secara manual mulai proses load activity, animasi transisi dsb.

Issue terbesar dari MaterialUI (mungkin issue classic Unity UI) adalah pada performance. Lambatnya performance tidak terlalu terasa jika hanya sekedar klik-klik di satu scene atau satu Activity. Tapi begitu Activity baru di load dan animasi transisi di jalankan baru kerasa performance jatuh, terutama jika di dalam UI terdapat banyak Text.

Akhirnya kesimpulannya adalah tergantung bagaimana kebutuhan Anda. Jika memang aplikasi yang dibuat adalah aplikasi simple yang hanya terdiri dari beberapa scene activity dimana flow aplikasi tidak terlalu sering gonta-ganti activity maka MaterialUI cocok digunakan daripada upgrade skill anda dengan belajar Android native programming. Tapi jika Anda membuat aplikasi yang cukup komplek dengan berbagai macam Activity dan berbagai macam custom UI maka sepertinya MaterialUI ini kurang cocok karena seiring aplikasi bertambah komplek performance juga bertambah jatuh. 

Mungkin sekian dari saya, jika ada kekurangan mohon maaf. Tetap semangat dan terus berkarya ^_^

Read More

Monster Age, Pengalaman Ikut Project Game Karya Anak Bangsa Buatan Surabaya

Preview Monster Age

Kayaknya sudah lama banget blog ini g keurus. Dipikir-pikir sepertinya sudah setahun blog ini hampir gak kesentuh sama sekali. Kemarin setelah ngbrol-ngobrol sama mas pemilik blog www.afietadi.web.id tiba-tiba jadi pengen nulis lagi dikit-dikit.

Langsung aja kali ini saya pengen share tentang salah satu project saya yang sebenarnya sudah dibuat sekitar 1,5 tahun yang lali. Project ini dibuat oleh studio Artlogic Games di Surabaya, dimana waktu itu saya bergabung dengan Artlogic sebagai programmer. Project ini dikerjakan oleh tim inti sebanyak 8 orang meskipun dalam credit nya ditulis lebih dari 8 orang karena beberapa orang hanya ikut sebagian project kemudian out. Project dikerjakan selama kurang lebih satu tahun sampai bisa jadi Monster Age yang full polish.

Monster Age ini adalah game Monster Collecting. Secara singkat flow dari game ini kurang lebih mirip-mirip game Pokemon dimana kita sebagai pemain dituntut mencari monster, menaikkan level monster, kemudian bertarung. Ketika level sudah tinggi monster bisa di evolve atau bahkan di fusion. Adapun secara gameplay game ini bertype turn based battle dimana player dan musuh saling menyerang secara bergantian. Setiap Monster memeliki elemen masing masing. Adapun elemen yang ada di universe Monster Age ini adalah Fire, Water, Earth, Thunder, Dark, Light. Setiap elemen memiliki keunikan sendiri dan memiliki kelebihan dan kelemahan masing-masing.

Isu terbesar yang saya hadapi adalah tentang performa. Inilah satu pelajaran yang sangat berharga dimana untuk membuat game terutama game mobile harus sangat sangat diperhatikan sejak awal bagaimana performa game tersebut jika di run di device. Hindari sering berpindah scene karena ketika pindah scene sistem harus me-load ulang semua yang ada di dalam scene dimana ini memerlukan cost performance yang cukup tinggi. Gunakan berbagai metode untuk menghindari pindah scene, misal menu dalam bentuk dialog dsb. Gunakan juga berbagai metode peningkatan performa seperti yang ditulis disini https://unity3d.com/learn/tutorials/topics/performance-optimization

Oke langsung aja ini adalah official trailer dari Monster Age.

Ini adlah tampilan Main Menu dari Monster Age

Ini adalah tampilan set formation, dimana disini kita bisa menentikan monster apa yang akan kita pakai di pertempuran

Ketika akan bertarung ada informasi tentang Gameplay dan musuh apa yang akan kita hadapi di permainan.

Dan ini adalah tampilan gameplay dari Monster Age

Dan ini adalah salah satu fitur yang saya suka, Hatchery. Dimana di menu ini kita dapat menetaskan telur sehingga kita memperoleh monster. Adapun apa monster yang di dapat adalah random, jadi ada rasa harap-harap cemas deh

Mungkin sekian review saya, mungkin bagi yang sudah baca atau mau bertanya langsung aja tinggalin jejak di komentar. Sekian dari saya tetap semangat dan terus berkarya ^_^

Read More

Step by Step Membuat Simple Augmented Reality Berbasis Android Menggunakan Unity 5.1.1 dan Vuforia 5.0.5

 

Halo sobat blogger.. Sudah lama tidak update artikel. Kali ini saya akan membahas tutorial membuat aplikasi Augmented Reality di Android menggunakan Unity 5 dan Vuforia 5. Sebenernya ini bukan hal yang baru di blog ini, sebelumnya saya sudah membuat artikel semacam ini di sini.Tapi karena cepatnya update dari Vuforia dan Unity alhasil saat ini banyak sekali yang bingung mengikuti tutorial saya karena sudah tidak relevan lagi. Karena banyaknya pertanyaan dan request maka kali ini saya bahas tentang cara membuat aplikasi Augmented Reality berbasis Android menggunakan Unity 5 dan Vuforia 5.

 Ok langsung aja berikut adalah alat dan bahan :

1. Unity, dalam tutorial kali ini saya menggunakan Unity 5.1.1f1. Unity dapat didownload di sini.
2. Vuforia SDK, dalam tutorial ini saya menggunakan vuforia-unity-5-0-5. Vuforia dapat didownload di sini. Pilih 'Download for Unity'.
3. Android SDK, ini adalah tools wajib untuk membuat aplikasi android. Dapat didownload di sini. 

Langsung saja kita masuk ke tutorial. Namun sebelum masuk ke tutorial Anda dapat mendownload projectnya terlebih dahulu pada link di bawah.

Klik disini untuk mendownload project

Langkah 1 : Buka Unity dan buat project baru

Blank project unity

Langkah 2 : Ubah project ke Android

Ubah project unity ke android

Jangan lupa untuk melakukan pengaturan pada player setting

Pengaturan player

Atur nama company dan nama aplikasi

Atur nama company dan nama aplikasi

Dan juga pengaturan bundle identifier

Atur bundle Identifier

Langkah 3 : Import Vuforia SDK dengan double klik

Double click Vuforia SDK

Centang semua elemen import

Centang semua untuk import Vuforia SDK

Langkah 4 : Masukkan ARCamera dan ImageTarget ke dalam scene, delete Main Camera.

Masukkan ARCamera dan ImageTarget ke dalam scene

Vuforia mensuport debugging di PC menggunakan camera webcam. Tapi jika hardware belum di support Vuforia Anda dapat menonaktifkan fitur ini.

Disable 'Don't use play mode' jika error

Jangan lupa save scene dengan Ctrl + S setiap melakukan perubahan untuk menghindari hal yang tidak diinginkan


Langkah 5 : Definisikan marker dengan klik ImageTarget kemudian klik 'No targets defined. Press here for target creation !'

Definisikan marker untuk target

Anda akan diarahkan ke website Vuforia. Login untuk masuk ke akun Anda. Pertama klik 'Add License Key' pada 'License Manager' untuk membuat lisensi. Lisensi ini nantinya berkaitan dengan harga yang harus Anda bayar. Tenang saja, untuk tutorial kali ini Anda dapat menggunakan license free.

License manager pada Vuforia

Pada lisensi ada kode yang harus Anda letakkan di code Anda. Copy semua kode tadi kemudian masukkan di ARCamera pada project Anda

Lisensi Vuforia

Masukkan ke ARCamera

Masukkan license ke ARCamera

Kemudian definisikan marker pada image target. Pada bagian 'Target Manager' klik 'Add Database'.

Tambahkan database

Masukkan nama database, kemudian upload marker. Marker yang Anda Upload akan ditampilkan dan diberi rating

Marker yang di upload di Vuforia

Kali ini saya menggunakan marker berikut, Anda dapat menggunakan marker lain.

Marker

Setelah selesai download datasetnya, pilih 'Unity Editor'. Kemudian Anda akan mendapatkan file dengan ekstensi .unitypackage.

File .unitypackage berisi dataset marker

Langkah 6 : Import file dataset dengan double click file dataset dengan ekstensi .unitypackage yang Anda dapatkan dari Vuforia. Kemudian tentukan dataset yang digunakan pada ImageTarget

Tentukan dataset pada Image Target

Taruh object yang akan dimunculkan pada AR di atas Image Target. Buat object tersebut menjadi child dari ImageTarget. Pada contoh ini saya memakai object cube dengan klik GameObject >> 3D Object >> Cube

Menletakkan object AR

Konfigurasi ARCamera untuk me load dataset

Konfigurasi ARCamera untuk me-load dataset

Langkah 7 : Jalankan project dengan klik File >> Build Settings >> Build. Copy file .apk ke device Android Anda dan jalankan aplikasinya

Preview aplikasi Augmented Reality Unity + Vuforia

Preview aplikasi Augmented Reality Unity + Vuforia

Selesai sudah tutorial saya hari ini, semoga artikel ini bermanfaat. Adapun project dari tutorial ini dapat Anda download dengan klik link di bawah.

Klik disini untuk mendownload project

Akhir kata Mohon maaf jika ada kekurangan, tetap semangat dan terus berkarya :)


Note :
Berhubung Unity dan Vuforia selalu update setiap beberapa bulan sekali jadi ada banyak sekali pertanyaan dan banyak juga yang kirim email sampe saya bingung bales. Untuk itu jadi sekalian saya jualan yaa.. hehehe.. 

Jual Video Tutorial Augmented Reality terupdate menggunakan Unity + Vuforia terbaru dengan bahasa Indonesia. Harga 100rb (dapat berubah sewaktu-waktu tanpa pemberitahuan di blog ini), tersedia juga paket konsultasi online via skype atau Team Viewer atau request tutorial lainya seperti Unity VR, Leap Motion, dsb. Berminat? Email me : saifuddinazhar@gmail.com.

Hasil pembelian dari video tutorial akan digunakan sebagai support untuk mengupdate terus content blog ini ^_^

Read More

New UI System Unity 4.6 Membuat UI Image Sederhana

Halo sobat bloger.. Sudah lama sekali tampaknya saya tidak mengupdate isi blog ini. Terlihat artikel terakhir adalah Juli 2014, hampir 1 tahun yang lalu. Kalau diibaratkan sebuah rumah mungkin blog ini sudah dipenuhi dengan debu dan sarang laba-laba lantaran hampir tidak pernah di urus. 

Ok cukup basa basinya, kali ini saya akan sedikit membahas sebuah fitur baru Unity yang muncul sejak Unity 4.6. Mungkin sedikit terlambat berbicara fitur baru unity sekarang, mengingat saat artikel ini dibuat sudah muncul Unity 5 dengan fitur new audio system nya. Tapi tak apa lah, kata orang bijak lebih baik terlambat daripada tidak sama sekali :)

Ok langsung saja, Unity 4.6 dirilis sekitar awal 2015 atau jika tidak akhir 2016. Saya sedikit lupa kapan rilisnya. Terlepas dari kapan rilisnya unity 4.6 dipersenjatai dengan fitur baru yang cukup menjadi gebrakan dibanding dengan versi Unity sebelumnya. Apakah fitur itu? Fitur tersebut adalah sebuah UI System. 

Berbeda dengan UI System sebelumnya berupa GUITexture dan OnGUI, kalau saya bilang UI System ini menggunakan konsep WYSIWYG (What You See Is What You Get). Kenapa? Karena UI System baru ini sangat minim menggunakan code, kamu cukup mendesain UI pada canvas yang telah disediakan. Apa yang kamu lihat pada canvasmu, itulah yang akan kamu dapatkan ketika game di build.

Object UI ini dapat dibuat pada menu Game Object >> UI. Adapun UI yang di ada pada Unity secara default adalah panel, button, text, image, raw image, slider, scrollbar, toggle, input field, canvas, dan event system. Mungkin satu per satu akan kita bahas pada post berikutnya

Adapun object UI yang di buat secara otomatis akan diletakkan sebagai child dari Canvas yang secara otomatis dibuat oleh Unity jika object canvas ini belum ada. 

Berikut akan sedikit saya jelaskan bagaimana membuat UI sederhana menampilkan sebuah image. 

Langkah 1. Siapkan image

Pertama siapkan image yang akan kita tampilkan untuk membuat UI. Pada contoh ini saya menggunakan logo unity yang saya beri nama Unity Logo.png

Langkah 2. Import image

Langkah kedua seperti biasa import image dengan cara drag & drop file image ke dalam unity

Pada bagian inspector pastikan sebagai sprite. Pada umumnya untuk project 3D ketika sebuah texture di import secara default image bertype texture. Gantilah menjadi sprite karena UI hanya menerima image dengan type sprite. Jangan lupa untuk mengklik button Apply.

Langkah 3. Buat object UI image

Untuk membuat object image klik Game Object >> UI >> Image

Seperti dijelaskan sebelumnya object image akan muncul sebagai child dari Canvas

Lakukan drag & drop sprite untuk mengisi image. Anda juga dapat menekan Set Native Size untuk mengatur ukuran sesuai aslinya.

Langkah 4. Pengaturan

Lakukan pengaturan posisi sesuai keinginan Anda. Pada artikel berikutnya kita akan bahas tentang anchor untuk membuat image ini dapat responsive mengikuti ukuran layar

Dapat dilihat pada gambar di atas bagian kiri adalah desain UI pada canvas, sedang kanan adalah tampilan pada window game. Dapat dilihat apa yang ada pada canvas tampak sama dengan yang ada di game. Tanpa code, tanpa config macam2, cukup mudah.

Akhirnya selesai sudah artikel ini. Cukup mudah bukan membuat UI menggunakan System UI baru pada Unity 4.6. Bayangkan bagaimana Anda membuat seperti ini menggunakan GUITexture atau OnGUI. Pasti akan sedikit lebih susah.  Pada artikel berikutnya kita akan membahas responsive UI dimana UI dapat menyesuaikan ukuran layar.

Ok mungkin cukup sekian dari saya, mohon maaf jika ada yang kurang berkenan. Tetap semangat dan terus berkarya :)

 

Read More