Langsung ke konten utama

Mengenal sistem UI pada Unity

Pada kesempatan kali ini akan memperkenalkan sistem UI yang dimiliki oleh Unity (sejak versi 4.6 rilis). User Interfaces (UI) sendiri adalah komponen yang mengatur tampilan untuk user/player. UI ini sangat berperan penting untuk membangun interaksi antara sistis dalam game dengan player game.

Sistem UI umumnya sama dengan sistem GUI (OnGUI). Pebedaanya adalah sistem UI dibuat agar pembuat game(developer) lebih leluasa mengatur desain tampilan dengan mudah melalui jendela menu pada Unity, sedangkan sistem GUI memerlukan tenaga ekstra untuk membuat tampilan, karena prosesnya dilakukan dengan menulis file script (C# Sharp).

Sebelum memperkenalkan sistem UI, pada dokumentasi kali ini Unity yang digunakan adalah Unity versi 2018.4.20f1, berbeda dengan Unity versi sebelumnya yang saya gunakan (2017.4.11f1). Namun untuk mencoba sistem UI seperti dokumentasi ini masih bisa menggunakan Unity versi 2017.4.11f1, hanya saja terdapat beberapa icon/tampilan menu yang terlihat berbeda namun fungsinya tetap sama.
 
(Tampilan awal Unity 2018.4.20f1
Untuk melihat komponen UI yang disediakan oleh Unity dapat dilihat pada menu GameObject à UI
 
Komponen UI tersebut merupakan komponen-komponen standar yang digunakan untuk membangun interaksi dengan pengguna.

Selanjutnya, cobalah untuk membuat Panel, dapat dicoba pada menu GameObject à UI à Panel. Tampilan setelah komponen Panel dibuat, Komponen Canvas akan terbuat secara otomatis (digunakan sebagai wadah dari komponen-komponen lainya).

 
Pada jendela Inspector dapat terlihat adanya pengaturan Anchor (default Strecth x Strecth). Anchor digunakan untuk mengatur tampilan Panel pada layar game, konsepnya adalah Responsive atau menyesuaikan.
 
Untuk mencobanya, silakan ubah Scale Panel menjadi (0.80, 0.80, 0.80) dan ubahlah ukuran layar game dengan drag pembatas antara layar Scene dan Game sebagai berikut
 
Pada tampilan di atas Anchor yang digunakan adalah Strecth x Strecth, di mana ketika layar game diperbesar/diperkecil maka tampilan panel juga ikut membesar & mengecil. Hal ini sangat membantu dalam pembuatan game karena cukup satu(1) kali membuat dapat diterapkan untuk banyak platform game.
Cobalah untuk menggunakan Anchor yang lainya, misal : Top x Right, kemudian lihat perbedaanya.
 
Jika sudah, kembalikan Anchor menjadi default (Strecth x Strecth). Lalu tambahkan komponen lainya, misal: button, dengan cara GameObject à UI à Button.
 
Untuk mengatur attribut apa saja yang ingin digunakan pada Button dapat diatu melalui jendela Inspector, misal: attribut warna sebagai berikut:
 
Hal yang sama juga dapat dilakukan untuk komponen Text (child dari Button)
 
 
Terakhir, cobalah untuk membuat tampilan seperti ini:
 
Sampai pada tahap ini diketahui bahwa sistem UI ini sangat memudahkan dalam membuat suatu desain tampilan layar pada game. Selain komponenya ± sama dengan sistem GUI (OnGUI), cara penggunaanya pun sangat mudah dan dapat dicoba langsung pada layar scene.
 

Demikian dokumentasi kali ini, Terima Kasih~


Komentar

Postingan populer dari blog ini

Film Biografi Terbaik

Film Biografi adalah sebuah film yang mendramatisasikan kehidupan orang atau tokoh dalam kehidupan nyata. Film-film semacam itu menampilkan kehidupan dari seorang tokoh sejarah dan menggunakan nama asli dari karakter utama. Pada dasanya, Film Biografi menceritakan tentang kejadian-kejadian yang dialami sang Tokoh dalam hidupnya, biasanya kehidupan sang tokoh dijelaskan secara lengkap sejak kecil sampai tua, bahkan beberapa film menjelaskan hingga sang tokoh meninggal dunia. Berikut Film Biografi Terbaik versi saya. 1.  The Imitation Game (2014) The Imitation Game adalah film cerita seru sejarah Britania Raya tahun 2014 mengenai Alan Turing, seorang matematikawan, logikawan, kriptoanalis, dan ilmuwan komputer Inggris, tokoh yang berperan penting dalam membajak kode Enigma Jerman Nazi yang membantu Sekutu memenangkan Perang Dunia II, ia kemudian dituntut secara pidana karena mengaku sebagai homoseksual. Film disutradarai oleh Morten Tyldum, dengan skenario d...

Komputer Ada Disemua Tempat

Komputer adalah sebuah alat yang dapat membantu meringankan ataupun  menggantikan  perkerjaan manusia. Istilah komputer berasal dari bahasa latin “ Computare ” yang berarti “ Menghitung ”. Tetapi seiring perkembangan zaman, komputer tidak lagi hanya sebagai alat untuk menghitung. Tetapi digunakan diberbagai aspek kehidupan diantaranya : 1. Aspek pendidikan Misalnya penggunaan sistem E-learning dalam proses pembelajaran, adanya kelas-kelas/kursus secara online sampai pelaksaan ujian/tes berbasis komputer. 2.  Aspek transportasi Pada aspek ini contohnya adalah lampu lalu lintas, sistem GPS ( Global Positioning System ), penggunaan E-toll pada gerbang tol hingga sistem  auto pilot  di pesawat. 3.  Aspek kesehatan Pernahkah kamu melihat hasil dari  sinar-X  ? itu merupakan salah satu manfaat dari pemanfaatan komputer diaspek kesehatan, contoh lainya adalah MRI ( Magnetic Resonance Imaging)  yang digunakn untu...

K3 Dalam Menggunakan Komputer

Keselamatan Kesehatan Kerja atau yang biasa disebut dengan K3 adalah upaya perlindungan yang ditunjukan agar tenaga kerja (pekerja) dan orang lain di tempat kerja atau perusahaan selalu dalam keadaan selamat dan sehat, serta agar setiap produksi dapat digunakan secara aman dan efisien (Kepmenaker Nomor. 463/MEN/1993). Pada hal ini saya akan sedikit mengulas mengenai dampak penggunaan komputer dalam bidang Kesehatan. Penggunaan komputer dalam proses kerja mempunyai banyak dampak positif, namun penggunaan komputer juga memiliki dampak negatif yang banyak pula (tergantung dengan pola tenaga kerja dalam berkerja sehari-hari) khususnya dalam bidang kesehatan.              ·         Dampak Positif 1.     Ditemukanya peralatan kedokteran canggih seperti pengukur tensi darah digital dan sinar-X. 2.     Alat pengganti organ tubuh manusia yang telah rusak misalnya mata buatan, ginjal...