Modifikasi ukuran dan pembatasan

Bersamaan dengan ukuran dasar objek UI, Anda dapat memanfaatkan modifikasi ukuran untuk skala objek secara proporsional atau mengubah ukurannya secara otomatis. Anda juga dapat menyisipkan pembatasan ukuran untuk mengontrol rasio aspek, atau menetapkan ukuran atau ukuran teks minimum dan maksimum.

Skala

Objek UIScale menyimpan nilai numerik yang mengalikan properti AbsoluteSize dari GuiObject induk. Misalnya, jika Anda ingin objek menjadi dua kali lipat lebih besar dari ukuran saat ini, Anda dapat menyisipkan objek UIScale dengan properti Scale sebesar 2.

Modifikator ini berguna untuk "zoom in" saat merancang antarmuka pengguna yang detail di Studio, karena itu akan menskalakan objek dan semua anaknya secara proporsional, termasuk setiap modifikasi penampilan yang diterapkan seperti UIStroke atau UICorner. Ini juga berguna untuk tween ukuran objek, misalnya untuk sedikit meningkatkan ukuran tombol ketika pemain mengarahkan mouse mereka di atasnya.

Ukuran otomatis

Properti AutomaticSize secara otomatis mengubah ukuran objek GuiObject induk sesuai dengan ukuran keturunannya. Anda dapat menggunakan properti ini dalam berbagai kasus, termasuk:

• Memperluas sebuah GuiObject untuk menyesuaikan teks yang telah dilokalisasi dalam banyak bahasa.
• Memungkinkan pengguna untuk memasukkan teks di dalam TextBox, secara otomatis menyesuaikan ukurannya berdasarkan jumlah teks yang dimasukkan.
• Secara otomatis menyesuaikan ukuran objek teks menggunakan markup teks kaya, termasuk jenis dan ukuran font.

Anda dapat mengaktifkan properti AutomaticSize untuk setiap GuiObject. Secara default, itu diatur ke None, namun Anda dapat mengubah nilainya untuk memiliki kontrol spesifik tentang arah mana objek GuiObject diubah ukurannya untuk menyesuaikan kontennya.

Untuk mengaktifkan ukuran otomatis:

1. Di jendela Explorer, klik pada GuiObject manapun, seperti Frame, TextBox, atau ImageLabel.

2. Di jendela Properties, navigasikan ke properti AutomaticSize (AutomaticCanvasSize untuk ScrollingFrame) dan atur ke salah satu opsi berikut:

   • X — Mengubah ukuran konten secara horizontal.
   • Y — Mengubah ukuran konten secara vertikal.
   • XY — Mengubah ukuran konten baik horizontal maupun vertikal.

   

Setelah ukuran otomatis diatur, perhatikan bahwa properti objek lainnya berperilaku sebagai berikut:

Mirip dengan konsep ukuran objek, AutomaticSize mempertimbangkan properti AnchorPoint saat mengubah ukuran konten. Misalnya, video berikut menampilkan tiga TextLabels yang secara otomatis mengubah ukuran dari titik jangkar mereka.

• Label teratas memiliki nilai AnchorPoint sebesar (0, 0.5) yang menjadikannya terikat di tengah sisi kiri.
• Label tengah memiliki nilai AnchorPoint sebesar (0.5, 0.5) yang menjadikannya terikat di tengah.
• Label bagian bawah memiliki nilai AnchorPoint sebesar (1, 0.5) yang menjadikannya terikat di tengah sisi kanan.

Pembatasan

Ada tiga jenis pembatasan yang dapat Anda gunakan untuk objek antarmuka pengguna: ukuran, ukuran teks, dan rasio aspek. Untuk menggunakan pembatasan, Anda harus menetapkannya sebagai anak dari GuiObject yang ingin Anda batasi.

Ukuran

UISizeConstraint menentukan ukuran minimum dan maksimum untuk sebuah GuiObject. Pembatasan ini memastikan bahwa GuiObject tidak menjadi terlalu kecil atau besar pada berbagai ukuran layar.

Misalnya, jika Anda mengatur properti MinSize ke (200, 200) dan properti MaxSize ke (400, 400), maka GuiObject tidak dapat diubah ukurannya lebih kecil dari 200×200 piksel atau lebih besar dari 400×400 piksel.

Ukuran teks

UITextSizeConstraint menentukan ukuran font minimum dan maksimum untuk GuiObject dengan teks, seperti TextLabel, TextButton, atau TextBox. Pembatasan ini memastikan bahwa teks di dalam GuiObject tidak menjadi tidak terbaca atau terlalu besar.

Jika Anda mengaktifkan properti TextScaled dari objek GuiObject induk, ukuran teks akan menyesuaikan dengan ukuran kontainer dan menghormati pembatasan meskipun objek menjadi lebih kecil atau lebih besar dari nilai MinTextSize dan MaxTextSize.

Misalnya, objek TextLabel berikut memiliki UITextSizeConstraint dengan nilai MinTextSize sebesar 50 dan nilai MaxTextSize sebesar 80. Bahkan ketika TextLabel menjadi lebih kecil, font tidak pernah menjadi lebih kecil dari 50 piksel, dan ketika objek menjadi besar, font tidak pernah melebihi 80 piksel.

Rasio aspek

UIAspectRatioConstraint menerapkan rasio aspek lebar terhadap tinggi pada GuiObject terlepas dari ukuran dasarnya, bahkan jika ukuran tersebut ditetapkan sebagai persentase dari induknya. Misalnya, menyisipkan pembatasan ini sebagai anak dari Frame dan menetapkan properti AspectRatio pembatasan ke 2 (2:1) menjaga lebar frame dua kali lipat tinggi. Demikian pula, menetapkan properti AspectRatio pembatasan ini ke 0.5 (0.5:1) menjaga lebar frame setengah dari tingginya.

Menetapkan AspectRatio pembatasan ini ke default 1 (1:1) adalah cara yang nyaman untuk mencegah pemangkasan/pengulangan non-proporsional dari ImageLabel dengan aset gambar persegi, misalnya, thumbnail avatar.