.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

New UI System Unity 4.6 Membuat UI Image Sederhana

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

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

unity 4.6 about

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.

new ui system unity 4.6 example

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

membuat UI unity

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. 

UI canvas unity

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

logo unity untuk UI
Langkah 2. Import image
Langkah kedua seperti biasa import image dengan cara drag & drop file image ke dalam unity

import image logo 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.

set import setting menjadi sprite

Langkah 3. Buat object UI image
Untuk membuat object image klik Game Object >> UI >> Image

buat UI Image

Seperti dijelaskan sebelumnya object image akan muncul sebagai child dari Canvas

Object UI selalu menjadi child dari canvas

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

pasang sprite ke dalam image

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

atur posisi UI

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


Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel New UI System Unity 4.6 Membuat UI Image Sederhana, Diterbitkan oleh scodeaplikasi pada Rabu, 29 April 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to