Pengedit Gaya

Pengedit Gaya bawaan adalah alat komprehensif yang memungkinkan Anda untuk membuat, mengelola, dan menerapkan gaya UI untuk permainan Roblox melalui kombinasi token, lembar desain, aturan gaya, dan tema.

Akses Pengedit Gaya melalui tab UI.

Setelah terbuka, klik tombol Buat Desain untuk menghasilkan set gaya dasar.

Token gaya

Token gaya, yang didefinisikan melalui atribut dari token StyleSheet, mewakili variabel properti UI yang dapat digunakan di seluruh gaya dan komponen; misalnya, mungkin ada warna umum untuk Frame.BackgroundColor3, TextLabel.TextColor3, dan UIStroke.Color. Token dapat dibandingkan dengan variabel CSS.

1. Buat lembar gaya token baru:

   1. Di kolom kiri Pengedit Gaya, arahkan mouse ke Token, klik ⊕, dan pilih Lembar Gaya Token Baru.
   2. Ubah nama lembar baru menjadi TokenSheet.

   

2. Dengan lembar token baru dipilih, buat beberapa token dengan mengklik Tambahkan a Token… di panel utama. Token-token ini akan digunakan di seluruh panduan ini untuk aturan dan tema.

   

   Nama Token	Jenis	Nilai
   Gold	Color3	#ffcc00
   Magenta	Color3	#ff0099
   Orange	Color3	#dd6030
   Oswald	Font	Oswald
   Rad20	UDim	0, 20
   RectL	UDim2	0, 300, 0, 160
   SquareL	UDim2	0, 200, 0, 200
   Text24	number	24
   Text32	number	32

   

Lembar desain

Lembar gaya desain mengumpulkan aturan gaya dan dapat dihubungkan ke pohon DataModel untuk menerapkan properti gaya ke instance UI. Hanya satu StyleSheet yang dapat diterapkan ke pohon tertentu, meskipun Anda dapat menggunakan tema untuk menukar gaya terkait di seluruh UI Anda, sebuah konsep yang akan dibahas di kemudian hari dalam panduan ini.

Lembar desain yang telah dipenuhi sebelumnya yang bernama StyleSheet dibuat melalui tombol Buat Desain. Lembar tersebut berisi aturan kelas untuk objek UI umum seperti Frame dan TextLabel. Lemar ini juga berisi dua instance StyleDerive yang menurunkan (mewarisi) token dan gaya dari lembar gaya dasar untuk digunakan dalam konfigurasi gaya kustom Anda.

Setelah Anda memiliki lembar desain, Anda dapat menyiapkan wadah di layar untuk digunakan dengan Pengedit Gaya, atau wadah di pengalaman jika diinginkan.

1. Arahkan mouse ke StarterGui di Explorer dan masukkan ScreenGui.

2. Pastikan bahwa instance baru StyleLink muncul di bawah ScreenGui dengan properti StyleSheet diatur ke lembar desain StyleSheet.

   

   

   Jika StyleLink tidak dibuat, Anda dapat dengan cepat membuat satu dengan memilih ScreenGui di Explorer serta lembar desain StyleSheet di kolom kiri Pengedit Gaya. Kemudian, klik tombol Sisipkan StyleLink di bagian kanan atas panel utama editor.

Aturan gaya

Aturan gaya diterapkan ke setiap instance yang cocok dengan definisi Selector aturan untuk mencocokkan karakteristik seperti nama kelas, tag instance, dan hubungan hierarki. Secara umum, pencocokan instance dan modifikasi melalui definisi Selector aturan beroperasi melalui:

• Pemilih kelas Roblox (class) yang menargetkan semua instance dari kelas UI tertentu, misalnya Frame, ImageLabel, TextButton, dll.
• Pemilih tag instance yang menargetkan objek UI tertentu yang ditag melalui CollectionService.
• Pelebur instance yang diterapkan melalui UIComponents seperti UICorner atau UIStroke.
• Pemilih status GuiObject yang sesuai dengan salah satu dari empat nilai enum Enum.GuiState seperti Hover.
• Pemilihan nama instance sesuai dengan nilai dari Instance.Name objek UI.

Aturan kelas

Pemilih kelas gaya menargetkan semua instance dari kelas UI tertentu. Pengaturan aturan berikut membentuk gaya semua Frames dengan warna latar belakang dan ukuran yang seragam.

1. Di kolom kiri Pengedit Gaya, pilih Frame di cabang UI Elements.

   

2. Tautkan dua token gaya yang telah dibuat sebelumnya ke dua properti Frame:

   Properti	Token Gaya
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Klik Tambahkan Properti… di panel utama dan pilih properti yang diperlukan. Perhatikan bahwa Anda dapat mengetikkan kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Tautkan Token.
   3. Klik $ yang muncul di kolom nilai dan pilih token terkait yang sesuai.

   

   

3. Sisipkan Frame baru ke dalam ScreenGui yang telah Anda buat dan tautkan. Gaya yang Anda tetapkan seharusnya otomatis diterapkan padanya.

   

Aturan tag

Pemilih tag instance menargetkan objek UI tertentu yang ditag melalui CollectionService. Pengaturan aturan berikut membentuk gaya pada TextButton yang ditandai sebagai ButtonPrimary dengan warna latar belakang kustom, font, dan ukuran teks.

1. Di kolom kiri Pengedit Gaya, arahkan mouse ke lembar StyleSheet, klik tombol ⋮, dan navigasikan ke Baru ⟩ Tag.

   

2. Ubah nama aturan tag baru menjadi .ButtonPrimary (perhatikan titik di depan .).

   

3. Tautkan tiga token gaya yang telah dibuat sebelumnya ke tiga properti TextButton:

   Properti	Token Gaya
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. Klik Tambahkan Properti… di panel utama dan pilih properti yang diperlukan. Ingat bahwa Anda dapat mengetikkan kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Tautkan Token.
   3. Klik $ yang muncul di kolom nilai dan pilih token terkait yang sesuai.

   

   

4. Sisipkan objek TextButton baru ke dalam ScreenGui yang telah Anda buat dan tautkan dan tag sebagai ButtonPrimary. Sebuah pintasan yang nyaman adalah sebagai berikut:

   1. Pastikan TextButton baru sudah terpilih di Explorer.
   2. Dengan aturan .ButtonPrimary terpilih di kolom kiri Pengedit Gaya, klik Terapkan Tag di panel utama. Gaya yang Anda tetapkan seharusnya otomatis diterapkan ke tombol tersebut.

   

   

Modifikasi UI

Pemilih modifikasi instance menerapkan UIComponents seperti UICorner atau UIStroke untuk lebih menghias sebuah objek. Pengaturan aturan berikut membentuk gaya pada TextLabel dengan ukuran teks kustom dan sudut yang membulat.

1. Di kolom kiri Pengedit Gaya, pilih TextLabel di cabang UI Elements.

   

2. Tautkan token gaya yang telah dibuat sebelumnya ke properti TextSize:

   1. Klik Tambahkan Properti… di panel utama dan pilih properti TextSize. Ingat bahwa Anda dapat mengetikkan kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Tautkan Token.
   3. Klik $ yang muncul di kolom nilai dan pilih token $Text32.

   

   

Sebuah instansi pseudo diperlukan untuk mengonfigurasi dan menerapkan sudut yang membulat ke elemen lain. Untuk membuat satu:

1. Di kolom kiri, arahkan mouse ke TextLabel, klik tombol ⋮, dan navigasikan ke Baru ⟩ Pseudo Instance ⟩ UICorner.

   

   Sebuah UICorner instansi pseudo baru muncul di bawah elemen TextLabel di kolom kiri.

   

2. Dengan instansi UICorner baru dipilih di kolom kiri, tautkan token gaya yang telah dibuat sebelumnya ke properti CornerRadius:

   1. Klik Tambahkan Properti… di panel utama dan pilih properti CornerRadius.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Tautkan Token.
   3. Klik $ yang muncul di kolom nilai dan pilih token $Rad20.

   

3. Sisipkan objek TextLabel baru ke dalam ScreenGui yang telah Anda buat dan tautkan. Gaya yang Anda tetapkan seharusnya otomatis diterapkan padanya.

   

Aturan status

Pemilih status GuiObject sesuai dengan salah satu dari empat nilai enum GuiState seperti Hover, memungkinkan Anda untuk secara otomatis mengonfigurasi perubahan gaya untuk kondisi interaktif. Pengaturan aturan berikut menciptakan status hover dengan rotasi -4 derajat untuk semua ImageButtons.

1. Di kolom kiri Pengedit Gaya, pilih ImageButton di cabang UI Elements.

   

2. Klik tombol ⋮ dan navigasikan ke Baru ⟩ GuiState ⟩ Hover.

   

   A new Hover state modifier instance appears under the ImageButton element in the left column.

   

3. Dengan modifikator Hover baru yang dipilih di kolom kiri, klik Tambahkan Properti… di panel utama dan pilih Rotation. Ingat bahwa Anda dapat mengetikkan kata kunci untuk lebih cepat menemukan properti di menu dropdown.

4. Masukkan -4 di kolom nilai properti.

   

5. Sisipkan objek ImageButton baru ke dalam ScreenGui yang telah Anda buat dan tautkan. Ketika Anda mengarahkan mouse di atas tombol di viewport, ia harus berotasi 4 derajat berlawanan arah jarum jam.

   

Kuery gaya

Kuery gaya, mirip dengan kuery kontainer dan media CSS, memungkinkan Anda menerapkan logika bersyarat ke UI Anda berdasarkan ukuran kontainer, jenis input, atau faktor lainnya. Pengedit Gaya menyediakan alur kerja yang disederhanakan untuk membuat baik logika kuery (kondisi) maupun gaya yang dihasilkan sebagai satu set yang terintegrasi.

Kuery bawaan

Beberapa kondisi StyleQuery sangat umum, seperti mengubah properti berdasarkan ViewportDisplaySize. Untuk menyederhanakannya, Pengedit Gaya menyertakan kuery bawaan yang memungkinkan Anda membuat aturan bersyarat tanpa perlu instansi pseudo atau riil dari StyleQuery; sebaliknya, Anda cukup menggunakan aturan kuery dengan pemilih yang telah ditentukan sebelumnya seperti ViewportDisplaySizeSmall.

Langkah-langkah berikut menunjukkan cara menghasilkan kuery bawaan untuk TextLabel untuk menangani ukuran tampilan Small, Medium, dan Large.

1. Di kolom kiri Pengedit Gaya, arahkan mouse ke TextLabel, klik tombol ⋮, dan navigasikan ke Baru ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   Ini menciptakan folder Queries di bawah aturan TextLabel yang berisi tiga aturan kuery:

   • @ViewportDisplaySizeLarge — Definisikan properti yang berlaku ketika viewport adalah Large.
   • @ViewportDisplaySizeMedium — Definisikan properti yang berlaku ketika viewport adalah Medium.
   • @ViewportDisplaySizeSmall — Definisikan properti yang berlaku ketika viewport adalah Small.

   

2. Klik Tambahkan Properti… di bawah setiap aturan kuery dan atur Text string yang harus ditampilkan saat kuery tersebut aktif:

   Aturan Kuery	Properti	Nilai
   @ViewportDisplaySizeLarge	Text	Teks Besar
   @ViewportDisplaySizeMedium	Text	Teks Sedang
   @ViewportDisplaySizeSmall	Text	Teks Kecil

3. Untuk memverifikasi kuery, gunakan Emulator Perangkat untuk menguji bagaimana UI merespons resolusi yang berbeda di antara tiga perangkat yang berbeda:

   1. Sisipkan objek TextLabel baru ke dalam ScreenGui.

   2. Ubah Perangkat di Emulator Perangkat untuk melihat teks berubah secara langsung.

      Ukuran	Contoh Emulasi
      Large	PS5, PS4, Xbox One
      Medium	Laptop Rata-rata, HD 720
      Small	iPhone XR, iPad Generasi 7

Kuery kustom

Anda dapat menambahkan kuery gaya ke aturan yang ada untuk membuat UI responsif yang beradaptasi dengan kontainernya. Pengaturan berikut mengonfigurasi TextLabel untuk secara otomatis mengubah tampilannya hanya ketika ia melebar hingga lebar 400 piksel atau lebih.

1. Di kolom kiri Pengedit Gaya, arahkan mouse ke TextLabel, klik tombol ⋮, dan navigasikan ke Baru ⟩ StyleQuery ⟩ Kustom.

   

   Tindakan ini membuat folder Queries di bawah aturan TextLabel yang berisi dua item terkait:

   • ::StyleQuery instansi aturan di mana Anda mendefinisikan Kondisi.
   • @StyleQuery aturan di mana Anda mendefinisikan Properti yang diterapkan ketika kondisi tersebut terpenuhi.

   

2. Pilih aturan TextLabel induk di panel utama dan tetapkan properti default berikut:

   Properti	Nilai
   BackgroundColor3	$Magenta
   Text	Teks Default

3. Pilih aturan ::StyleQuery di panel utama, klik Tambahkan Kondisi…, dan konfigurasikan yang berikut:

   Kondisi	Nilai
   MinSize	400, 0

   Lihat StyleQuery.IsActive sebagai referensi untuk kondisi lainnya yang tersedia melalui aturan ::StyleQuery.

4. Pilih aturan @StyleQuery di panel utama dan atur properti yang harus diterapkan ketika kuery aktif:

   Properti	Nilai
   BackgroundColor3	$Gold
   Text	Teks Besar

Untuk memverifikasi kuery, Anda dapat secara manual mengubah ukuran TextLabel di viewport.

1. Sisipkan objek TextLabel baru ke dalam ScreenGui.

2. Sesuaikan lebarnya untuk melihat gaya berpindah secara langsung.

   0–400 Piksel LebarLebar Lebih dari 400 Piksel

   Saat lebar TextLabel lebih kecil, kondisi MinSize tidak terpenuhi dan label menggunakan warna latar belakang dan teks defaultnya.

   

Transisi gaya

Transisi gaya, yang dapat dibandingkan dengan transisi CSS, memungkinkan Anda untuk tween nilai properti selama durasi tertentu.

Default

Untuk tween banyak properti UI dengan parameter yang sama, Anda dapat mengatur transisi default yang diterapkan ke semua properti kecuali jika transisi lain secara eksplisit diatur untuk properti tertentu.

1. Pilih TextButton di cabang UI Elements dan kemudian, di panel utama, tambahkan tiga properti baru dengan nilai berikut:

   Properti	Nilai
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. Arahkan mouse ke baris induk TextButton, klik tombol ⋮, dan navigasikan ke Sisipkan ⟩ Transisi.

   

   Transisi default 1, Quad, Out, 0 akan disisipkan langsung di bawah aturan TextButton, menunjukkan transisi selama 1 detik, gaya easing Quad, arah easing Out, dan tanpa penundaan.

   

3. Arahkan mouse ke baris induk TextButton, klik tombol ⋮, dan navigasikan ke Baru ⟩ GuiState ⟩ Hover.

   

4. Untuk modifikator Hover baru, tambahkan dua properti baru sebagai target untuk status hover.

   Properti	Nilai
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Sisipkan objek TextButton baru ke dalam ScreenGui yang telah Anda buat dan tautkan. Ketika Anda mengarahkan mouse di atas tombol di viewport, ia harus berangsur meningkat dan berotasi 5 derajat berlawanan arah jarum jam.

   

Tautan Token

Untuk menggunakan kembali perilaku transisi di seluruh beberapa aturan, Anda dapat mendefinisikan token yang mewakili tipe data TweenInfo. Pengaturan aturan berikut membuat status hover untuk mentransisi semua TextButtons ke/dari rotasi -5 derajat dan warna latar belakang yang lebih ringan.

1. Jika Anda belum melakukannya, buat lembar token gaya yang bernama TokenSheet.

   

2. Dengan lembar token baru dipilih, buat dua token baru dengan mengklik Tambahkan a Token… di panel utama.

   Nama Token	Jenis	Parameter Tween
   CubicOut	TweenInfo	Durasi= 1.25 EasingStyle= Cubic EasingDirection= Out Delay= 0
   QuadInOut	TweenInfo	Durasi= 0.5 EasingStyle= Quad EasingDirection= InOut Delay= 0

   

3. Pilih TextButton di cabang UI Elements dan kemudian, di panel utama, tambahkan tiga properti baru dengan nilai berikut:

   Properti	Nilai
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. Untuk setiap properti baru kecuali AutoButtonColor, arahkan mouse ke barisnya, klik tombol ⋮, dan pilih Sisipkan ⟩ Transisi.

   

5. Arahkan mouse ke baris Transisi baru di bawah setiap properti, klik tombol ⋮, dan pilih Tautkan Token. Kemudian, alih-alih memasukkan nilai statis, klik $ yang muncul di kolom nilai dan pilih token transisi yang sesuai.

   

   Transisi Properti	Token Transisi
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. Arahkan mouse ke baris induk TextButton, klik tombol ⋮, dan navigasikan ke Baru ⟩ GuiState ⟩ Hover.

   

7. Untuk modifikator Hover baru, tambahkan dua properti baru sebagai target untuk status hover.

   Properti	Nilai
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Sisipkan objek TextButton baru ke dalam ScreenGui yang telah Anda buat dan tautkan. Ketika Anda mengarahkan mouse di atas tombol di viewport, ia harus berangsur berwarna dan berotasi 5 derajat berlawanan arah jarum jam.

   

Tema gaya

Tema gaya terdiri dari seperangkat token khusus yang dapat ditukar, misalnya token warna yang mendefinisikan tema "siang" dan "malam".

Pembuatan tema

Untuk keterluasan, tema diatur dalam folder. Meskipun satu folder mungkin cukup untuk sebagian besar keperluan, Anda bebas mengatur tema dalam folder seperti "warna" atau "font" jika diinginkan.

1. Buat folder tema baru:

   1. Di kolom kiri Pengedit Gaya, arahkan mouse ke Tema, klik ⊕, dan pilih Tema Baru.
   2. Ubah nama item Folder baru menjadi Umum.

   

2. Buat lembar gaya tema baru:

   1. Arahkan mouse ke folder Umum baru, klik tombol ⋮, dan pilih New Theme StyleSheet.
   2. Ubah namanya menjadi TemaA.

   

Token tema

Setelah tema dibuat, Anda dapat menautkan tokennya ke berbagai properti objek UI seperti BackgroundColor3 dari TextButton. Lembar tema harus menggunakan sekumpulan token yang umum agar bekerja dengan benar.

Dengan TemaA dipilih di kolom kiri Pengedit Gaya:

1. Tautkan tiga token gaya yang telah dibuat sebelumnya ke tiga token tema baru:

   Token Tema	Token Gaya
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. Klik Tambahkan Token… di panel utama dan masukkan nama token tema.
   2. Klik $ yang muncul di kolom nilai dan pilih token gaya yang terkait.

   

2. Di kolom kiri Pengedit Gaya, pilih TextButton di cabang UI Elements.

   

3. Tautkan token tema ke tiga properti baru TextButton:

   Properti	Token Tema
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. Klik Tambahkan Properti… di panel utama dan pilih properti yang diperlukan.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Tautkan Token.
   3. Klik $ yang muncul di kolom nilai dan pilih token tema yang sesuai.

   

   Saat menautkan token tema, cari $[Token] di TemaA dalam hover-over untuk memastikan token berasal dari tema dan bukan dari lembar token global (ingat bahwa tema sudah menurunkan token global).

   

Duplikasi tema

Setelah Anda memiliki tema yang umumnya mapan, Anda dapat menggandakan dan mengubah berbagai token untuk mendefinisikan gaya tema yang unik.

1. Di kolom kiri Pengedit Gaya, arahkan mouse ke tema TemaA, klik tombol ⋮, dan pilih Duplikat.

2. Ubah nama tema yang digandakan menjadi TemaB.

   

3. Tautkan dua token tema ke dua token gaya yang berbeda:

   Token Tema	Token Gaya
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. Di sebelah kolom nilai properti, klik tombol ⋮ dan pilih Lepaskan Token.
   2. Klik ⋮ lagi dan pilih Tautkan Token.
   3. Di kolom nilai, klik $ dan pilih token gaya baru yang terkait.

   

Pertukaran tema

Setelah Anda memiliki beberapa tema, Anda dapat bertukar di antara mereka melalui folder tema, atau melalui skrip seperti yang dijelaskan dalam SetDerives().

1. Di kolom kiri Pengedit Gaya, pilih folder Umum di cabang Tema.

2. Di panel utama, tukar tema menggunakan tombol radio.

   TemaATemaB