Merancang UI untuk Beberapa Resolusi
Game dan aplikasi modern sering perlu mendukung berbagai resolusi layar yang berbeda dan tata letak UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary perlu dapat beradaptasi dengan itu. Sistem UI dalam Unity mencakup berbagai alat untuk tujuan ini yang dapat dikombinasikan dengan berbagai cara.
Dalam cara ini kita akan menggunakan studi kasus sederhana dan melihat dan membandingkan alat yang berbeda dalam konteks itu. Dalam studi kasus kami, kami memiliki tiga tombol di sudut layar seperti yang ditunjukkan di bawah ini, dan tujuannya adalah untuk menyesuaikan tata letak ini ke berbagai resolusi.
Untuk cara ini kita akan mempertimbangkan empat resolusi layar: Telepon HD di portrait (640 x 960) dan lansekap (960 x 640) dan SD Telepon dalam potret (320 x 480) dan lansekap (480 x 320). Tata letak awalnya diatur dalam resolusi Potret HD Telepon.
Menggunakan jangkar untuk beradaptasi dengan rasio aspek yang berbeda
Elemen UI adalah dengan jangkar default ke pusat persegi panjang induk. Ini berarti bahwa mereka menyimpan offset konstan dari pusat.
Jika resolusi diubah menjadi lansekap aspect ratioHubungan dimensi proporsional gambar, seperti lebar dan tingginya.
Lihat di Glossary dengan setup ini, tombol mungkin tidak berada di dalam persegi panjang layar lagi.
Salah satu cara untuk menjaga tombol di dalam layar adalah untuk mengubah tata letak seperti lokasi tombol diikat ke sudut layar masing-masing. Jangkar dari tombol kiri atas dapat diatur ke sudut kiri atas menggunakan Anchors Preset turun dalam InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
Lihat di Glossary, atau dengan menyeret pegangan jangkar segitiga di Tampilan SceneAdegan berisi lingkungan dan menu permainan Anda. Pikirkan setiap file Adegan unik sebagai tingkat yang unik. Di setiap Adegan, Anda menempatkan lingkungan, hambatan, dan dekorasi, pada dasarnya merancang dan membangun permainan Anda dalam potongan-potongan. More info
Lihat di Glossary. Yang terbaik untuk melakukan ini sementara resolusi layar saat ini ditetapkan di Game View adalah salah satu layout awalnya dirancang untuk, di mana penempatan tombol terlihat benar. (Lihat halaman Tata letak dasar UI untuk informasi lebih lanjut tentang jangkar.) Demikian pula, jangkar untuk tombol kiri dan kanan bawah dapat diatur ke sudut kiri bawah dan sudut kanan bawah, masing-masing.
Setelah tombol telah jangkar ke sudut masing-masing, mereka menempel pada mereka ketika mengubah resolusi dengan rasio aspek yang berbeda.
Ketika ukuran layar diubah menjadi resolusi yang lebih besar atau lebih kecil, tombol juga akan tetap berlabuh ke sudut masing-masing. Namun, karena mereka menjaga ukuran aslinya sebagaimana ditentukan dalam pixelsUnit terkecil dalam gambar komputer. Ukuran piksel tergantung pada resolusi layar Anda. Pencahayaan pixel dihitung pada setiap piksel layar. More info
Lihat di Glossary, mereka dapat mengambil proporsi yang lebih besar atau lebih kecil dari layar. Ini mungkin atau mungkin tidak diinginkan, tergantung pada bagaimana Anda ingin tata letak Anda untuk berperilaku pada layar dari resolusi yang berbeda.
Dalam cara ini, kita tahu bahwa resolusi yang lebih kecil dari Potret SD Telepon dan Lansekap tidak sesuai dengan layar yang secara fisik lebih kecil, tetapi agak hanya layar dengan kepadatan piksel yang lebih rendah. Pada layar berdensitas bawah ini tombol tidak boleh muncul lebih besar dari pada layar berdensitas tinggi - mereka harus muncul dengan ukuran yang sama.
Ini berarti bahwa tombol harus menjadi lebih kecil oleh persentase yang sama seperti layar lebih kecil. Dengan kata lain, skala tombol harus mengikuti ukuran layar. Ini adalah di mana komponen Canvas ScalerMengontrol skala keseluruhan dan kepadatan piksel dari semua elemen UI di Kanvas, termasuk ukuran font dan batas gambar. More info
Lihat di Glossary dapat membantu.
Scaling dengan Ukuran Layar
Komponen Canvas Scaler dapat ditambahkan ke root CanvasArea yang berisi semua elemen UI di tempat kejadian. Area Canvas ditampilkan sebagai persegi panjang di Tampilan Adegan. More info
Lihat di Glossary - Objek Permainan dengan komponen Canvas di atasnya, yang semua elemen UI adalah anak-anak. Ini juga ditambahkan secara default ketika membuat Canvas baru melalui menu GameObjectObjek mendasar dalam adegan Unity, yang dapat mewakili karakter, props, pemandangan, kamera, waypoints, dan banyak lagi. Fungsi GameObject didefinisikan oleh Komponen yang melekat padanya. More info
Lihat di Glossary.
Dalam komponen Canvas Scaler, Anda dapat mengatur UI Scale Mode untuk Scale With Screen Size. Dengan mode skala ini Anda dapat menentukan resolusi untuk digunakan sebagai referensi. Jika resolusi layar saat ini lebih kecil atau lebih besar dari resolusi referensi ini, faktor skala Kanvas diatur sesuai, sehingga semua elemen UI berskala atau turun bersama dengan resolusi layar.
Dalam kasus kami, kami mengatur Canvas Scaler untuk menjadi resolusi portrait HD Telepon 640 x 960. Sekarang, ketika mengatur resolusi layar ke resolusi portrait SD Telepon 320 x 480, seluruh tata letaknya berskala sehingga muncul secara proporsional sama dengan resolusi penuh. Semuanya berskala: Ukuran tombol, jarak mereka ke tepi layar, grafik tombol, dan elemen teks. Ini berarti bahwa tata letak akan muncul sama dalam resolusi potret SD Telepon seperti di portrait HD Telepon; hanya dengan kepadatan piksel yang lebih rendah.
Satu hal yang harus diperhatikan: Setelah menambahkan komponen Timbangan Kanvas, penting juga memeriksa bagaimana tata letak terlihat pada rasio aspek lain. Dengan mengatur resolusi kembali ke lansekap HD Telepon, kita dapat melihat bahwa tombol-tombol sekarang muncul lebih besar dari mereka harus (dan digunakan untuk).
Alasan untuk tombol yang lebih besar dalam rasio aspek lansekap datang ke bagaimana cara kerja pengaturan Skala Kanvas. Secara default membandingkan lebar atau resolusi saat ini dengan lebar Canvas Scaler dan hasilnya digunakan sebagai faktor skala untuk mengukur segalanya. Sejak resolusi lansekap saat ini 960 x 640 memiliki lebar yang lebih besar 1,5 kali dari potret Canvas Scaler dari 640 x 960, tata letaknya ditingkatkan oleh 1,5.
Komponen ini memiliki properti yang disebut Match yang dapat 0 (Lebar), 1 (Height) atau nilai di antara. Secara default diatur ke 0, yang membandingkan lebar layar saat ini dengan lebar Skala Kanvas seperti yang dijelaskan.
Jika properti Match diatur menjadi 0,5 bukan, itu akan membandingkan lebar saat ini ke lebar referensi dan ketinggian saat ini ke ketinggian referensi, dan memilih faktor skala yang ada di antara keduanya. Karena dalam hal ini resolusi lansekap adalah 1.5 kali lebih lebar tetapi juga 1.5 kali lebih pendek, dua faktor bahkan keluar dan menghasilkan faktor skala akhir 1, yang berarti tombol menjaga ukuran aslinya.
Pada titik ini tata letak mendukung semua resolusi layar empat menggunakan kombinasi jangkar yang tepat dan komponen Timbangan Kanvas pada Kanvas.
Lihat halaman referensi Catalog untuk informasi lebih lanjut tentang cara yang berbeda untuk mengukur elemen UI sehubungan dengan ukuran layar yang berbeda.