Stil Düzenleyici

Yerleşik Stil Düzenleyici, tokenlar, tasarım sayfaları, stil kuralları ve temalar kombinasyonu aracılığıyla Roblox oyunları için UI stilleri oluşturmanıza, yönetmenize ve uygulamanıza olanak tanıyan kapsamlı bir araçtır.

Stil Düzenleyici'ye UI sekmesi üzerinden erişebilirsiniz.

Açıldığında, bir temel stil seti oluşturmak için Tasarım Oluştur butonuna tıklayın.

Stil tokenları

Stil tokenları, bir StyleSheet'in nitelikleri aracılığıyla tanımlanan, stiller ve bileşenler arasında kullanılabilecek UI özellik değişkenlerini temsil eder; örneğin, bir Frame.BackgroundColor3, TextLabel.TextColor3 ve UIStroke.Color için ortak bir renk olabilir. Tokenlar, CSS değişkenlerine benzer.

1. Yeni bir token stil sayfası oluşturun:

   1. Stil Düzenleyici'nin sol sütununda Tokenlar üzerine gelin, ⊕ butonuna tıklayın ve Yeni Token StilSayfasını seçin.
   2. Yeni sayfanın adını TokenSheet olarak değiştirin.

   

2. Yeni token sayfası seçildiğinde, ana panelde Token Ekle… butonuna tıklayarak birkaç token oluşturun. Bu tokenlar, bu kılavuz boyunca hem kurallar hem de temalar için kullanılacaktır.

   

   Token Adı	Tip	Değer
   Altın	Color3	#ffcc00
   Macenta	Color3	#ff0099
   Turuncu	Color3	#dd6030
   Oswald	Font	Oswald
   Rad20	UDim	0, 20
   RectL	UDim2	0, 300, 0, 160
   KareL	UDim2	0, 200, 0, 200
   Metin24	sayı	24
   Metin32	sayı	32

   

Tasarım sayfaları

Bir tasarım stil sayfası, stil kurallarını toplar ve UI örneklerine stil özellikleri uygulamak için DataModel ağaçlarına bağlanabilir. Belirli bir ağaç için yalnızca bir StyleSheet uygulanabilir, ancak UI'nızda ilgili stilleri değiştirmek için temalar kullanabilirsiniz; bu kavram kılavuzda daha sonra ele alınacaktır.

Tasarım Oluştur butonu aracılığıyla önceden doldurulmuş bir tasarım sayfası olan StilSayfası oluşturulur. Frame ve TextLabel gibi yaygın UI nesneleri için sınıf kuralları içerir. Ayrıca, özelleştirilmiş stil yapılandırmalarınızda kullanmak üzere temel stil sayfasından tokenlar ve stiller türeten iki StyleDerive örneği içerir.

Bir tasarım sayfası oluşturduğunuzda, Stil Düzenleyici ile kullanmak için bir test ekran konteyneri veya isteğe bağlı olarak bir deneyim içi konteyner ayarlayabilirsiniz.

1. Keşfedin içinde StarterGui üzerine gelin ve bir ScreenGui ekleyin.

2. Yeni bir StyleLink örneğinin ScreenGui altında göründüğünü onaylayın; StyleSheet özelliği StilSayfası tasarım sayfasına ayarlanmıştır.

   

   

   Eğer StyleLink oluşturulmamışsa, Stil Düzenleyici'nin sol sütununda ScreenGui'yi ve StilSayfası tasarım sayfasını seçerek hızlıca yeni bir tane oluşturabilirsiniz. Ardından, düzenleyicinin ana panelinin sağ üst bölümünde StilLink Ekle butonuna tıklamanız yeterlidir.

Stil kuralları

Stil kuralları, kuralın Selector tanımını eşleştiren her örneğe uygulanır ve sınıf adı, örnek etiketi ve hiyerarşi ilişkileri gibi karakteristikleri eşleştirir. Yüksek seviyede, kuralın Selector tanımı aracılığıyla örnek eşleşimi ve değiştirilmesi şunlar üzerinden gerçekleştirilir:

• Belirli bir UI sınıfındaki tüm örnekleri hedefleyen Roblox sınıf seçicileri; örneğin Frame, ImageLabel, TextButton vb.
• Belirli UI nesnelerini CollectionService aracılığıyla etiketlenmiş hedef alan örnek etiket seçicileri.
• UICorner veya UIStroke gibi hayali UIComponents aracılığıyla uygulanan örnek değiştiricileri.
• GuiObject durum seçicileri, dördüncü Enum.GuiState enum değerlerinden birine karşılık gelmektedir; örneğin Hover.
• UI nesnesinin Instance.Name değerine göre örnek adı seçimi.

Sınıf kuralı

Bir stil sınıf seçici, belirli bir UI sınıfındaki tüm örnekleri hedef alır. Aşağıdaki kural, tüm Frames'i tekdüze bir arka plan rengi ve boyut ile stillendirir.

1. Stil Düzenleyici'nin sol sütununda, UI Öğeleri dalında Frame'i seçin.

   

2. Daha önce oluşturulan iki stil tokenını iki Frame özelliğine bağlayın:

   Özellik	Stil Tokenı
   BackgroundColor3	$Macenta
   Size	$KareL

   1. Ana panelde Bir Özellik Ekle… butonuna tıklayın ve gerekli özelliği seçin. Açılır menüde özellikleri daha hızlı bulmak için anahtar kelimeleri yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ butonuna tıklayın ve Token Bağlayı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve uygun ilgili tokenı seçin.

   

   

3. Önceden oluşturulmuş ve bağlanmış olduğunuz ScreenGui içerisine yeni bir Frame yerleştirin. Tanımladığınız stiller otomatik olarak uygulanmalıdır.

   

Etiket kuralı

Örnek etiket seçicileri, CollectionService aracılığıyla etiketlenmiş belirli UI nesnelerini hedef alır. Aşağıdaki kural, ButtonPrimary olarak etiketlenmiş bir TextButton'ı özel bir arka plan rengi, yazı tipi ve metin boyutu ile stillendirir.

1. Stil Düzenleyici'nin sol sütununda StilSayfası sayfasının üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ Etiket'e gidin.

   

2. Yeni etiket kuralına .ButtonPrimary ismini verin (başındaki . sembolüne dikkat edin).

   

3. Daha önce oluşturulan üç stil tokenını üç TextButton özelliğine bağlayın:

   Özellik	Stil Tokenı
   BackgroundColor3	$Altın
   FontFace	$Oswald
   TextSize	$Metin32

   1. Ana panelde Bir Özellik Ekle… butonuna tıklayın ve gerekli özelliği seçin. Açılır menüde özellikleri daha hızlı bulmak için anahtar kelimeleri yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ butonuna tıklayın ve Token Bağlayı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve uygun ilgili tokenı seçin.

   

   

4. Önceden oluşturulmuş ve bağlanmış olduğunuz ScreenGui içerisine yeni bir TextButton yerleştirin ve bunu ButtonPrimary olarak etiketleyin. Kolay bir kısayol olarak:

   1. Yeni TextButton'ın Keşif içinde seçili olduğundan emin olun.
   2. Stil Düzenleyici'nin sol sütununda .ButtonPrimary etiket kuralı seçili iken, ana panelde Etiketi Uygula butonuna tıklayın. Tanımladığınız stiller otomatik olarak butona uygulanmalıdır.

   

   

UI değiştiricisi

Örnek değiştirme seçicileri, bir nesneyi daha fazla stillendirmek için UICorner veya UIStroke gibi hayali UIComponents'yi uygular. Aşağıdaki kural, özel bir metin boyutu ve yuvarlak köşeler ile bir TextLabel stilini ayarlar.

1. Stil Düzenleyici'nin sol sütununda, UI Öğeleri dalında TextLabel'ı seçin.

   

2. Daha önce oluşturulan bir stil tokenını TextSize özelliğine bağlayın:

   1. Ana panelde Bir Özellik Ekle… butonuna tıklayın ve TextSize özelliğini seçin. Açılır menüde özellikleri daha hızlı bulmak için anahtar kelimeleri yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ butonuna tıklayın ve Token Bağlayı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve $Metin32 tokenını seçin.

   

   

Bir diğer elemente yuvarlak köşeleri uygulamak için pseudo instance oluşturmak gereklidir. Bir tane oluşturmak için:

1. Sol sütunda TextLabel'ın üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ Pseudo Instance ⟩ UICorner'a gidin.

   

   Sol sütunda TextLabel öğesinin altında yeni bir UICorner pseudo instance'ı belirir.

   

2. Sol sütunda yeni UICorner instance'ı seçiliyken, daha önce oluşturulan bir stil tokenını CornerRadius özelliğine bağlayın:

   1. Ana panelde Bir Özellik Ekle… butonuna tıklayın ve CornerRadius özelliğini seçin.
   2. Statik bir değer girmek yerine, ⋮ butonuna tıklayın ve Token Bağlayı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve $Rad20 tokenını seçin.

   

3. Önceden oluşturulmuş ve bağlanmış olduğunuz ScreenGui içerisine yeni bir TextLabel yerleştirin. Tanımladığınız stiller otomatik olarak uygulanmalıdır.

   

Durum kuralı

GuiObject durum seçicileri, GuiState enum değerlerinden dördüne karşılık gelir; bu da etkileşimli durumlar için stil değişikliklerini otomatik olarak yapılandırmanızı sağlar. Aşağıdaki kural, tüm ImageButtons için -4 derece döndürülmüş bir hover durumu oluşturur.

1. Stil Düzenleyici'nin sol sütununda, UI Öğeleri dalında ImageButton'ı seçin.

   

2. ⋮ butonuna tıklayın ve Yeni ⟩ GuiState ⟩ Hover'a gidin.

   

   Sol sütunda yeni bir Hover durum değiştirici örneği belirir.

   

3. Yeni Hover değiştirici seçili iken, ana panelde Bir Özellik Ekle… butonuna tıklayın ve Rotation özelliğini seçin. Açılır menüde özellikleri daha hızlı bulmak için anahtar kelimeleri yazabileceğinizi unutmayın.

4. Özelliğin değer alanına -4 girin.

   

5. Önceden oluşturmuş ve bağlamış olduğunuz ScreenGui içerisine yeni bir ImageButton yerleştirin. Butonun üzerine geldiğinizde, sol yönüne 4 derece döndürülmelidir.

   

Stil sorguları

Stil sorguları, CSS konteyner ve medya sorgularına benzer şekilde, UI'nizi konteyner boyutuna, giriş türüne veya diğer faktörlere bağlı olarak uygulamak için koşullu mantık uygulamanıza olanak tanır. Stil Düzenleyici, hem sorgu mantığını (koşullar) hem de sonuç stillerini birleşik bir set olarak oluşturmak için akıcı bir iş akışı sağlar.

Yerleşik sorgular

Bazı StyleQuery koşulları oldukça yaygındır, örneğin ViewportDisplaySize'a bağlı olarak özellikleri değiştirmek. Bunu basitleştirmek için, Stil Düzenleyici, StyleQuery'nin gerçek veya sahte bir örneğine ihtiyaç duymadan koşullu kurallar oluşturmanıza olanak tanıyan yerleşik sorgular içerir; bunun yerine, belirli bir seçici ile bir sorgu kuralı kullanmanız yeterlidir, örneğin ViewportDisplaySizeSmall.

Aşağıdaki adımlar, TextLabel için Small, Medium ve Large görünüm boyutlarını yönetmek için yerleşik sorgular oluşturmayı gösterir.

1. Stil Düzenleyici'nin sol sütununda, TextLabel'ın üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ StyleQuery ⟩ Yerleşik ⟩ ViewportDisplaySize'ye gidin.

   

   Bu, TextLabel kuralının altında üç sorgu kuralı içeren bir Queries klasörü oluşturur:

   • @ViewportDisplaySizeLarge — Görünüm Large olduğunda uygulanan özellikleri tanımlayın.
   • @ViewportDisplaySizeMedium — Görünüm Medium olduğunda uygulanan özellikleri tanımlayın.
   • @ViewportDisplaySizeSmall — Görünüm Small olduğunda uygulanan özellikleri tanımlayın.

   

2. Her sorgu kuralının altında Bir Özellik Ekle… butonuna tıklayın ve o sorgu aktif olduğunda görüntülenmesi gereken uygun Text dizesini ayarlayın:

   Sorgu Kuralı	Özellik	Değer
   @ViewportDisplaySizeLarge	Text	Büyük Metin
   @ViewportDisplaySizeMedium	Text	Orta Metin
   @ViewportDisplaySizeSmall	Text	Küçük Metin

3. Sorguları doğrulamak için, Cihaz Emülatörü kullanarak, UI'nın farklı çözünürlüklere nasıl yanıt verdiğini üç farklı cihazda test edin:

   1. ScreenGui içerisine yeni bir TextLabel yerleştirin.

   2. Cihaz Emülatörü'ndeki Cihazı değiştirin ve metnin gerçekte nasıl değiştiğini görün.

      Boyut	Örnek Emülasyonlar
      Large	PS5, PS4, Xbox One
      Medium	Ortalama Dizüstü Bilgisayar, HD 720
      Small	iPhone XR, iPad 7. Nesil

Özel sorgu

Mevcut bir kurala stil sorgusu ekleyerek konteynırına uyum sağlayan bir UI oluşturabilirsiniz. Aşağıdaki yapılandırma, bir TextLabel'in yalnızca 400 piksel genişliğe ulaştığında otomatik olarak görünümünü değiştirmesini sağlar.

1. Stil Düzenleyici'nin sol sütununda, TextLabel'ın üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ StyleQuery ⟩ Özel'e gidin.

   

   Bu işlem, TextLabel kuralının altında iki bağlantılı öğe içeren bir Queries klasörü oluşturur:

   • ::StyleQuery pseudo-instance kuralı; burada Koşulları tanımlarsınız.
   • @StyleQuery kuralı; burada o koşulların karşılandığı durumlarda uygulanacak Özellikleri tanımlarsınız.

   

2. Ana paneldeki üstteki TextLabel kuralını seçin ve varsayılan özellikleri tanımlayın:

   Özellik	Değer
   BackgroundColor3	$Macenta
   Text	Varsayılan Metin

3. Ana paneldeki ::StyleQuery kuralını seçin, Bir Koşul Ekle… butonuna tıklayın ve aşağıdaki gibi yapılandırın:

   Koşul	Değer
   MinSize	400, 0

   ::StyleQuery kuralı aracılığıyla mevcut diğer koşullar için StyleQuery.IsActive'e referans alın.

4. Ana panelde @StyleQuery kuralını seçin ve sorgunun aktif olduğunda uygulanması gereken özellikleri ayarlayın:

   Özellik	Değer
   BackgroundColor3	$Altın
   Text	Büyük Metin

Sorguyu doğrulamak için, viewport'ta bir TextLabel boyutunu manuel olarak yeniden boyutlandırabilirsiniz.

1. Önceden oluşturulmuş ve bağlantılı olduğunuz ScreenGui içerisine yeni bir TextLabel yerleştirin.

2. Genişliğini ayarlayın ve stilin gerçek zamanlı olarak nasıl değiştiğini görün.

   0–400 Piksel Genişlik400 Piksel Genişlikten Fazla

   TextLabel genişliği küçükken, MinSize koşulu karşılanmadığı için etiket varsayılan arka plan rengi ve metin kullanır.

   

Stil geçişleri

Stil geçişleri, CSS geçişlerine benzer şekilde, belirli bir süre boyunca özellik değerlerini tweenleştirmenizi sağlar.

Varsayılan

Aynı parametrelerle birçok UI özelliğini tweenleştirmek için, belirli bir özelliğe açıkça ayarlanmış başka bir geçiş yoksa, tüm özelliklere uygulanacak varsayılan bir geçiş ayarlayabilirsiniz.

1. UI Öğeleri dalında TextButton'ı seçin ve ardından ana panelde aşağıdaki değerlerle üç yeni özellik ekleyin:

   Özellik	Değer
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. Üstteki TextButton satırının üzerine gelin, ⋮ butonuna tıklayın ve Ekle ⟩ Geçiş'e gidin.

   

   1, Quad, Out, 0 varsayılan geçişi, TextButton kuralının altında doğrudan eklenir; bu da bir geçişin 1 sn sürdüğünü, easing stilinin Quad olduğunu, easing yönünün Out olduğunu ve gecikme olmadığını belirtmektedir.

   

3. Üstteki TextButton satırının üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ GuiState ⟩ Hover'a gidin.

   

4. Yeni Hover değiştirici için, hover durumu hedefleri olarak iki yeni özellik ekleyin.

   Özellik	Değer
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Önceden oluşturulmuş ve bağlanmış olduğunuz ScreenGui içerisine yeni bir TextButton yerleştirin. Butonun üzerine geldiğinizde, yavaş yavaş parlamalı ve 5 derece saat yönünün tersine döndürülmelidir.

   

Token ile bağlantılı

Birden fazla kural boyunca geçiş davranışlarını yeniden kullanmak için TweenInfo veri tipini temsil eden tokenlar tanımlayabilirsiniz. Aşağıdaki kural, tüm TextButtons'ın döndürülmesini ve daha açık bir arka plan rengine geçmesini sağlamaktadır.

1. Henüz yapmadıysanız, TokenSheet adlı bir token stil sayfası oluşturun.

   

2. Yeni token sayfası seçildiğinde, ana panelde Token Ekle... butonuna tıklayarak iki yeni token oluşturun.

   Token Adı	Tip	Tween Parametreleri
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 0.5 EasingStyle = Quad EasingDirection = InOut Delay = 0

   

3. UI Öğeleri dalında TextButton'ı seçin ve ardından ana panelde aşağıdaki değerlerle üç yeni özellik ekleyin:

   Özellik	Değer
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. AutoButtonColor hariç her yeni özelliğin satırının üzerine gelin, ⋮ butonuna tıklayın ve Ekle ⟩ Geçiş'i seçin.

   

5. Her özelliğin altında yeni Geçiş satırının üzerine gelin, ⋮ butonuna tıklayın ve Token Bağla'yı seçin. Ardından, statik bir değer girmek yerine, değer alanında beliren $ işaretine tıklayın ve uygun geçiş tokenını seçin.

   

   Öznitelik Geçişi	Geçiş Tokenı
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. Üstteki TextButton satırının üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ GuiState ⟩ Hover'a gidin.

   

7. Yeni Hover değiştirici için, hover durumu hedefleri olarak iki yeni özellik ekleyin.

   Özellik	Değer
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Önceden oluşturulmuş ve bağlanmış olduğunuz ScreenGui içerisine yeni bir TextButton yerleştirin. Butonun üzerine geldiğinizde, yavaş yavaş parlamalı ve 5 derece saat yönünün tersine döndürülmelidir.

   

Stil temaları

Stil temaları, "açık" ve "koyu" bir tema tanımlayan renk tokenları gibi değiştirilebilen belirli token setleri içerir.

Tema oluşturma

Genişletilebilirlik için temalar klasörler halinde düzenlenmiştir. Tek bir klasör çoğu amaç için yeterli olsa da, istenirse "renkler" veya "yazı tipleri" gibi klasörlerde temaları düzenlemekte özgürsünüz.

1. Yeni bir tema klasörü oluşturun:

   1. Stil Düzenleyici'nin sol sütununda Temalar üzerine gelin, ⊕ butonuna tıklayın ve Yeni Temayı seçin.
   2. Yeni Klasör öğesinin adını Genel olarak değiştirin.

   

2. Yeni bir tema stil sayfası oluşturun:

   1. Yeni Genel klasörünün üzerine gelin, ⋮ butonuna tıklayın ve Yeni Tema StilSayfasını seçin.
   2. Adını TemaA olarak değiştirin.

   

Tema tokenları

Bir tema oluşturduktan sonra, tokenlarını BackgroundColor3 gibi çeşitli UI nesne özelliklerine bağlayabilirsiniz. Tema sayfaları doğru çalışması için ortak bir token seti kullanmalıdır.

TemaA stil düzenleyici'nin sol sütununda seçili olduğunda:

1. Üç daha önce oluşturulmuş stil tokenını üç yeni tema tokenına bağlayın:

   Tema Tokenı	Stil Tokenı
   ArkaPlanRengi	$Altın
   ButonYazıTipi	$Oswald
   ButonMetinBoyutu	$Metin32

   1. Ana panelde Token Ekle… butonuna tıklayın ve tema tokenının adını yazın.
   2. Değer alanında beliren $ işaretine tıklayın ve ilgili stil tokenını seçin.

   

2. Stil Düzenleyici'nin sol sütununda TextButton'ı UI Öğeleri dalında seçin.

   

3. Tema tokenlarını üç yeni TextButton özelliğine bağlayın:

   Özellik	Tema Tokenı
   BackgroundColor3	$ArkaPlanRengi
   FontFace	$ButonYazıTipi
   TextSize	$ButonMetinBoyutu

   1. Ana panelde Bir Özellik Ekle… butonuna tıklayın ve gerekli özelliği seçin.
   2. Statik bir değer girmek yerine, ⋮ butonuna tıklayın ve Token Bağlayı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve uygun tema tokenını seçin.

   

   Tema tokenların bağlanırken, TemaA'daki $[Token] üzerine gelerek tokenın temadan geldiğini ve global token sayfasından gelmediğini bilmenize yardımcı olur (tema zaten global tokenları türettiğini unutmayın).

   

Tema çoğaltma

Bir temayı genel olarak oluşturduğunuzda, onu çoğaltabilir ve farkı tokenlar değiştirerek benzersiz bir tema stili tanımlayabilirsiniz.

1. Stil Düzenleyici'nin sol sütununda, TemaA temasının üzerine gelin, ⋮ butonuna tıklayın ve Çoğalt seçeneğine tıklayın.

2. Çoğaltılan temayı TemaB olarak yeniden adlandırın.

   

3. Temanın iki tokenını iki farklı stil tokenına bağlayın:

   Tema Tokenı	Stil Tokenı
   ArkaPlanRengi	$Macenta
   ButonMetinBoyutu	$Metin24

   1. Özelliğin değer alanının sağında ⋮ butonuna tıklayın ve Tokenı Bağlantısını Kes'i seçin.
   2. Tekrar ⋮ butonuna tıklayın ve Token Bağla'yı seçin.
   3. Değer alanında beliren $ işaretine tıklayın ve yeni uygun stil tokenını seçin.

   

Tema değiştirme

Birden fazla tema oluşturduğunuzda, temalar arasında geçiş yapabilirsiniz; bu, temanın klasörü aracılığıyla veya SetDerives()'de açıklandığı gibi bir betik aracılığıyla yapılabilir.

1. Stil Düzenleyici'nin sol sütununda, Temalar dalında Genel klasörünü seçin.

2. Ana panelde, radyo butonlarını kullanarak temalar arasında geçiş yapın.

   TemaATemaB