Pemrograman Permainan - UI System

Pemrograman Permainan - UI System

Halo teman-teman

Pada kesempatan kali ini saya akan membuat tutorial UI System

1. Seperti biasa ya, buat project baru atau New Project

2. Setelah itu tambahkan sebuah Panel dengan klik menu GameObject, pilih UI, pilih Panel

3. Semua object UI memiliki satu mekanisme unik yang disebut dengan Anchor. Kita bisa melihatnya pada panel Transform bahwa secara default Anchor yang dimilikinya adalah Strecth x Strecth.

4. Gunakan Hand Tool supaya tampilan Scene seperti di bawah ini

5. Lalu klik kotak penanda Anchor, pilih Top x Left. Kemudian geser panelnya pada ujung kiri atas. Pilihan ini akan membuat panel ‘menempel’ pada posisi kiri atas Canvas. Untuk mencobanya, silakan ubah ukuran layar Game

Ini adalah posisi Awal

Dan ini adalah posisi Akhir

6. Kemudian kita jalankan game dan ubahlah layar tab game

7. Lalu kita kembalikan lagi Anchor menjadi Strecth x Strecth lalu lanjutkan langkah berikutnya.

8. Kita buat Tombol. Caranya klik menu GameObject, pilih UI, pilih Button

9. Pasang Button sebagai child dari Panel dengan cara drag langsung pada tab Hierarchy.

10. Selanjutnya, buat Input Field dengan cara klik menu GameObject, pilih UI, pilih Input Field

11. Letakkan Input Field pada panel, atur posisinya sesuai keinginan masing-masing

12. Klik GameObject PlaceHolder yang berada di dalam GameObject InputField, lalu klik Tab Inspector. Pada panel Text ubah Textnya menjadi "Masukkan Nama Anda..."

13. Tambahkan sebuah Text dengan klik menu GameObject, pilih UI, pilih Text

14. Atur posisi sesuai dengan keinginan masing-masing

15. Jangan lupa ubah Text pada Button dengan klik pada Text yang di dalam Button, klik Inspector, lalu ubah Text sesuai keinginan masing-masing

16. Buat C# Scrip baru. Beri nama KlikUI.cs. Isi C# Script seperti di bawah ini

17. Pasang Script pada Game Object. Pasang pada Canvas. Sesuaikan 2 buah parameter public yang di buat tadi

18. Ubah nama GameObject Text menjadi TextTarget

19. Letakkan GameObject TextTarget dan GameObject InputField pada Script yang berada pada Canvas seperti di bawah ini

20. Selanjutnya klik Button pada Scene, cari panel event OnClick() pada tab Inspector, klik tombol + di pojok kanan bawah.

21. Masukkan GameObject yang diberi script (dalam hal ini Canvas) pada parameter Object, dan klik combobox yang bertuliskan No Function dan pilih KlikUI.

22. Pilih fungsi ClickMe().

23. Jalankan Game

Selesai deh :D

Itulah tutorial UI System yang bisa. Mohon maaf bila ada kesalahan dan kekurangan dalam membuat tutorial UI System ini. Semoga tutorial ini dapat bermanfaat bagi pembaca maupun pembuat tutorial ini.

Terima kasih

Wassalamu'alaikum Warahmatullahi Wabarakatuh