Langsung ke konten utama

Mengenal GUI Skin pada Unity


Pada dokumentasi kali ini akan membahas terkait GUI Skin,  Apa itu GUI Skin?

GUISkins are a collection of GUIStyles that can be applied to your GUI. Each Control type has its own Style definition. Skins are intended to allow you to apply style to an entire UI, instead of a single Control by itself.
https://docs.unity3d.com/Manual/class-GUISkin.html

Atau sederhananya (menurut saya), GUI Skin adalah suatu fitur pada Unity yang digunakan untuk merias/mempercantik tampilan pada layar game. Layaknya file script CSS pada HTML, GUI Skin juga digunakan agar user atau player nyaman dengan aplikasi(game) yang kita buat.

Sebelum lanjut ke tahap berikutnya, silahkan sediakan beberapa objek seperti file gambar, suara, dan font, atau dapat diunduh melalui link google drive berikut : https://drive.google.com/open?id=15qJYApNNuo6Ej3qTMjPFZS9_lePDrnGC

Langkah  1 : Membuka Unity & Buatlah sebuah project baru
 
Pada tampilan di atas, telah dibuat folder ‘Scenes’ untuk menampung file Scene, dan folder ‘Script’ untuk menampung file Script. (Langkah opsional, ditujukan agar file dapat tersusun dengan rapih)
            Langkah 2 : Membuat/menambahkan GUI Skin
Pada langkah ini, untuk membuat/menambahkan GUI Skin baru dapat dipraktikkan dengan cara Klik(kiri) pada menu Assets àCreate  à GUISkin.
 
 Setelah melakukan cara di atas, berilah sebuah nama (misal: BelajarGUISkin).
 
            Langkah 2 : Import assets
Untuk melakukan import Assets, dapat dilakukan dengan beberapa cara, salah satunya dengan cara Klik(kiri) menu Assets à Import New Assets… atau dengan drag filenya langsung dari Windows Explorer.
 
Kemudian cari dan temukan direktori tempat kalian menaruh assets yang sebelumnya telah kalian unduh dari link Google Drive, jika sudah ditemukan tandai (Select) pada assets yang hendak digunakan selanjutnya klik ‘Import’
 
            Maka tampilan jendela Assets pada Unity akan menjadi seperti ini:
 
Kelompokkanlah (secara manual) agar assets berupa gambar terdapat dalam folder ‘Images’, font terdapat pada folder ‘Fonts’, dan seterusnya. (Langkah opsional, ditujukan agar file dapat tersusun dengan rapih)
 
(Tampilan setelah dikelompokkan)
Langkah 3 : Manipulasi GUI Skin
Pada langkah ke-2  telah dibuat  sebuah GUI Skin baru (yang diberi nama ‘BelajarGUISkin’), pada langkah kali ini GUI Skin tersebut akan mulai dimanipulasi. Sebelum itu cobalah untuk melihat Inspector  dari GUI Skin tersebut.
 
Atribut pada menu Inspector dari GUI Skin menunjukkan bahwa GUI Skin dapat melakukan banyak manupulasi, mulai dari maniplulasi untuk box, button, toggle, label, dan sebagainya.  Berikut salah satu contoh manipulasi GUI Skin:
a)      Manipulasi button
Pada jendela inspector GUI Skin, klik(kiri) pada pilihan Button
 
Cobalah untuk merubah jenis font (font family) dari button dengan cara drag & drop file font pada Assets ke jendela inspector Button à Overflow,  atau klik tombol kecil di sebelaha kanan kolom Font lalu browse, cari Font pada Assets.

 
(Drag & Drop)

Cobalah untuk merubah ukuran font (font size), semula 0 menjadi 26.

 
Cobalah untuk merubah fungsi-fungsi tampilan pada button (misal : ButtonàNormal, ButtonàHover, ButtonàActive).
 
(Drag & Drop)
·         Normal merupakan fungsi yang aktif secara default.
·         Hover merupakan fungsi yang akan aktif jika pointer(mouse) menyentuh bagian dari object.
·         Active merupakan fungsi yang akan aktif jika pointer(mouse) mengklik sebuah object.
Langkah 4 : Membuat script pengaktifan GUI Skin
Uuntuk membuat/menambahkan Script baru dapat dipraktikkan dengan cara Klik(kiri) pada menu Assets àCreate  à C# Script, setelah itu berilah sebuah nama (misal: MenuSkin). Kemudian tuliskan kode berikut :
 
Pastikan kalau kode tersebut tidak memiliki error. Error dapat dilihat pada jendela console.
 
(Tidak ada pesan error)
Langkah 5 : Menggunakan script pada GameObject
Pasang script ‘MenuSkin.cs’ pada GameObject (misal : MainCamera), dengan cara drag & drop dari jendela Asset ke jendela Hierarchy.
 
Lalu pada jendela Inspector MainCamera, pasang parameter ‘mySkin’ dengan ‘BelajarGUISkin’ (GUI Skin yang sebelumnya sudah dibuat dan dimanipulasi).

 
(Drag & Drop)
Langkah 6 : Menjalankan program
Pada langkah ini GUI Skin yang telah dimanipulasi akan diuji dengan menggunakan kode script yang selah dibuat dan dipasang pada GameObject MainCamera.
 
(Tampilan Jika button ‘Mulai’ Diklik [Muncul: pesan Debug pada jendela console])
 
(Tampilan Jika button ‘Keluar’ Diklik [Muncul: pesan Debug pada jendela console])
·         Jenis font, ukuran font, dan background button yang sebelumnya dimanipulasi pada GUI Skin tampak muncul, membuat button lebih menarik.
·         Posisi kemunculan dan pesan yang muncul pada jendela console, diatur dalam script ‘MenuSkin.cs’ yang sebelumnya telah dibuat.


Demikian pada dokumentasi kali ini. Terima kasih~


Labels:

Komentar

Posting 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...
Posting Komentar
Read more »

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...
Posting Komentar
Read more »

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...
1 komentar
Read more »