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 GuiObject induknya.

Anda dapat mengonfigurasi gradasi dengan:

• Mengatur warna melalui ColorSequence di properti Color gradasi.
• Mengatur transparansi melalui NumberSequence di properti Transparency gradasi.
• Memilih tipe gradasi melalui properti Type.
• Memilih titik awal gradasi (di dalam atau di luar batas induk) melalui properti Offset.
• Memilih sudut gradasi melalui properti Rotation.
• Memilih skala gradasi melalui properti Scale.
• Memilih perilaku pengambilan tepi gradasi melalui properti TileMode.

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.

   

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

   

   1. Klik titik kunci di urutan warna untuk memilih atau memindahkannya, atau tambahkan titik kunci lain dengan mengklik di mana saja di grafik.
   2. Klik kotak kecil di sebelah Warna untuk membuka jendela pop-up Warna, lalu pilih warna yang diinginkan untuk titik kunci.
   3. Jika perlu, ulangi langkah-langkah ini untuk menambah/mengatur warna di seluruh grafik.

Transparansi

Untuk menyesuaikan transparansi gradasi di seluruh rentangnya:

1. Di jendela Explorer, pilih UIGradient.

2. Di jendela Properties, klik di dalam bidang properti Transparency, lalu klik tombol ⋯ di sebelah kanan kotak input.

   

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

   

   1. Klik titik kunci di urutan angka untuk memilih atau memindahkannya, atau tambahkan titik kunci lain dengan mengklik di mana saja di grafik.
   2. Masukkan kombinasi waktu/nilai tertentu melalui input Waktu dan Nilai.
   3. Jika perlu, ulangi langkah-langkah ini untuk menambah/mengatur tingkat transparansi di seluruh grafik.

Tipe

Properti Type gradasi mengatur tipenya dari antara Linear, Radial, Elliptical, atau Conical.

• Linear — Urutan warna/transparansi bertransisi dalam garis lurus melintasi elemen. Arah dikendalikan oleh rotasi dan posisi oleh offset. Ini adalah default.

• Radial — Urutan warna/transparansi memancar keluar dari pusat elemen, yang dapat dipindahkan oleh Offset. Jari-jari didefinisikan oleh rata-rata lebar dan tinggi elemen dibagi dua, secara efektif $\text{(width+height)/4}$. Rotation tidak berpengaruh pada gradasi radial.

• Elliptical — Urutan warna/transparansi memancar keluar dari pusat elemen dalam bentuk elips, yang dapat dipindahkan oleh Offset. Jari-jari horizontal dan vertikal elips adalah setengah dari lebar dan tinggi elemen, sehingga elips sesuai dengan batas elemen. Rotation memutar sumbu elips.

• Conical — Urutan warna/transparansi menyapu searah jarum jam di sekitar pusat elemen, yang dapat dipindahkan oleh Offset. Rotation mengontrol sudut awal dan akhir sapuan. Secara default ini menyapu dari 0 hingga 360 derajat, tetapi nilai Scale kurang dari 1 dapat mengurangi sudut tersebut.

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:

Skala

Skala Scale gradasi mengalikan jangkauan gradasi, mengontrol seberapa banyak urutan warna/transparansi yang terlihat dalam elemen.

• Ketika Scale kurang dari 1, gradasi mencakup kurang dari jangkauan penuh. Warna/transparansi yang tersisa diisi sesuai dengan properti TileMode.

• Ketika Scale lebih dari 1, gradasi mencakup lebih dari jangkauan penuh dan hanya sebagian dari warna/transparansi yang terlihat.

• Untuk gradasi Elliptical, Scale mempengaruhi kedua jari-jari elips.

Mode Ulang

Properti TileMode mengatur bagaimana gradasi diulang ketika urutan penuh tidak sepenuhnya menutupi elemen induk.

• Clamp — Mode default di mana nilai warna/transparansi di awal dan akhir urutan diperpanjang tanpa batas, sehingga nilai awal mengisi area sebelum gradasi dan nilai akhir mengisi area setelahnya.

• Repeat — Gradasi diulang dengan membungkus urutan warna/transparansi secara mulus dari akhir kembali ke awal. Ini dapat menghasilkan sambungan yang terlihat jika nilai warna/transparansi pertama dan terakhir dalam urutan berbeda.

• Mirror — Gradasi mencerminkan di setiap batas sehingga urutan warna/transparansi bergetar. Ini menghasilkan pengulangan yang halus tanpa sambungan, karena arah berbalik di setiap tepi ubin.

Garis Tepi

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

• 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 berada di 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 tipe 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 pada 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 pada GuiObject dari depan ke belakang, Anda dapat memanfaatkan properti ZIndex. Mereka dengan ZIndex yang lebih rendah dirender di bawah (di belakang) mereka 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 rendering mereka penting.

Sudut

Instansi UICorner menerapkan deformasi pada sudut GuiObject induknya. 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 GuiObject induknya. 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 untuk instansi UI induknya. Sebuah bayangan dapat mengikuti bentuk persegi panjang induk atau glyph dari objek teks. Bayangan bentuk dapat muncul di luar atau di dalam induk, dan menutupi area tepat di belakang induk. Baik bayangan bentuk maupun teks dapat menggunakan gradasi warna.

Jika induk memiliki UICorner atau GuiObject.Rotation yang tidak nol, bayangan bentuknya mengikuti sudut atau rotasi yang sama. UIShadow tidak mendukung Path2D atau tekstur.

Bayangan bentuk dan teks

Properti Mode menentukan apa yang melempar bayangan, dan kedua mode dapat ada di bawah induk yang sama.

• Shape adalah default. Bayangan mengikuti area persegi panjang dari setiap GuiObject.
• Text mengikuti glyph teks dari TextLabel, TextButton, atau TextBox. Objek UI lainnya tidak merender bayangan dalam mode ini.

Spread, Inset, dan ShowBehindParent tidak berpengaruh dalam mode teks.

Blur

Properti BlurRadius menentukan seberapa buram 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.

Untuk bayangan multicolor, sisipkan UIGradient sebagai anak dari UIShadow. Gradasi mempengaruhi bayangan tanpa mengubah isi induk.

Offset dan penyebaran

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

Bayangan inset

Atur Inset ke true untuk merender bayangan di atas dan di dalam induk daripada di belakangnya. Nilai positif Spread memperluas bayangan inset menuju pusat induk.

Mengungkap konten di belakang induk transparan

Secara default, ShowBehindParent adalah true, sehingga seluruh bayangan bentuk dirender, termasuk bagian yang tepat di belakang induk. Atur ke false untuk menyembunyikan bagian bayangan tersebut. Ini mencegah bayangan menggelapkan konten yang terlihat melalui induk transparan.

Properti ini tidak berpengaruh pada bayangan inset atau teks.

Menumpuk bayangan

Tambahkan beberapa instansi UIShadow ke induk yang sama untuk menggabungkan efek. Properti ZIndex mengontrol urutan render mereka. Bayangan dengan nilai lebih rendah dirender di belakang bayangan dengan nilai lebih tinggi.

Urutan render bayangan yang berbagi ZIndex yang sama tidak terdefinisi. Tetapkan setiap bayangan saudara dengan nilai yang berbeda ketika urutan mereka penting.