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 border.
• Atur sudut membulat untuk objek.
• Tingkatkan padding antara border 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 Color untuk membuka jendela pop-up Colors, 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 Time dan Value.
   3. Jika perlu, ulangi langkah-langkah ini untuk menambah/mengatur tingkat transparansi di seluruh grafik.

Tipe

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

• Linear — Urutan warna/transparansi bertransisi dalam garis lurus melintasi elemen. Arah dikendalikan oleh rotasi dan posisinya 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.

• 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 dari gradasi mengalikan jangkauan gradasi, mengontrol seberapa banyak urutan warna/transparansi yang terlihat di 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.

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 memantulkan di setiap batas sehingga urutan warna/transparansi bergetar. Ini menghasilkan pengulangan yang halus tanpa sambungan, karena arah dibalik di setiap tepi ubin.

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 independen 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 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 border

Tergantung pada tipe induknya, UIStroke beroperasi 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 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 border secara independen dengan menginduk 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 independen dari BackgroundTransparency objek induk atau TextTransparency. Ini memungkinkan Anda merender teks dan border 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 objek 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 objek 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.