Editor Gaya

Editor 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 Editor Gaya melalui tab UI.

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

Token gaya

Token gaya, yang didefinisikan melalui atribut dari StyleSheet token, 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 Editor Gaya, arahkan mouse ke Tokens, klik ⊕, dan pilih New Token StyleSheet.
   2. Ganti nama lembar baru menjadi TokenSheet.

   

2. Dengan lembar token baru yang dipilih, buat beberapa token dengan mengklik Add 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 pada pohon tertentu, meskipun Anda dapat menggunakan tema untuk menukar gaya terkait di seluruh UI Anda, sebuah konsep yang akan dibahas kemudian dalam panduan ini.

Sebuah lembar desain yang sudah terisi bernama StyleSheet dibuat melalui tombol Buat Desain. Ini berisi aturan kelas untuk objek UI umum seperti Frame dan TextLabel. Ini juga berisi dua instance StyleDerive yang menurunkan (mewarisi) token dan gaya dari lembar gaya dasar untuk digunakan dalam konfigurasi penataan kustom Anda.

Setelah Anda memiliki lembar desain, Anda dapat menyiapkan kontainer di layar untuk digunakan dengan Editor Gaya, atau kontainer dalam permainan jika diinginkan.

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

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

   

   

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

Aturan gaya

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

• Pemilih kelas Roblox yang menargetkan semua instance dari kelas UI tertentu, misalnya Frame, ImageLabel, TextButton, dll.
• Pemilih tag instance yang menargetkan objek UI tertentu yang ditandai melalui CollectionService.
• Modifikator instance yang diterapkan melalui UIComponents hantu 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 menata semua Frames dengan warna latar belakang dan ukuran yang seragam.

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

   

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

   Properti	Token Gaya
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Klik Add a Property… di panel utama dan pilih properti yang diperlukan. Perhatikan bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Link Token.
   3. Klik $ yang muncul di bidang nilai dan pilih token yang sesuai.

   

   

3. Sisipkan Frame baru ke dalam ScreenGui yang sebelumnya Anda buat dan tautkan. Gaya yang Anda definisikan harus diterapkan secara otomatis padanya.

   

Aturan tag

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

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

   

2. Ganti nama aturan tag baru menjadi .ButtonPrimary (perhatikan tanda . di depan).

   

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

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

   1. Klik Add a Property… di panel utama dan pilih properti yang diperlukan. Ingat bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Link Token.
   3. Klik $ yang muncul di bidang nilai dan pilih token yang sesuai.

   

   

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

   1. Pastikan TextButton baru dipilih di Explorer.
   2. Dengan aturan tag .ButtonPrimary yang dipilih di kolom kiri Editor Gaya, klik Apply Tag di panel utama. Gaya yang Anda definisikan harus diterapkan secara otomatis pada tombol.

   

   

Modifikator UI

Pemilih modifikator instance menerapkan UIComponents hantu seperti UICorner atau UIStroke untuk lebih menata sebuah objek. Pengaturan aturan berikut menata TextLabel dengan ukuran teks kustom dan sudut yang membulat.

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

   

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

   1. Klik Add a Property… di panel utama dan pilih properti TextSize. Ingat bahwa Anda dapat mengetik kata kunci untuk lebih cepat menemukan properti di menu dropdown.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Link Token.
   3. Klik $ yang muncul di bidang nilai dan pilih token $Text32.

   

   

Sebuah instance pseudo diperlukan untuk mengonfigurasi dan menerapkan sudut yang membulat pada elemen lain. Untuk membuatnya:

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

   

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

   

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

   1. Klik Add a Property… di panel utama dan pilih properti CornerRadius.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Link Token.
   3. Klik $ yang muncul di bidang nilai dan pilih token $Rad20.

   

3. Sisipkan TextLabel baru ke dalam ScreenGui yang sebelumnya Anda buat dan tautkan. Gaya yang Anda definisikan harus diterapkan secara otomatis 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 status interaktif. Pengaturan aturan berikut membuat status hover dengan rotasi -4 derajat untuk semua ImageButtons.

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

   

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

   

   Sebuah instance modifikator Hover baru muncul di bawah elemen ImageButton di kolom kiri.

   

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

4. Masukkan -4 di bidang nilai properti.

   

5. Sisipkan ImageButton baru ke dalam ScreenGui yang sebelumnya Anda buat dan tautkan. Ketika Anda mengarahkan mouse ke tombol di viewport, tombol tersebut harus berputar 4 derajat berlawanan arah jarum jam.

   

Kuery gaya

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

Kuery bawaan

Beberapa kondisi StyleQuery sangat umum, seperti mengubah properti berdasarkan ViewportDisplaySize. Untuk menyederhanakan ini, Editor Gaya menyertakan kuery bawaan yang memungkinkan Anda untuk membuat aturan kondisional tanpa memerlukan instance pseudo atau nyata 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 viewport Small, Medium, dan Large.

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

   

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

   • @ViewportDisplaySizeLarge — Tentukan properti yang diterapkan ketika viewport adalah Large.
   • @ViewportDisplaySizeMedium — Tentukan properti yang diterapkan ketika viewport adalah Medium.
   • @ViewportDisplaySizeSmall — Tentukan properti yang diterapkan ketika viewport adalah Small.

   

2. Klik Add a Property… di bawah setiap aturan kuery dan atur string Text spesifik yang harus ditampilkan ketika 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 tiga perangkat yang berbeda:

   1. Sisipkan TextLabel baru ke dalam ScreenGui.

   2. Ubah Perangkat di Emulator Perangkat untuk melihat teks berubah secara real-time.

      Ukuran	Contoh Emulasi
      Large	PS5, PS4, Xbox One
      Medium	Laptop Rata-rata, HD 720
      Small	iPhone XR, iPad Generasi ke-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 lebar kontainer mencapai 400 piksel atau lebih.

1. Di kolom kiri Editor Gaya, arahkan mouse ke TextLabel, klik tombol ⋮, dan navigasikan ke New ⟩ StyleQuery ⟩ Custom.

   

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

   • ::StyleQuery aturan instance pseudo 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 tentukan properti default berikut:

   Properti	Nilai
   BackgroundColor3	$Magenta
   Text	Teks Default

3. Pilih aturan ::StyleQuery di panel utama, klik Add a Condition…, dan konfigurasikan yang berikut:

   Kondisi	Nilai
   MinSize	400, 0

   Lihat StyleQuery.IsActive sebagai referensi untuk kondisi lain 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 TextLabel baru ke dalam ScreenGui.

2. Sesuaikan lebar untuk melihat gaya berpindah secara real-time.

   Lebar 0–400 PikselLebar Lebih dari 400 Piksel

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

   

Transisi gaya

Transisi gaya, yang sebanding 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 pada semua properti kecuali 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 Insert ⟩ Transition.

   

   Sebuah transisi default 1, Quad, Out, 0 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 New ⟩ GuiState ⟩ Hover.

   

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

   Properti	Nilai
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Sisipkan TextButton baru ke dalam ScreenGui yang sebelumnya Anda buat dan tautkan. Ketika Anda mengarahkan mouse ke tombol di viewport, tombol tersebut harus secara bertahap menjadi lebih cerah dan berputar 5 derajat berlawanan arah jarum jam.

   

Terkait token

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

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

   

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

   Nama Token	Jenis	Parameter Tween
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 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 Insert ⟩ Transition.

   

5. Arahkan mouse ke baris Transition baru di bawah setiap properti, klik tombol ⋮, dan pilih Link Token. Kemudian, alih-alih memasukkan nilai statis, klik $ yang muncul di bidang 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 New ⟩ GuiState ⟩ Hover.

   

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

   Properti	Nilai
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Sisipkan TextButton baru ke dalam ScreenGui yang sebelumnya Anda buat dan tautkan. Ketika Anda mengarahkan mouse ke tombol di viewport, tombol tersebut harus secara bertahap menjadi lebih cerah dan berputar 5 derajat berlawanan arah jarum jam.

   

Tema gaya

Tema gaya terdiri dari set token spesifik yang dapat ditukar, misalnya token warna yang mendefinisikan tema "terang" dan "gelap".

Pembuatan tema

Untuk keterluasan, tema diorganisir ke dalam folder. Meskipun satu folder mungkin cukup untuk sebagian besar tujuan, Anda bebas mengorganisir tema dalam folder seperti "warna" atau "font" jika diinginkan.

1. Buat folder tema baru:

   1. Di kolom kiri Editor Gaya, arahkan mouse ke Themes, klik ⊕, dan pilih New Theme.
   2. Ganti nama item Folder baru menjadi General.

   

2. Buat lembar gaya tema baru:

   1. Arahkan mouse ke folder General baru, klik tombol ⋮, dan pilih New Theme StyleSheet.
   2. Ganti namanya menjadi ThemeA.

   

Token tema

Setelah tema dibangun, Anda dapat menghubungkan tokennya ke berbagai properti objek UI seperti BackgroundColor3 dari TextButton. Lembar tema harus menggunakan set token yang umum agar berfungsi dengan benar.

Dengan ThemeA yang dipilih di kolom kiri Editor Gaya:

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

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

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

   

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

   

3. Hubungkan token tema ke tiga properti TextButton baru:

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

   1. Klik Add a Property… di panel utama dan pilih properti yang diperlukan.
   2. Alih-alih memasukkan nilai statis, klik tombol ⋮ dan pilih Link Token.
   3. Klik $ yang muncul di bidang nilai dan pilih token tema yang sesuai.

   

   Saat menghubungkan token tema, cari $[Token] in ThemeA di hover untuk mengetahui bahwa 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 ditetapkan, Anda dapat menduplikasinya dan mengubah berbagai token untuk mendefinisikan gaya tema yang unik.

1. Di kolom kiri Editor Gaya, arahkan mouse ke tema ThemeA, klik tombol ⋮, dan pilih Duplicate.

2. Ganti nama tema yang diduplikasi menjadi ThemeB.

   

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

   Token Tema	Token Gaya
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. Di sebelah kanan bidang nilai properti, klik tombol ⋮ dan pilih Unlink Token.
   2. Klik ⋮ lagi dan pilih Link Token.
   3. Di bidang nilainya, klik $ dan pilih token gaya baru yang terkait.

   

Penukaran tema

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

1. Di kolom kiri Editor Gaya, pilih folder General di cabang Themes.

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

   ThemeAThemeB