🎯 Tujuan
Tutorial ini bertujuan untuk memastikan UI dalam game dapat menyesuaikan ukuran layar dan tampil optimal di berbagai perangkat, memberikan pengalaman yang nyaman bagi pengguna.
⏰ Konteks
Desain UI responsif adalah metode untuk secara otomatis menyesuaikan ukuran dan posisi elemen UI berdasarkan ukuran layar perangkat pengguna. Implementasi UI responsif berpengaruh besar terhadap pengalaman pengguna (user experience).
🪵 Hal yang Diperlukan
- Unity
- Rect Transform (untuk mengatur ukuran dan posisi elemen UI)
- Vertical Layout Group atau Horizontal Layout Group (untuk mengatur tata letak elemen UI)
📹 Video Tutorial
https://youtu.be/tC24d1CNSy8
📋 Langkah-Langkah
- Buka Unity dan Buat Proyek Baru
- Buka Unity dan buat proyek baru atau buka proyek yang sudah ada.
- Membuat Canvas
- Klik kanan pada panel Hierarchy, pilih UI > Canvas.
- Canvas adalah dasar di mana semua elemen UI akan ditempatkan.
- Atur Canvas Scaler
- Pilih Canvas di panel Hierarchy.
- Di panel Inspector, temukan bagian Canvas Scaler.
- Atur UI Scale Mode ke Scale With Screen Size.
- Tentukan resolusi referensi yang diinginkan (misalnya 1920x1080) agar UI skalanya mengikuti ukuran layar perangkat pengguna.
- Tambahkan Elemen UI
- Klik kanan pada Canvas, tambahkan elemen UI seperti UI Image, Button, atau Text sesuai kebutuhan.
- Mengatur Rect Transform
- Pilih elemen UI yang ingin diatur di panel Hierarchy.
- Di panel Inspector, temukan bagian Rect Transform.
- Atur Anchor (ikon tanda panah) untuk menentukan posisi relatif elemen terhadap layar. Contohnya, jika ingin elemen UI di pojok kiri atas, setel anchor ke kiri atas.
- Mengatur Tata Letak Otomatis
- Jika ada beberapa elemen UI yang perlu diatur secara otomatis (seperti tombol atau teks dalam tata letak vertikal atau horizontal):
- Tambahkan objek kosong di dalam Canvas sebagai wadah (Empty GameObject).
- Tambahkan elemen UI di dalam objek tersebut.
- Pada panel Inspector dari objek kosong, tambahkan Vertical Layout Group atau Horizontal Layout Group untuk mengatur tata letaknya.
- Penyesuaian Lebih Lanjut
- Atur Padding, Spacing, dan opsi lainnya di Layout Group sesuai kebutuhan untuk memastikan elemen UI tampil rapi dan responsif pada berbagai ukuran layar.