Unity UI square yang mengisi lebar ATAU tinggi

Saya mencoba membuat papan dengan persyaratan ini:

• Itu harus persegi.
• HARUS sesuai dengan lebar ATAU tersedia.
• Ini harus dipusatkan di kanvas.
• MUNGKIN dapat dibungkus menjadi kanvas perantara tambahan sebanyak yang diperlukan.

Saya bermain dengan jangkar tetapi saya tidak menemukan kombinasi apa pun untuk melakukan itu. Satu-satunya solusi yang dapat saya pikirkan adalah skrip semacam "OnResize" dari wadah dan atur ukuran papan secara terprogram.

Ini adalah tata letak aslinya. (1) adalah BoardCanvas. (2) adalah Dewan.

Saya ingin bahwa jika layar menjadi lebih tinggi, persegi tumbuh, tetapi masih persegi:

Atau mengurangi:

Tetapi, meskipun contoh-contoh sebelumnya gertakan ke tepi atas dan bawah, saya juga ingin bahwa jika ruang vertikal menjadi lebih tinggi dari lebar yang tersedia, maka persegi membatasi ukurannya tergantung pada batas kiri dan kanan:

T1: Apakah ada cara untuk melakukan ini dengan jangkar / pivot? Tidak masalah bagi saya untuk membuat kanvas perantara di antara BoardCanvas dan Board itu sendiri jika itu berhasil.

T2: Jika demikian, di mana saya harus menempatkan jangkar? Apakah saya memerlukan objek perantara?

T3: Jika tidak, apakah scripting solusinya? Apakah ada OnResize di kanvas untuk ditangani? Saya tidak dapat melihat acara pengubahan ukuran dalam daftar, tapi mungkin saya tidak tahu harus mencarinya di mana. Saya merasa bahwa mengujinya di setiap frame tampaknya sedikit berlebihan, event driven tampaknya lebih baik.

Terima kasih!

Akhirnya saya menemukan cara untuk melakukannya (diuji dalam v5.0.0), dengan cara yang:

• Tidak perlu kode, atau persyaratan untuk memeriksa orientasi.
• Tidak meretas dengan skala dan tidak membutuhkan resolusi referensi.

Dalam tutorial video UI, ada bagian besar yang hilang, meskipun didokumentasikan dengan baik dalam dokumentasi teks: Sistem "auto-layout".

Tata letak otomatis adalah mekanisme yang dibuat dari "tata letak" dan "pengontrol tata letak". Pengontrol tata letak adalah komponen yang dapat dilampirkan ke Objek Game UI. Pengontrol dapat mengubah ukuran Rect Transformdengan cerdas.

Kontroler tertentu dapat mengubah ukuran objek di mana komponen diterapkan, sedangkan kontrol lain dapat mengubah ukuran anak-anak objek itu.

Ada beberapa pengontrol bawaan. Salah satunya adalah Aspect Ratio Fitter.

Pertama, saya memilih Boardpanel saya dan saya melampirkan Aspect Ratio Fitterkomponen baru :

The Aspect Ratio Fittertampaknya bertujuan untuk "menjaga" ingin rasio aspek objek. Untuk melakukannya, salah satu objek dapat diatur untuk "membungkus" di sekitar objek anak (sambil mempertahankan rasio aspek), atau apakah itu dapat diatur untuk memperluas dan menyesuaikan wadahnya (sambil mempertahankan rasio aspek).

Saya kemudian memilih Fit In Parentopsi dan saya menentukan bahwa saya ingin kuadrat sempurna dengan mengatur rasio aspek yang diinginkan menjadi 1:

Ini menghasilkan tata letak yang sangat mirip dengan yang saya inginkan, tetapi saya tidak perlu memberi tahu papan ukurannya. Tapi tetap saja, itu tahu itu harus persegi, seperti yang digambarkan:

Jika saya menyusut secara vertikal atau mengembang, kotak mengikuti induk, sambil mempertahankan rasio aspek:

Secara ajaib, ketika perubahan dilakukan dengan mengurangi lebar, tidak ada skrip untuk dilampirkan dan tidak ada properti untuk diubah, seperti "Aspect Ratio Fitter" yang melakukannya untuk kita secara otomatis:

Akhirnya, karena saya ingin sedikit margin di sana, saya hanya menempatkan transformasi rect container yang berfungsi sebagai spacer dan memindahkan Boarddari BoardCanvaske MarginCanvas:

Ini mungkin, tetapi dengan mungkin hanya satu atau dua baris kode untuk menentukan apakah layar lanskap atau potret dan mengubah nilai pasangan.

Di Kanvas, Anda perlu membuat "Mode Skala Ui" Scaler Kanvas menjadi "Skala dengan Ukuran Layar", dan menjadikan "Mode Kecocokan Layar" menjadi "Lebar atau Tinggi Sesuai":

Dengan asumsi Resolusi Referensi standar 800x600 digunakan, dan dengan asumsi viewport layar adalah lanskap (misalnya Screen.widthlebih besar dari Screen.height), slider Pencocokan perlu diatur semua jalan menuju Tinggi sebagai 1.

Anda kemudian akan menginginkan Gambar di Kanvas menggunakan preset jangkar tengah / tengah. Anda juga ingin Lebar dan Tinggi Gambar cocok dengan nilai Y Resolusi Resolusi Scaler Kanvas Anda.

Anda kemudian dapat mengubah ukuran viewport kamera dan melihat bahwa gambar mempertahankan bentuknya sambil merentangkan tingginya agar sesuai dengan tinggi viewport:

Jika layar potret - dan ini adalah tempat Anda mungkin perlu kode untuk memeriksa dan / atau mengubah sesuai kebutuhan - Anda perlu membuat nilai Kecocokan Scaler menjadi 0, dan mengubah Tinggi dan Lebar Gambar Anda untuk mencocokkan dengan Resolusi Referensi. Nilai X. (pada gambar di bawah ini, Lebar dan Tinggi Gambar keduanya 800)

Jika Anda mencoba memasukkan gambar yang lebih kecil di dalamnya, Anda dapat "skala" gambar dengan menyesuaikan lebar dan tingginya terhadap nilai X atau Y Referensi Resolusi (tergantung pada lanskap atau potret). Jadi misalnya, saya membuat kotak biru yang menggunakan setengah dari nilai X Resolusi Referensi (karena viewport adalah potret), dan itu menskala dan menyusut dengan baik:

Dan selanjutnya, jika Anda menginginkan kotak-kotak atau sesuatu, setiap posisi X dan Y gambar dan Tinggi dan Lebar dapat didasarkan pada persentase Resolusi Canvas Scaler's untuk melakukan apa pun yang Anda inginkan: