Auto Layout / Tata Letak Otomatis Unity 3D

Dikutip dari dokumentasi Unity3D, Sistem tata letak Rect Transform cukup fleksibel untuk menangani banyak jenis tata letak yang berbeda dan juga memungkinkan penempatan elemen dalam mode bentuk bebas yang lengkap. Namun, terkadang sesuatu yang sedikit lebih terstruktur dapat dibutuhkan.

Sistem tata letak otomatis menyediakan cara untuk menempatkan elemen dalam grup tata letak bersarang seperti grup horizontal, grup vertikal, atau kisi. Ini juga memungkinkan elemen untuk secara otomatis berukuran sesuai dengan konten yang terkandung. Misalnya tombol dapat diubah ukurannya secara dinamis agar pas dengan konten teksnya ditambah beberapa bantalan


Baca juga:
tutorial lengkap cara menggunakan unity disini

Sistem tata letak otomatis adalah sistem yang dibangun di atas sistem tata letak Rect Transform dasar. Opsional dapat digunakan pada beberapa atau semua elemen.


Memahami Elemen Tata Letak Unity 3D

Sistem tata letak otomatis didasarkan pada konsep elemen tata letak dan pengontrol tata letak . Elemen tata letak adalah Objek Game dengan Rect Transform dan opsional komponen lainnya juga. Elemen tata letak memiliki pengetahuan tertentu tentang ukuran yang seharusnya. Elemen tata letak tidak secara langsung mengatur ukurannya sendiri, tetapi komponen lain yang berfungsi sebagai pengontrol tata letak dapat menggunakan informasi yang mereka berikan untuk menghitung ukuran yang akan digunakan untuknya.

Elemen tata letak memiliki properti yang mendefinisikannya sendiri:

  • Lebar minimum
  • Tinggi minimal
  • Lebar yang diinginkan
  • Tinggi yang diinginkan
  • Lebar fleksibel
  • Tinggi fleksibel

Contoh komponen pengontrol tata letak yang menggunakan informasi yang disediakan oleh elemen tata letak adalah Content Size Fitter dan berbagai komponen Grup Tata Letak . Prinsip dasar bagaimana elemen tata letak dalam grup tata letak adalah sebagai berikut:

  • Ukuran minimum pertama dialokasikan.
  • Jika ada cukup ruang yang tersedia, ukuran yang disukai dialokasikan.
  • Jika ada ruang tambahan yang tersedia, ukuran fleksibel dialokasikan.

Objek Game apa pun dengan Rect Transform di atasnya dapat berfungsi sebagai elemen tata letak. Mereka akan secara default memiliki ukuran minimum, pilihan, dan fleksibel 0. Komponen tertentu akan mengubah properti tata letak ini saat ditambahkan ke Objek Game.

Komponen Gambar dan Teks adalah dua contoh komponen yang menyediakan properti elemen tata letak. Mereka mengubah lebar dan tinggi yang diinginkan agar sesuai dengan sprite atau konten teks.


Layout Element Component / Komponen Elemen Tata Letak Unity 3D

Jika Anda ingin mengganti ukuran minimum, pilihan, atau fleksibel, Anda dapat melakukannya dengan menambahkan komponen Elemen Tata Letak ke Objek Game.

Tata Letak Dasar Unity 3D

Komponen Layout Element memungkinkan Anda mengganti nilai untuk satu atau beberapa properti layout. Aktifkan kotak centang untuk properti yang ingin Anda timpa, lalu tentukan nilai yang ingin Anda timpa


Memahami Pengontrol Tata Letak / Layout Unity 3D

Pengontrol tata letak adalah komponen yang mengontrol ukuran dan kemungkinan posisi satu atau lebih elemen tata letak, yang berarti Objek Game dengan Transformasi Rect aktif. Pengontrol tata letak dapat mengontrol elemen tata letaknya sendiri (Objek Game yang sama dengannya sendiri) atau dapat mengontrol elemen tata letak anak

Sebuah komponen yang berfungsi sebagai pengontrol tata letak juga dapat berfungsi sebagai elemen tata letak pada saat yang sama.


Ukuran Konten Fitter / Content Size Fitter Unity 3D

Content Size Fitter berfungsi sebagai pengontrol tata letak yang mengontrol ukuran elemen tata letaknya sendiri. Cara paling sederhana untuk melihat sistem tata letak otomatis beraksi adalah dengan menambahkan komponen Content Size Fitter ke Objek Game dengan komponen Teks.

Tata Letak Dasar Unity 3D

Jika Anda mengatur Horizontal Fit atau Vertical Fit ke Preferred, Rect Transform akan menyesuaikan lebar dan/atau tingginya agar sesuai dengan konten Teks


Grup Tata Letak / Layout Groups Unity 3D

Grup tata letak berfungsi sebagai pengontrol tata letak yang mengontrol ukuran dan posisi elemen tata letak turunannya. Misalnya, Grup Tata Letak Horizontal menempatkan turunannya di samping satu sama lain, dan Grup Tata Letak Kotak menempatkan turunannya dalam kotak.

Grup tata letak tidak mengontrol ukurannya sendiri. Alih-alih berfungsi sebagai elemen tata letak itu sendiri yang dapat dikontrol oleh pengontrol tata letak lain atau diatur secara manual.

Berapa pun ukuran grup tata letak yang dialokasikan, dalam banyak kasus ia akan mencoba mengalokasikan jumlah ruang yang sesuai untuk setiap elemen tata letak turunannya berdasarkan ukuran minimum, pilihan, dan fleksibel yang mereka laporkan. Grup tata letak juga dapat disarangkan secara sewenang-wenang dengan cara ini.


Properti Transformasi Persegi Panjang yang Didorong Unity 3D

Karena pengontrol tata letak dalam sistem tata letak otomatis dapat secara otomatis mengontrol ukuran dan penempatan elemen UI tertentu, ukuran dan posisi tersebut tidak boleh diedit secara manual pada saat yang sama melalui Inspector atau Scene View. Nilai yang diubah seperti itu hanya akan disetel ulang oleh pengontrol tata letak pada perhitungan tata letak berikutnya.

Rect Transform memiliki konsep properti yang digerakkan untuk mengatasi hal ini. Misalnya, Content Size Fitter yang memiliki properti Horizontal Fit yang disetel ke Minimum atau Preferred akan mendorong lebar Rect Transform pada Game Object yang sama. Lebar akan muncul sebagai read-only dan kotak info kecil di bagian atas Rect Transform akan menginformasikan bahwa satu atau lebih properti digerakkan oleh Content Size Fitter.

Properti Rect Transforms yang digerakkan memiliki alasan lain selain mencegah pengeditan manual. Tata letak dapat diubah hanya dengan mengubah resolusi atau ukuran Tampilan Game. Ini pada gilirannya dapat mengubah ukuran atau penempatan elemen tata letak, yang mengubah nilai properti yang digerakkan. Tetapi tidak diinginkan bahwa Adegan ditandai memiliki perubahan yang belum disimpan hanya karena Tampilan Game diubah ukurannya. Untuk mencegah hal ini, nilai properti yang digerakkan tidak disimpan sebagai bagian dari Adegan dan perubahannya tidak menandai adegan sebagai berubah.

Detail Teknis

Sistem tata letak otomatis dilengkapi dengan komponen tertentu yang ada di dalamnya, tetapi juga memungkinkan untuk membuat komponen baru yang mengontrol tata letak dengan cara khusus. Ini dilakukan dengan memiliki komponen yang mengimplementasikan antarmuka khusus yang dikenali oleh sistem tata letak otomatis.


Antarmuka Tata Letak Unity 3D

Sebuah komponen diperlakukan sebagai elemen tata letak oleh sistem tata letak otomatis jika mengimplementasikan antarmuka ILayoutElement .

Sebuah komponen diharapkan untuk menggerakkan Rect Transforms dari turunannya jika mengimplementasikan antarmuka ILayoutGroup.

Sebuah komponen diharapkan untuk menggerakkan RectTransform-nya sendiri jika mengimplementasikan antarmuka ILayoutSelfController.


Perhitungan Tata Letak Unity 3D

Sistem tata letak otomatis mengevaluasi dan menjalankan tata letak dalam urutan berikut:

  1. Lebar minimum, pilihan, dan fleksibel elemen tata letak dihitung dengan memanggil HitungLayoutInputHorizontal pada komponen ILayoutElement. Ini dilakukan dalam urutan bottom-up, di mana anak-anak dihitung sebelum orang tua mereka, sehingga orang tua dapat mempertimbangkan informasi pada anak-anak mereka dalam perhitungan mereka sendiri.
  2. Lebar efektif elemen tata letak dihitung dan disetel dengan memanggil SetLayoutHorizontal pada komponen ILayoutController. Ini dilakukan dalam urutan top-down, di mana anak-anak dihitung setelah orang tua mereka, karena alokasi lebar anak harus didasarkan pada lebar penuh yang tersedia di induk. Setelah langkah ini, Rect Transforms dari elemen layout memiliki lebar baru.
  3. Ketinggian elemen tata letak minimum, pilihan, dan fleksibel dihitung dengan memanggil HitungLayoutInputVertical pada komponen ILayoutElement. Ini dilakukan dalam urutan bottom-up, di mana anak-anak dihitung sebelum orang tua mereka, sehingga orang tua dapat mempertimbangkan informasi pada anak-anak mereka dalam perhitungan mereka sendiri.
  4. Ketinggian efektif elemen tata letak dihitung dan disetel dengan memanggil SetLayoutVertical pada komponen ILayoutController. Ini dilakukan dalam urutan top-down, di mana anak-anak dihitung setelah orang tua mereka, karena alokasi tinggi anak harus didasarkan pada tinggi penuh yang tersedia di orang tua. Setelah langkah ini, Rect Transforms dari elemen tata letak memiliki ketinggian baru.

Seperti yang dapat dilihat dari atas, sistem tata letak otomatis mengevaluasi lebar terlebih dahulu dan kemudian mengevaluasi ketinggian setelahnya. Jadi, tinggi yang dihitung mungkin bergantung pada lebar, tetapi lebar yang dihitung tidak akan pernah bisa bergantung pada ketinggian.


Memicu Pembuatan Ulang Tata Letak Unity 3D

Saat properti pada komponen berubah yang dapat menyebabkan tata letak saat ini tidak valid lagi, perhitungan ulang tata letak diperlukan. Ini dapat dipicu menggunakan panggilan:
LayoutRebuilder.MarkLayoutForRebuild (ubah menjadi RectTransform);

Pembangunan kembali tidak akan segera terjadi, tetapi di akhir frame saat ini, tepat sebelum rendering terjadi. Alasan mengapa ini tidak segera adalah karena ini akan menyebabkan tata letak berpotensi dibangun kembali berkali-kali selama bingkai yang sama, yang akan berdampak buruk bagi kinerja.

Pedoman kapan pembangunan kembali harus dipicu:

  • Di setter untuk properti yang dapat mengubah tata letak.
  • Dalam panggilan balik ini:
    • AktifAktifkan
    • AktifNonaktifkan
    • OnRectTransformDimensionsChange
    • OnValidate (hanya diperlukan di editor, bukan saat runtime)
    • OnDidApplyAnimationProperties
Dictionary Plus+ ©2022