Stil Editörü

Yerleşik Stil Editörü, Roblox oyunları için UI stilleri oluşturmanıza, yönetmenize ve uygulamanıza olanak tanıyan kapsamlı bir araçtır; bu, tokenler, tasarım sayfaları, stil kuralları ve temalar kombinasyonu ile gerçekleştirilir.

Stil Editörü'ne 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 tokenleri

Stil tokenleri, bir token StyleSheet'in özellikleri aracılığıyla tanımlanır ve stiller ve bileşenler arasında kullanılabilecek UI özellik değişkenlerini temsil eder; örneğin, Frame.BackgroundColor3, TextLabel.TextColor3 ve UIStroke.Color için ortak bir renk olabilir. Tokenler, CSS değişkenleri ile karşılaştırılabilir.

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

   1. Stil Editörü'nün sol sütununda Tokenler üzerine gelin, ⊕'a tıklayın ve Yeni Token StilSayfası'nı seçin.
   2. Yeni sayfayı TokenSheet olarak yeniden adlandırın.

   

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

   

   Token Adı	Tür	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
   SquareL	UDim2	0, 200, 0, 200
   Text24	number	24
   Text32	number	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, bu kılavuzun ilerleyen bölümlerinde ele alınacaktır.

Tasarım Oluştur butonu aracılığıyla önceden doldurulmuş bir StyleSheet tasarım sayfası oluşturulur. Bu sayfa, Frame ve TextLabel gibi yaygın UI nesneleri için sınıf kurallarını içerir. Ayrıca, özel stil yapılandırmalarınızda kullanılmak üzere temel stil sayfasından tokenleri ve stilleri türeten (miras alan) iki StyleDerive örneği içerir.

Bir tasarım sayfanız olduğunda, Stil Editörü ile kullanmak üzere bir test ekran içeriği veya isterseniz bir oyun içi içerik ayarlayabilirsiniz.

1. Explorer içinde StarterGui üzerine gelin ve bir ScreenGui ekleyin.

2. Yeni bir StyleLink örneğinin ScreenGui altında göründüğünü doğrulayın ve StyleSheet özelliği StyleSheet tasarım sayfasına ayarlanmış olsun.

   

   

   Eğer StyleLink oluşturulmadıysa, Explorer içindeki ScreenGui'yi ve Stil Editörü'nün sol sütunundaki StyleSheet tasarım sayfasını seçerek hızlıca bir tane oluşturabilirsiniz. Ardından, editörün ana panelinin üst sağ kısmındaki Ekle StyleLink butonuna tıklayın.

Stil kuralları

Stil kuralları, kuralın Selector tanımına uyan her örneğe uygulanır ve sınıf adı, örnek etiketi ve hiyerarşi ilişkileri gibi özellikleri eşleştirir. Yüksek seviyede, bir kuralın Selector tanımı aracılığıyla örnek eşleştirme ve değiştirme şu şekilde çalışır:

• Belirli bir UI sınıfının tüm örneklerini hedefleyen Roblox sınıf seçicileri; örneğin Frame, ImageLabel, TextButton vb.
• CollectionService aracılığıyla etiketlenmiş belirli UI nesnelerini hedefleyen örnek etiket seçicileri.
• UICorner veya UIStroke gibi hayali UIComponents aracılığıyla uygulanan örnek değiştiricileri.
• GuiObject durum seçicileri, Enum.GuiState enum değerlerinden birine karşılık gelir; ö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ının tüm örneklerini hedef alır. Aşağıdaki kural, tüm Frames'i tek tip bir arka plan rengi ve boyut ile stillendirir.

1. Stil Editörü'nün sol sütununda, UI Öğeleri dalında Frame'i seçin.

   

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

   Özellik	Stil Tokeni
   BackgroundColor3	$Macenta
   Size	$SquareL

   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 Tokeni Bağla'yı seçin.
   3. Değer alanında görünen $'ye tıklayın ve uygun ilişkili tokeni seçin.

   

   

3. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir Frame ekleyin. Tanımladığınız stiller otomatik olarak ona 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 Editörü'nün sol sütununda StyleSheet sayfasının üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ Etiket'e gidin.

   

2. Yeni etiket kuralını .ButtonPrimary olarak yeniden adlandırın (ön ek .'yi unutmayın).

   

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

   Özellik	Stil Tokeni
   BackgroundColor3	$Altın
   FontFace	$Oswald
   TextSize	$Text32

   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 Tokeni Bağla'yı seçin.
   3. Değer alanında görünen $'ye tıklayın ve uygun ilişkili tokeni seçin.

   

   

4. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir TextButton ekleyin ve onu ButtonPrimary olarak etiketleyin. Kolay bir kısayol olarak:

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

   

   

UI değiştirici

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

1. Stil Editörü'nün sol sütununda, UI Öğeleri dalında TextLabel'ı seçin.

   

2. Daha önce oluşturulmuş bir stil tokenini 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 Tokeni Bağla'yı seçin.
   3. Değer alanında görünen $'ye tıklayın ve $Text32 tokenini seçin.

   

   

Bir sahte örnek, diğer öğelere yuvarlatılmış köşeler uygulamak için gereklidir. Bir tane oluşturmak için:

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

   

   Sol sütundaki TextLabel öğesinin altında yeni bir UICorner sahte örneği görünür.

   

2. Sol sütunda yeni UICorner örneği seçili iken, daha önce oluşturulmuş bir stil tokenini 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 Tokeni Bağla'yı seçin.
   3. Değer alanında görünen $'ye tıklayın ve $Rad20 tokenini seçin.

   

3. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir TextLabel ekleyin. Tanımladığınız stiller otomatik olarak ona uygulanmalıdır.

   

Durum kuralı

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

1. Stil Editörü'nün sol sütununda, UI Öğeleri dalında ImageButton'ı seçin.

   

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

   

   Sol sütundaki ImageButton öğesinin altında yeni bir Hover durum değiştirici örneği görünür.

   

3. Yeni Hover değiştirici seçili iken, ana panelde Bir Özellik Ekle… butonuna tıklayın ve Rotation'ı 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. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir ImageButton ekleyin. Butonun üzerine geldiğinizde, 4 derece saat yönünün tersine dönecektir.

   

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 dayalı olarak koşullu mantık uygulamanıza olanak tanır. Stil Editörü, sorgu mantığını (koşulları) ve sonuç stillerini birleştirilmiş bir set olarak oluşturmak için akıcı bir iş akışı sağlar.

Yerleşik sorgular

Bazı StyleQuery koşulları çok yaygındır; örneğin, ViewportDisplaySize'e dayalı özellikleri değiştirmek. Bunu basitleştirmek için, Stil Editörü, bir StyleQuery'nin sahte veya gerçek bir örneğine ihtiyaç duymadan koşullu kurallar oluşturmanıza olanak tanıyan yerleşik sorgular içerir; bunun yerine, ViewportDisplaySizeSmall gibi önceden tanımlanmış bir seçici ile bir sorgu kuralı kullanırsınız.

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

1. Stil Editörü'nün sol sütununda, TextLabel üzerine gelin, ⋮ butonuna tıklayın ve Yeni ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize'na gidin.

   

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

   • @ViewportDisplaySizeLarge — Görünüm Large olduğunda uygulanacak özellikleri tanımlayın.
   • @ViewportDisplaySizeMedium — Görünüm Medium olduğunda uygulanacak özellikleri tanımlayın.
   • @ViewportDisplaySizeSmall — Görünüm Small olduğunda uygulanacak ö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 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üklerde üç farklı cihazda nasıl tepki verdiğini test edin:

   1. ScreenGui içine yeni bir TextLabel ekleyin.

   2. Cihaz Emülatörü'ndeki Cihaz'ı değiştirin ve metnin gerçek zamanlı olarak 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

Herhangi bir mevcut kurala bir stil sorgusu ekleyerek, konteynerine uyum sağlayan duyarlı bir UI oluşturabilirsiniz. Aşağıdaki yapılandırma, TextLabel'ın yalnızca 400 piksel veya daha fazla genişliğe genişlediğinde görünümünü otomatik olarak değiştirmesini ayarlar.

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

   

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

   • ::StyleQuery sahte örnek kuralı, Koşulları tanımladığınız yerdir.
   • @StyleQuery kuralı, o koşullar karşılandığında uygulanacak Özellikleri tanımladığınız yerdir.

   

2. Ana paneldeki üst TextLabel kuralını seçin ve aşağıdaki varsayılan özellikleri tanımlayın:

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

3. ::StyleQuery kuralını ana panelde seçin, Bir Koşul Ekle… butonuna tıklayın ve aşağıdakileri 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 bakın.

4. @StyleQuery kuralını ana panelde seçin ve sorgu aktif olduğunda uygulanacak özellikleri ayarlayın:

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

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

1. ScreenGui içine yeni bir TextLabel ekleyin.

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

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

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

   

Stil geçişleri

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

Varsayılan

Aynı parametrelerle birçok UI özelliğini tweenlemek için, tüm özelliklere uygulanacak bir varsayılan geçiş ayarlayabilirsiniz; aksi takdirde belirli bir özellik için başka bir geçiş açıkça ayarlanmadıkça.

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ına 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, 1 saniyelik bir geçiş, Quad yumuşatma stili, Out yumuşatma yönü ve gecikme olmadığını gösterir.

   

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

   

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

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

   

5. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir TextButton ekleyin. Butonun üzerine geldiğinizde, yavaşça parlayacak ve 5 derece saat yönünün tersine dönecektir.

   

Token ile bağlantılı

Birden fazla kuralda geçiş davranışlarını yeniden kullanmak için, TweenInfo veri türünü temsil eden tokenler tanımlayabilirsiniz. Aşağıdaki kural, tüm TextButtons'ı -5 derece döndürme ve daha açık bir arka plan rengine geçiş yapmak için bir hover durumu oluşturur.

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

   

2. Yeni token sayfası seçili iken, ana panelde Bir Token Ekle… butonuna tıklayarak iki yeni token oluşturun.

   Token Adı	Tür	Tween Parametreleri
   CubicOut	TweenInfo	Süre = 1.25 EasingStyle = Cubic EasingDirection = Out Gecikme = 0
   QuadInOut	TweenInfo	Süre = 0.5 EasingStyle = Quad EasingDirection = InOut Gecikme = 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 dışındaki her yeni özelliğin satırına gelin, ⋮ butonuna tıklayın ve Ekle ⟩ Geçiş'i seçin.

   

5. Her özelliğin altındaki yeni Geçiş satırına gelin, ⋮ butonuna tıklayın ve Tokeni Bağla'yı seçin. Ardından, statik bir değer girmek yerine, değer alanında görünen $'ye tıklayın ve uygun geçiş tokenini seçin.

   

   Özellik Geçişi	Geçiş Tokeni
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

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

   

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

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

   

8. Daha önce oluşturduğunuz ve bağladığınız ScreenGui içine yeni bir TextButton ekleyin. Butonun üzerine geldiğinizde, yavaşça parlayacak ve 5 derece saat yönünün tersine dönecektir.

   

Stil temaları

Stil temaları, değiştirilebilen belirli token setlerinden oluşur; örneğin, "açık" ve "koyu" temaları tanımlayan renk tokenleri.

Tema oluşturma

Genişletilebilirlik için, temalar klasörler halinde düzenlenir. Tek bir klasör çoğu amaç için yeterli olabilir, ancak isterseniz temaları "renkler" veya "yazı tipleri" gibi klasörlerde düzenleyebilirsiniz.

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

   1. Stil Editörü'nün sol sütununda Temalar üzerine gelin, ⊕'a tıklayın ve Yeni Tema'yı seçin.
   2. Yeni Klasör öğesini Genel olarak yeniden adlandırın.

   

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 tokenleri

Bir tema oluşturulduktan sonra, tokenlerini çeşitli UI nesne özelliklerine bağlayabilirsiniz; örneğin, bir TextButton'ın BackgroundColor3 özelliği. Tema sayfaları, doğru çalışması için ortak bir token seti kullanmalıdır.

TemaA Stil Editörü'nün sol sütununda seçili iken:

1. Daha önce oluşturulmuş üç stil tokenini üç yeni tema tokenine bağlayın:

   Tema Tokeni	Stil Tokeni
   ArkaPlanRengi	$Altın
   ButonYazıTipi	$Oswald
   ButonMetinBoyutu	$Text32

   1. Ana panelde Bir Token Ekle… butonuna tıklayın ve tema tokeninin adını girin.
   2. Değer alanında görünen $'ye tıklayın ve ilişkili stil tokenini seçin.

   

2. Stil Editörü'nün sol sütununda, UI Öğeleri dalında TextButton'ı seçin.

   

3. Temanın tokenlerini üç yeni TextButton özelliğine bağlayın:

   Özellik	Tema Tokeni
   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 Tokeni Bağla'yı seçin.
   3. Değer alanında görünen $'ye tıklayın ve uygun tema tokenini seçin.

   

   Tema tokenlerini bağlarken, $[Token] in TemaA'yı üzerine geldiğinizde görün; bu, tokenin tema'dan geldiğini ve küresel token sayfasından (temanın zaten küresel tokenleri türettiğini unutmayın) gelmediğini bilmenizi sağlar.

   

Tema çoğaltma

Bir temayı genel olarak oluşturduktan sonra, onu çoğaltabilir ve çeşitli tokenleri değiştirerek benzersiz bir tema stili tanımlayabilirsiniz.

1. Stil Editörü'nün sol sütununda TemaA temasının üzerine gelin, ⋮ butonuna tıklayın ve Çoğalt'ı seçin.

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

   

3. Temanın iki tokenini iki farklı stil tokenine bağlayın:

   Tema Tokeni	Stil Tokeni
   ArkaPlanRengi	$Macenta
   ButonMetinBoyutu	$Text24

   1. Özelliğin değer alanının sağında, ⋮ butonuna tıklayın ve Tokeni Bağlantısını Kes'i seçin.
   2. ⋮'ye tekrar tıklayın ve Tokeni Bağla'yı seçin.
   3. Değer alanında $'ye tıklayın ve yeni ilişkili stil tokenini seçin.

   

Tema değiştirme

Birden fazla tema oluşturduktan sonra, bunları tema klasörü aracılığıyla veya SetDerives()'de açıklandığı gibi bir betik aracılığıyla değiştirebilirsiniz.

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

2. Ana panelde, radyo düğmelerini kullanarak temalar arasında geçiş yapın.

   TemaATemaB