Interaktif Visualisasi Model Produk dengan SketchUp & Unity3D - Study UI Unity Elemen

Assalamu'alaikum. Salam sejahtera buat semua pembaca blog ini. 

Mohon maaf, sudah lama tidak nge-post artikel, bukan karena sibuk dapat project besar. Tapi.. karena memang lagi tidak punya ide.. :😀😀😀😀

Pada kesempatan ini saya akan berbagi cerita mengenai study pertama saya dengan fitur UI (User Interface) punya Unity.  Saya coba aplikasikan hasil belajar UI ini untuk membuat sebuah aplikasi yang diberi nama "Interaktif  Visualisasi Model Produk".

Dalam mempelajari UI ini tidak terlalu sulit, tapi juga tidak terlalu mudah untuk diterapkan di proyek belajar ini. Kendala masih justru saya masih belum tahu koding C# Unity untuk  mengimpor model format SketchUp atau model format lainnya secara runtime langsung dari Aplikasi ini. Karena harapan saya, kedepannya aplikasi ini bisa digunakan umum.

Mudah-mudahan do'akan secepat saya bisa
Walau kebanyakan pengguna Unity adalah para game developer, tapi saat ini unity juga mulai banyak digunakan untuk pembuatan aplikasi lainnya. Dengan dukungan fitur UI yang canggih, ternya Unity sangat powerfull tidak kalah dengan sofware compiler umum lainnya.
 
Penasaran...???
Silahkan tonton video dibawah ini. Atau boleh langsung ajah sedot contoh Runtime Demonya pada berikut dibawah video. Extract dalam satu folder, lalu jalankan file interaktif.exe.

 DOWNLOAD 

INTERAKTIF VISUALISASI PRODUK

Format kompres 7zip (34.9MB)

Ukuran File setelah Extract:  96.1 MB

Pada kesempatan ini juga saya tulis sedikit gambaran umum mengenai elemen UI Unity ini. Mungkin berguna bagi teman-teman yang baru akan memulai belajar mengenal UI ini. Saya comot langsung dari sumbernya Unity Documentation, coba translate sebisa mungkin alakadarnya.. :)

Mengenal Kontrol/Elemen UI Unity

Komponen UI unity cukup lengkap untuk membuat sebuah aplikasi. Hanya berbeda penamaan saja dalam komponen Form. Unity menginstilahkan sebagai Canvas & Panel. Yang seperti Button, slider, input text, dan lainnya sama dengan software compiler umumnya. 

Pada kesempatan ini, saya akan sedikit berikan gambaran umum mengenai nama & fungsi UI unity sebagai berikut:

Canvas

Komponen utama/induk (Parent), dimana semua komponen UI lainnya berada didalamnya. Semua elemen UI yang ada di canvas harus menjadi anak komponen (child) dari Canvas tersebut.

Scroll View

Scroll View dapat digunakan ketika konten yang membutuhkan banyak ruang perlu ditampilkan di area kecil. Scroll Bar menyediakan fungsi untuk menggulir konten ini. Biasanya Scroll Rectangular dikombinasikan dengan Mask untuk membuat tampilan gulir, di mana hanya konten yang dapat digulung di dalam Rect Scroll yang terlihat. Ini juga dapat dikombinasikan dengan satu atau dua Scrollbar yang dapat diseret untuk menggulung secara horizontal atau vertikal.

Button

Komponen berupa Tombol berfungsi untuk merespons klik dari pengguna dan digunakan untuk memulai atau mengkonfirmasi suatu tindakan. Contoh yang familier misalnya  tombol Ok, Yes, No & Batal.

Toggel 

Kontrol Toggle adalah kotak centang yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan opsi. Umunya digunakan di bagian opsi pengaturan sebuah aplikasi.

Slider

Kontrol Slider memungkinkan pengguna untuk memilih nilai numerik dari rentang yang telah ditentukan dengan cara menyeret mouse. Bisa disebut cara lain dalam menginput sebuah nilai numerik. Contoh yang umum penggunaan slider adalah untuk mengatur kesulitan dalam sebuah game atau  pengaturan kecerahan di editor gambar.

ScrollBar

Kita umumnya biasanya menyebutnya tombol gulung/gulir. Kontrol Scrollbar memungkinkan pengguna untuk menggulung  gambar atau elemen tampilan lain yang terlalu besar untuk dilihat sepenuhnya. Contoh-contoh umum termasuk Tombol Gulung vertikal pada software  teks editor dan pasangan scroll bar vertikal dan horizontal untuk melihat bagian dari objek lainnya.

Dropdown

Dropdown dapat digunakan untuk agar  pengguna bisa memilih satu opsi dari daftar opsi. Nilai  defaulnya menunjukkan opsi yang saat ini dipilih ditandai dengan di centang. Setelah diklik, itu membuka daftar opsi sehingga opsi baru yang dapat dipilih. Setelah memilih opsi baru, daftar ditutup lagi, dan kontrol menunjukkan opsi yang baru dipilih. Daftar ini juga ditutup jika pengguna mengklik kontrol itu sendiri, atau mengklik di mana saja di dalam Kanvas.

 

InputField

Untuk menginput masukan text atau angka. Bisa kosong atau telah di set nilai default untu dapat diedit. Seperti kontrol interaksi lainnya.

 

Image

Kontrol Gambar menampilkan gambar non-interaktif kepada pengguna. Kita dapat menggunakan ini untuk tujuan seperti dekorasi atau ikon, dan Kita dapat mengubah gambar dari skrip untuk mencerminkan perubahan pada kontrol lain. Kontrol mirip dengan kontrol Gambar Mentah, tetapi menawarkan lebih banyak opsi untuk menjiwai gambar dan mengisi persegi panjang kontrol secara akurat. Catatan : Kontrol Image ini harus dirubah Teksturnya menjadi tipe Sprite.

 

 

Raw Image

Sama seperti Kontrol Image. Perbedaannya hanya mampu diset texturenya dengan default texture tanpa harus mengubah menjadi tipe Sprite. Akan tetapi juga bisa diset dengan texture bertipe sprite.