Modifikasi penampilan UI

Dengan memanfaatkan modifikasi penampilan, Anda dapat lebih menyesuaikan penampilan dari GuiObjects Anda.

• Terapkan gradasi ke latar belakang objek.
• Terapkan garis tepi pada teks atau batas.
• 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 bidang properti Color, lalu klik tombol ⋯ di sebelah kanan kotak input. Jendela pop-up urutan warna akan ditampilkan.

   

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

   

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

4. Pilih warna yang diinginkan untuk titik kunci.

   

5. Jika perlu, Anda dapat:

   • Menambahkan titik kunci lain dengan mengklik di mana saja di 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 bidang properti Transparency, lalu klik tombol ⋯ di sebelah kanan kotak input. Jendela pop-up urutan angka akan ditampilkan.

   

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

   

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

   

4. Jika perlu, Anda dapat:

   • Menambahkan titik kunci lain dengan mengklik di mana saja di 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 berputar:

Garis tepi

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

• Warna yang dapat disesuaikan dan ketebalan garis tepi.
• Kemampuan untuk mengatur transparansi garis tepi secara independen dari transparansi induk.
• Posisi dan/atau offset yang dapat disesuaikan relatif terhadap batas 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 diskalakan 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 batas

Tergantung pada jenis induknya, UIStroke berfungsi sebagai garis luar teks atau sebagai batas. 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 batas.

Ketika diterapkan pada objek teks, Anda dapat menimpa perilaku garis tepi default dengan properti ApplyStrokeMode, memungkinkan Anda menerapkan garis tepi pada batas objek daripada teks itu sendiri. Anda bahkan dapat mengontrol garis luar teks dan batas secara independen dengan menginduk dua instansi UIStroke ke objek teks, satu diatur ke Kontekstual dan yang lainnya ke Batas.

Posisi/offset batas

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

Transparansi

Properti Transparency mengatur transparansi garis tepi secara independen dari BackgroundTransparency objek induk atau TextTransparency. Ini memungkinkan Anda merender teks dan batas yang "kosong" (hanya terdiri dari garis luar).

Gaya sudut

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

Penumpukan

Untuk menumpuk beberapa instansi UIStroke saudara di GuiObject dari depan ke belakang, Anda dapat memanfaatkan properti ZIndex. Mereka yang memiliki ZIndex lebih rendah dirender di bawah (di belakang) mereka yang memiliki ZIndex 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 rendering mereka penting.

Sudut

Instansi UICorner menerapkan deformasi pada sudut induk GuiObject. 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 mendekonstruksi induk menjadi bentuk "pil", terlepas dari lebar atau tingginya. Offset membulatkan sudut ke jumlah piksel tertentu, 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 bawah atau ke atas dengan menerapkan offset pada properti PaddingBottom 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 oleh 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 yang lebih pendek.

Warna dan transparansi

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

Offset dan penyebaran

Properti Offset memindahkan bayangan relatif terhadap posisi induk, sementara Spread memperluas atau memperkecil bayangan relatif terhadap ukuran induk.