Tutorial Unity – Cara Menambahkan Komponen UI (User Interface)

Cara menambahkan komponen UI pada unity – Halo selamat malam sobat, untuk tutorial kali ini kita akan fokus belajar dasar – dasar tentang bagaiamana caranya menambahkan beberapa komponen UI seperti Buttons, Text, Images dan lain – lain.



Biasanya komponen UI pada game sering dimanfaatkan untuk menampilkan informasi seperti menu, health, skills, maps, score dan masih banyak lagi.

Tutorial yang akan saya sampaikan ini sangatlah praktis sobat. Oleh karena itu, yuk kita langsung saja praktekkan langkah - langkahnya pada unity.

Saya harap, sobat sudah paham bagaimana membuat project baru di unity dan juga familiar dengan tampilan / interfacenya. Jika sobat belum paham sobat dapat melihat tutorial saya sebelumnya tentang basic unity pada blog ini.

Kita lanjutkan lagi, ketika kita sudah membuat project baru. Pertama – tama kita buat satu scene terlebih dahulu dan kita simpan dengan nama Menu atau berinama sesuai dengan yang sobat inginkan.

Setelah itu, untuk membuat atau menambahkan komponen - komponen UI kita butuh satu objek baru bernama Canvas yang akan berfungsi sebagai wadah untuk semua komponen UI kita seperti Button, Text, Image dan yang lainnya.

Kenapa Canvas ini kita ibaratkan sebagai wadah? Karena jika kita menambahkan komponen UI di luar Canvas maka komponen yang kita tambahkan tadi tidak akan terlihat pada Scene atau Game kita.

Jadi Canvas adalah sebuah game object yang memiliki wilayah atau area yang digunakan untuk meletakkan seluruh komponen UI di dalamnya, dengan kata lain komponen UI ini kita jadikan children dari suatu Canvas.

Untuk membuat Canvas, kita dapat melakukannya dengan cara pilih menu GameObject >> UI >> Canvas.

Jadi setelah GameObject Canvas ini kita tambahkan, barulah kita siap untuk meletakkan beberapa komponen UI kita.

Bagaimana sobat, sampai disini kita sudah mengerti bukan betapa berpengaruhnya Canvas ini untuk komponen – komponen UI kita.

Oke setelah kita menambahkan Canvas maka pada Hierarchy view kita akan ditambahkan 2 game object baru dengan nama Canvas dan EventSystem.

Dan pada Scene view kita akan terlihat bahwa ukuran Canvas lebih besar daripada ukuran Main Camera.

Hal tersebut bukanlah kesalahan sobat, karena memang untuk defaultnya dari Canvas memang seperti itu. Unity juga sudah menyediakan opsi yang ada di Canvas (bisa dilihat pada Inspector) agar kita bisa mengatur ukuran Canvas agar mengikuti atau sesuai dengan ukuran Main Camera.

Jika sobat ingin melakukannya, kita lihat pada komponen Canvas yang ada pada Inspector view dan pada Render Mode yang awalnya Screen Space – Overlay kita ubah menjadi Screen Space – Camera lalu drag and drop Main Camera ke dalam Render Camera.

Dan jeng jeng, sekaran ukuran Canvas kita mengikuti ukuran Main Camera.

Akan tetapi, setelah game kita build menjadi file eksekusi. Biasanya tampilan UI kita masih belum cukup resposive misalnya seperti ukuran button atau yang text terlihat sangat kecil atau sangat besar.

Untuk sedikit mencegah hal tersebut maka kita atur komponen selanjutnya yang ada pada Canvas (lihat di Inspector) yaitu Canvas Scaler. Kita ubah UI Scale Mode dari Constant Pixel Size menjadi Scale With Screen Size.

Untuk prakteknya, misal pada display game view kita resolusi camera kita rasionya 16 : 9

Maka pada Canvas Scaler kita atur seperti berikut

Untuk Reference Resolution nya saya beri nilia untuk X 1366 dan Y 768 karena ini sama dengan aspect rasio 16 : 9 yang telah kita atur pada resolusi camera kita. Untuk lebih jelasnya tentang screen resolution sobat bisa kunjungi beberapa website berikut :

• wikipedia comparison of hight definition smartphone displays
• digitalcitizen aspect ration and orientation
• screensiz 

Dan tidak lupa kita ubah juga nilai dari Match menjadi 0.5 agar posisi dari kompoen UI kita nantinya tidak berubah.

Cara Membuat Komponen UI Menggunakan Unity3d 

Sekarang kita mulai dengan menambahkan beberapa komponen UI yang lainnya sobat, kita mulai terlebih dahulu dengan komponen UI yang pertama yaitu Text.

Komponen Text atau juga bisa kita sebut dengan Label, digunakan untuk manampilkan teks pada game kita. Untuk menambahkan komponen Text caranya dapat dengan memilih menu GameObject >> UI >> Text.

Perhatikan pada Hierarchy dan Scene view kita akan bertambah seperti berikut, tapi teks kita masih belum terlihat jelas sobat.

Kita lanjutkan dengan mengatur ukuran text dan mengisi text kita sesuai dengan yang kita inginkan.
 
Kita scale text terlebih dahulu akan ukurannya menjadi lebih besar dengan cara memilih Rect tool terlebih dahulu kemudian drag and drop sesuai dengan ukuran yang dinginkan.

Atau juga bisa dengan mengubah nilai Width dan Height yang ada pada Rect Transform

Selanjutnya kita isi text yang akan kita tampilkan sesuai dengan yang diinginkan, disini saya mengisi text menjadi “BeeLancah Tutorial” dan mengubah Font Size menjadi 55 dan default untuk opsi lainnya.

Maka sekarang komponen text yang kita buat akan terlihat lebih jelas informasinya pada Scene atau Game view kita.

Untuk mengganti jenis Font atau Warnanya dan aligment dari text, sobat dapat mengaturnya pada komponen Text juga. Jadi silahkan sobat kreasikan sendiri – sendiri enggeh.

Lanjutkan lagi dengan cara mengatur posisi dari komponen UI kita sobat, cara pertama yang dapat kita lakukan yaitu sudah pasti dengan mendrag and dropnya langsung ke tempat atau posisi yang kita inginkan.

Cara kedua yaitu dengan mengatur posisinya pada komponen Rect Transform yang ada pada Text kita. Misalnya untuk memposisikan text kita ke tengah – tengah screen kita kita dapat ubah nilai Pos X dan Pos Y mejadi 0. Dan lihat sekarang teks kita sudah berada tepat di tengah screen.

Atau juga bisa kita mengaturnya dengan Anchor Presets yang telah di sediakan, dengan menekan Alt + presets yang akan kita pilih.

Dan untuk menambahkan beberapa komponen yang lainya seperti image, button dll caranya cukup sama kok sobat, bedanya hanya terletak pada fungsi - fungsi dari komponen itu sendiri.

Jadi saya rasa tutorial ini cukup sampai disini dulu, jika sobat masih bingung atau ada yang belum jelas atau tutorial ini membuat sobat tambah bingung. Jangan ragu – ragu deh untuk melemparkan pertanyaannya melalui kolom komentar.

Juga jika sobat punya pendapat yang lain pada tutorial kali ini, yuk kita bahas lewat kolom komentar atau hubungi saya langsung juga enggak apa – apa. Saya welcome kok :D

Saya ucapkan terimakasih telah membaca dan jangan lupa untuk mempraktekkannya.

Karena lebih baik mempraktekkannya walaupun hanya satu kali daripada kita membacanya berulang – ulang sampai seribu kali. CMIIW

ridhobeelancah

Bismillah, perkenalkan saya Ridho Pratama Putra penunggu lilin di www dot beelancah dot com :v

Subscribe to receive free email updates: