Stil Editörü

Yerleşik Tarz Editörü , Roblox deneyimleri için UI stilleri oluşturmanızı, yönetmenizi ve uygulamanızı sağlayan geniş bir araçtır, çünkü jetonlar , tasarım sayfaları , stil kuralları ve temalar kombinasyonuyla UI stilleri oluşturabilirsiniz.

Stil Editörüne UI sekmesi aracılığıyla erişin (görünmüyorsa, Ana Sayfa sekmesinden erişin).

Açıldıktan sonra, Tasarım Oluştur düğmesine tıklayarak bir temel stil seti oluşturun.

Stil jetonları

Stil jetonları , bir jetonun öznitelikleri aracılığıyla tanımlanmış, stiller ve bileşenler arasında kullanılabilecek UI özellik değişkenlerini temsil eder; örneğin, bir , ve için ortak bir renk olabilir.Jetonlar CSS değişkenlerine benzerdir.

1. Yeni bir jeton stil sayfası oluştur:

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

   

2. Yeni jeton sayfası seçildiğinde, ana panelde Bir jeton ekleyin… tıklayarak birkaç jeton oluşturun.Bu jetonlar, hem kurallar hem de konular için bu rehber boyunca kullanılacaktır.

   Jeton Adı	Tür	Değer
   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	sayı	24
   Text32	sayı	32

   

Taslaklar tasarım sayfaları

Bir tasarım stili sayfası, still kuralları ve UI örneklerine stil özellikleri uygulamak için DataModel ağaçlara bağlanabilir.Verilen bir ağaca yalnızca bir StyleSheet uygulanabilir, ancak UI'nizde ilgili stilleri değiştirmek için temaları kullanabilirsiniz, bu rehberde daha sonra ele alınan bir konsept. Biçim Çizidi adlı önceden doldurulmuş bir tasarım sayfası, Tasarım Oluşturma düğmesi aracılığıyla oluşturulur.Genel UI nesneleri için sınıf kuralları içerir, örneğin Frame ve TextLabel .Ayrıca, kullanım için özel stil yapılandırmalarınızda kullanılan temel stil sayfasından StyleDerivejetonları ve stilleri miras alan iki örnek içerir.

Bir taslak sayfasına sahip olduktan sonra, stil editörü ile kullanmak için bir test ekranda konteyner oluşturabilir veya istenirse deneyim içinde bir konteyner oluşturabilirsiniz.

1. Araştırmacı üzerinde gezinin ve bir ekleyin .

2. Yeni bir StyleLink örneğinin ScreenGui özellik setiyle StyleSheet stil sayfasına gönderildiğinden emin olun, StyleSheet tasarım sayfasına ayarlanmış.

   

   

   oluşturulmazsa, Style Editor'un sol sütunundaki Stil Şablonu ve Gezgini seçerek hızlı bir şekilde bir tane oluşturabilirsiniz.Sonra, editörün ana panelinin sağ üst bölümündeki Stil Bağlantısını Ekleyin düğmesine tıklayın.

Stil kuralları

Stil kuralları , kuralın Selector tanımına uyan her duruma uygulanır ve sınıf adı, instans etiketi ve hiyerarşi ilişkileri gibi özelliklere eşleşir.Yüksek düzeyde, bir kuralın Selector tanımı aracılığıyla instans eşleştirme ve değiştirme işlemleri şunun aracılığıyla gerçekleşir:

• Örneğin örneğin bir UI sınıfının tüm örneklerini hedef alan Roblox Frame seçicileri, örneğin ImageLabel , TextButton , vs.
• Belirli UI nesnelerini hedef alan örnek etiketli seçiciler aracılığıyla aracılığıyla etiketlenmiş çalışma alanı seçicileri.
• Örnek modifiye edicileri hayalet aracılığıyla uygulandı veya gibi .
• GuiObjectdurum seçenekleri, dört Enum.GuiState enum değerden birine karşılık gelir, örneğin Hover .
• UI nesnesinin değerine göre durum adı seçimi Instance.Name .

Sınıf kuralı

Bir stil sınıfı seçici, belirli bir UI sınıfının tüm örneklerini hedefler.Aşağıdaki kural kurulum stilleri tüm Frames bir standart arka plan rengi ve boyutuyla düzenler.

1. Stil Editörünün sol sütununda, Çerçeve UI Elemanları dalında seçin.

   

2. Daha önce oluşturulmuş iki stil jetonunu iki Frame ile bağlayın:

   Özellik	Stil Jetonu
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Ana panelde Bir özellik ekleyin… seçeneğine tıklayın ve gerekli özelliği seçin.Düşen menüde daha hızlı özellik bulmak için anahtar kelimeler yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ düğmesine tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında görünen $ ye tıklayın ve doğru ilişkili jetonu seçin.

   
   

   

3. Daha önce oluşturup bağlantı kurduğunuz yeni bir 'yi girin. Tanımladığınız stiller otomatik olarak ona uygulanmalıdır.

   

Etiket kuralı

İstisna etiketi özel UI nesnelerini hedef alır etiketlendi aracılığıyla CollectionService .Aşağıdaki kural kurulum stilleri, özel bir arka plan rengi, font ve metin boyutuyla etiketlenmiş bir TextButton etiketiyle ButtonPrimary etiketi oluşturur.

1. Stil Editörünün sol sütununda, Stil Çizelgesi sayfasının üzerine gezinebilir, ⋮ düğmesine tıklayabilir ve Yeni > Etiket > sürükleyerek gezinin.

   

2. Yeni etiket kuralını yeniden adlandır .ButtonPrimary (öncü . not et).

   

3. Daha önce oluşturulmuş üç stil jetonunu üç TextButton ile bağlayın:

   Özellik	Stil Jetonu
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. Ana panelde Bir özellik ekleyin… seçeneğine tıklayın ve gerekli özelliği seçin.Düşen menüde daha hızlı özellik bulmak için anahtar kelimeler yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ düğmesine tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında görünen $ ye tıklayın ve doğru ilişkili jetonu seçin.

   
   

   

4. Daha önce Class.TextButton``Class.ScreenGui yeni bir ve etiketiniButtonPrimary.Uygun bir kısayol şöyledir:

   1. Yeni TextButton 'nin Gezgine seçildiğinden emin olun.
   2. Stil Editörünün sol sütununda seçilen .ButtonPrimary etiketi kuralı ile, ana panelde Etiket uygula tıklayın.Tanımladığınız stiller otomatik olarak düğmeye uygulanmalıdır.

   
   

   

Arayüz değiştirici

Örnek değiştirici seçicileri, UICorner veya UIStroke gibi bir nesneyi daha da stilize etmek için hayalet UIComponents uygular.Aşağıdaki kural düzenleme stilleri, özel bir metin boyutu ve yuvarlak köşelerle bir TextLabel oluşturur.

1. Stil Editörünün sol sütununda, Metin Etiketi UI Elemanları dalında seçin.

   

2. Daha önce oluşturulmuş bir stil jetonu ile TextSize arasında bağlantı kurun:

   1. Ana panelde Bir özellik ekleyin… seçeneğine tıklayın ve TextSize özelliğini seçin.Düşen menüde daha hızlı özellik bulmak için anahtar kelimeler yazabileceğinizi unutmayın.
   2. Statik bir değer girmek yerine, ⋮ düğmesine tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında görünen $ düğmesine tıklayın ve $Text32 jetonunu seçin.

   
   

   

Yuvarlak kenarları diğer elemanlara uygulamak ve yapılandırmak için bir palsuz örnek gereklidir. Bir tane oluşturmak için:

1. Sol sütunda, MetinEtiketi üzerine gelin, ⋮ düğmesine tıklayın ve Yeni > PseudoInstans > UICorner 'a gezinin.

   

   Yeni bir UICorner simülasyon örneği soldaki TextLabel elemanının altında görünür.

   

2. Sol sütunda yeni UICorner örneği seçilerek, daha önce oluşturulmuş bir stil jetonu ile CornerRadius arasında bir bağlantı kurun:

   1. Ana panelde Bir özellik ekleyin… seçeneğine tıklayın ve CornerRadius özelliğini seçin.
   2. Statik bir değer girmek yerine, ⋮ düğmesine tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında görünen $ düğmesine tıklayın ve $Rad20 jetonunu seçin.

   

3. Daha önce oluşturup bağlantı kurduğunuz yeni bir 'yi girin. Tanımladığınız stiller otomatik olarak ona uygulanmalıdır.

   

Devlet kuralı

GuiObject durum seçicileri, örneğin Hover , etkileşimli durumlar için stil değişikliklerini otomatik olarak yapılandırmaya izin veren dört GuiState enum değerden birine karşılık gelir.Aşağıdaki kural yapılandırması, tüm ImageButtons için -4 derece dönüş süresi olan bir gezinti durumu oluşturur.

1. Stil Editörünün sol sütununda, Görüntü Düğmesi UI Elemanları dalında seçin.

   

2. ⋮ düğmesine tıklayın ve Yeni > GuiState > Hover 'a gezinin.

   

   Yeni bir Hover durum değiştirici örneği, sol sütunda Resim Düğmesi elemanının altında görünür.

   

3. Sol sütunda yeni seçilen Hover modifiye edici ile, ana panelde Bir özellik ekleyin… seçin ve Rotation.Düşen menüde daha hızlı özellik bulmak için anahtar kelimeler yazabileceğinizi unutmayın.

4. Özellik değer alanına -4 girin.

   

5. Daha önce oluşturup bağlantı kurduğunuz Class.ScreenGui``Class.ImageButton ı ekleyin ve önceki oluşturulmuş ve bağlantı kurulmuş .Görüntü alanındaki düğmeye tıkladığınızda, 4 derece saat yönünde dönmelidir.

   

Stil temaları

Tarz temaları bir "ışık" ve "karanlık" tema tanımlayan belirli jeton setlerinden oluşur, örneğin bir "ışık" ve "karanlık" tema tanımlayan renk jetonları.

Tema oluşturma

Genişletilebilirlik için, temalar klasörlere düzenlenir.Tek bir klis yeterli olsa da, istendiğinde "renkler" veya "fontlar" gibi klasörlerde temaları düzenleme özgürsünüz.

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

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

   

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

   1. Yeni Genel klasörün üzerine gelin, ⋮ düğmesine tıklayın ve Yeni Temalı Stil Şablonu seçin.
   2. Adını TemaA olarak değiştirin.

   

Tema jetonları

Bir tema oluşturulduktan sonra, onun jetonlarını bir BackgroundColor3 'in çeşitli UI nesne özelliklerine bağlayabilirsiniz, örneğin bir TextButton.Tema sayfaları doğru çalışmak için ortak bir dizi jeton kullanmalıdır.

Stil Editörünün sol sütununda TematA seçilerek:

1. Daha önce oluşturulmuş üç tarz jetonunu üç yeni tema jetonuna bağlayın:

   Temalı Jeton	Stil Jetonu
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. Ana panelde Bir Jeton Ekle… düğmesine tıklayın ve tema jetonunun adını girin.
   2. Değer alanında görünen $ ye tıklayın ve ilişkili stil jetonunu seçin.

   

2. Stil Editörünün sol sütununda, Metin Düğmesi UI Elemanları dalında seçin.

   

3. Temanın jetonlarını üç yeni TextButton özellik ile bağlayın:

   Özellik	Temalı Jeton
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. Ana panelde Bir özellik ekleyin… seçeneğine tıklayın ve gerekli özelliği seçin.
   2. Statik bir değer girmek yerine, ⋮ düğmesine tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında görünen $ ye tıklayın ve doğru tema jetonunu seçin.

   
   

   Tema tokenlerini bağlarken, "[Token] in ThemeA üzerinde gezinerek tokenin temadan geldiğini ve küresel token sayfasından gelmediğini bilmek için temadan geldiğini anlayın ve küresel token sayfasından gelmediğini (temanın zaten küresel tokenları derlediğini) hatırlayın (temanın zaten küresel tokenları derlediğini unutmayın).

   

Tema yinelenmesi

Genel bir temaya sahip olduktan sonra, bunu kopyalayabilir ve çeşitli jetonları benzersiz bir tema stili tanımlamak için değiştirebilirsiniz.

1. Stil Editörünün sol sütununda, TematA temasının üzerine gelin, ⋮ düğmesine tıklayın ve Aynılaştırma seçin.

2. Kopyalanmış temayı TematB olarak yeniden adlandırın.

   

3. Temanın jetonlarından ikisini iki farklı stil jetonuna bağla:

   Temalı Jeton	Stil Jetonu
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. Mülkün değer alanının sağında, ⋮ düğmesine tıklayın ve Bağlantıyı Kes Tokeni seçin.
   2. Tekrar ⋮ tıklayın ve Bağlantı Jetonu seçin.
   3. Değer alanında, $ 'ye tıklayın ve yeni ilişkili stil jetonunu seçin.

   

Tema değiştirme

Bir kez çok sayıda temaya sahip olduğunuzda, temanın klasörü aracılığıyla veya SetDerives() 'de belirtilen bir senaryo aracılığıyla aralarında değiştirebilirsiniz.

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

2. Ana panelde, radyo düğmelerini kullanarak temalar arasında değiştirin.

   KonuATemaB