Modifikasi penampilan UI

Dengan memanfaatkan modifikasi penampilan, Anda bisa lebih lanjut menyesuaikan penampilan GuiObjects Anda.

• Terapkan gradasi pada latar belakang objek.
• Terapkan garis tepi pada teks atau border.
• Atur sudut membulat untuk objek.
• Tingkatkan padding antara batas objek.
• Tambahkan bayangan jatuh di belakang objek.

Gradasi

Objek UIGradient menerapkan gradasi warna dan transparansi ke induk GuiObject.

Anda dapat mengonfigurasi gradasi dengan:

• Mengatur warna melalui ColorSequence di properti Color gradasi.
• Mengatur transparansi melalui NumberSequence di properti Transparency gradasi.
• Memilih titik awal gradasi (di dalam atau di luar batas induk) melalui properti Offset.
• Memilih sudut gradasi melalui properti Rotation.

Urutan warna

Untuk mengatur urutan warna gradasi:

1. Di jendela Explorer, pilih UIGradient.

2. Di jendela Properties, klik di dalam kolom properti Color, lalu klik tombol ⋯ di sebelah kanan kotak input. Jendela pop-up urutan warna akan ditampilkan.

   

   Setiap segitiga pada sumbu bawah urutan warna adalah titik kunci yang menentukan nilai warna pada titik tersebut.

   

3. Klik sebuah titik kunci di urutan warna, lalu klik kotak kecil di samping Color untuk membuka jendela pop-up Colors.

4. Pilih warna yang diinginkan untuk titik kunci.

   

5. Jika perlu, Anda dapat:

   • Menambahkan lagi titik kunci dengan mengklik di mana saja pada grafik.
   • Menyeret titik kunci yang ada ke posisi baru, atau memilih titik kunci dan memasukkan nilai waktu tertentu melalui input Time.
   • Menghapus titik kunci dengan memilihnya dan mengklik tombol Delete.
   • Mengatur ulang urutan dengan mengklik tombol Reset.

Transparansi

Untuk menyesuaikan transparansi gradasi di seluruh jangkauannya:

1. Di jendela Explorer, pilih UIGradient.

2. Di jendela Properties, klik di dalam kolom properti Transparency, lalu klik tombol ⋯ di sebelah kanan kotak input. Jendela pop-up urutan nomor akan ditampilkan.

   

   Setiap kotak di sepanjang grafik urutan nomor adalah titik kunci yang menentukan nilai transparansi pada titik tersebut.

   

3. Klik dan seret titik kunci mana pun, atau pilih sebuah titik kunci dan masukkan kombinasi waktu/nilai tertentu melalui input Time dan Value.

   

4. Jika perlu, Anda dapat:

   • Menambahkan lagi titik kunci dengan mengklik di mana saja pada grafik.
   • Menghapus titik kunci dengan memilihnya dan mengklik tombol Delete.
   • Mengatur ulang urutan dengan mengklik tombol Reset.

Offset dan rotasi

Properti Offset dan Rotation memungkinkan Anda menyesuaikan titik kontrol gradasi dan sudutnya. Seperti yang diilustrasikan dalam diagram berikut, Offset didasarkan pada persentase dari lebar atau tinggi induk, dan nilai positif atau negatif keduanya valid.

Demikian pula, ketika Anda memutar gradasi, titik kontrol juga akan berputar:

Garis tepi

Instansi UIStroke menerapkan garis luar pada teks atau border. Fitur kunci termasuk:

• Warna yang dapat disesuaikan dan ketebalan garis tepi.
• Kemampuan untuk mengatur transparansi garis tepi secara mandiri dari transparansi induk.
• Posisi dan/atau offset yang dapat disesuaikan relatif terhadap border induk.
• Tiga gaya sudut (bulat, bevel, atau miter).
• Dukungan gradasi untuk garis tepi melalui instansi UIGradient.

Ketebalan

Anda dapat mengatur lebar garis tepi melalui properti Thickness yang diukur dalam piksel (default) atau berskala relatif terhadap induk, tergantung pada StrokeSizingMode modifikator. Jika garis tepi diterapkan pada teks dan StrokeSizingMode diatur ke ScaledSize, ketebalan relatif terhadap ukuran font.

Warna atau gradasi

Anda dapat mengatur warna garis tepi melalui properti Color, serta menyisipkan instansi anak UIGradient untuk membuat garis tepi gradasi.

Garis luar teks atau border

Tergantung pada tipe induknya, UIStroke berfungsi sebagai garis luar teks atau sebagai border. Ketika Anda menginduk UIStroke ke objek teks seperti TextLabel, itu diterapkan pada garis luar teks; ketika Anda menginduk UIStroke ke objek GuiObjects lainnya, itu diterapkan pada border.

Ketika diterapkan pada objek teks, Anda dapat mengoverride perilaku garis tepi default dengan properti ApplyStrokeMode, memungkinkan Anda menerapkan garis tepi pada batas objek alih-alih pada teks itu sendiri. Anda bahkan dapat mengontrol garis luar teks dan border secara terpisah dengan mengindukkan dua instansi UIStroke ke objek teks, satu diatur ke Contextual dan yang lainnya ke Border.

Posisi/offset border

BorderStrokePosition mengatur posisi garis tepi relatif terhadap border induknya dan BorderOffset memungkinkan Anda menentukan offset tambahan untuk posisi garis tepi.

Transparansi

Properti Transparency mengatur transparansi garis tepi secara mandiri dari BackgroundTransparency objek induknya atau TextTransparency. Ini memungkinkan Anda merender teks dan border yang "hollow" (hanya terdiri dari garis luar).

Gaya sudut

Properti LineJoinMode memungkinkan Anda mengontrol bagaimana sudut diinterpretasikan. Ini menerima nilai dari Round, Bevel, atau Miter.

Penempatan

Untuk menumpuk beberapa instansi UIStroke pada sebuah GuiObject dari depan ke belakang, Anda dapat memanfaatkan properti ZIndex. Instansi dengan ZIndex yang lebih rendah akan dirender di bawah (di belakang) yang memiliki ZIndex yang lebih tinggi.

Perhatikan bahwa urutan rendering untuk instansi UIStroke dengan ZIndex yang sama tidak terdefinisi. Jangan terapkan beberapa instansi UIStroke dengan indeks yang sama jika urutan renderingnya penting.

Sudut

Instansi UICorner menerapkan deformasi pada sudut induk GuiObject-nya. Anda dapat mengontrol radius yang diterapkan melalui properti CornerRadius menggunakan Scale atau Offset.

Scale membulatkan sudut ke persentase berdasarkan total panjang sisi terpendek dari induk, yang berarti bahwa skala 0.5 atau lebih tinggi akan mendekonstruksi induk menjadi bentuk "pil," terlepas dari lebar atau tingginya. Offset membulatkan sudut ke jumlah tertentu dalam piksel, terlepas dari lebar/tinggi induk.

Anda juga dapat mengontrol sudut individu melalui properti TopLeftRadius, TopRightRadius, BottomRightRadius, dan BottomLeftRadius.

Padding

Objek UIPadding menerapkan padding atas, bawah, kiri, dan/atau kanan pada konten induk GuiObject. Misalnya, Anda dapat memindahkan teks di dalam label teks ke atas atau ke bawah dengan menerapkan offset ke properti PaddingBottom dari modifikator.

Bayangan

Objek UIShadow merender bayangan jatuh di belakang instansi UI induknya. Fitur kunci termasuk:

• Sesuaikan keburaman bayangan.
• Sesuaikan warna dan transparansi bayangan.
• Sesuaikan offset dan penyebaran bayangan.
• Jika induk diputar dengan GuiObject.Rotation, bayangan juga akan diputar.
• Jika induk memiliki sudut membulat, bayangan juga akan memiliki sudut membulat.

Keburaman

Properti BlurRadius menentukan keburaman bayangan. Nilai yang lebih besar membuat tepi bayangan terlihat lebih lembut. Perhatikan bahwa faktor skala dari properti UDim ini relatif terhadap lebar atau tinggi induk, mana pun yang lebih pendek.

Warna dan transparansi

Properti Color menentukan warna bayangan, sementara Transparency mengatur transparansi bayangan dengan 0 menjadi sepenuhnya tidak transparan dan 1 menjadi sepenuhnya transparan.

Offset dan penyebaran

Properti Offset menggeser bayangan relatif terhadap posisi induknya, sementara Spread memperluas atau menyusutkan bayangan relatif terhadap ukuran induknya.