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 :)