UI görünüm değiştiricileri

Görünüm değiştiricilerini kullanarak GuiObjects'ın görünümünü daha da özelleştirebilirsiniz.

• Bir nesnenin arka planına bir gradyan uygulayın.
• Metin veya bir kenarlığa bir çizgi uygulayın.
• Bir nesne için yuvarlak köşeler ayarlayın.
• Bir nesnenin kenarları arasındaki padding miktarını artırın.
• Bir nesnenin arkasına bir gölge ekleyin.

Gradyan

UIGradient nesnesi, üst nesnesi GuiObject'a bir renk ve opasite gradyanı uygular.

Gradyanı yapılandırmak için:

• Gradyanın Color özelliğindeki ColorSequence aracılığıyla renklerini ayarlayın.
• Gradyanın Transparency özelliğindeki NumberSequence aracılığıyla şeffaflığını ayarlayın.
• Gradyanın tipini Type özelliği aracılığıyla seçin.
• Gradyanın başlangıç noktasını (üst nesnenin sınırları içinde veya dışında) Offset özelliği aracılığıyla seçin.
• Gradyanın açısını Rotation özelliği aracılığıyla seçin.
• Gradyanın ölçeğini Scale özelliği aracılığıyla seçin.
• Gradyanın kenar örnekleme davranışını TileMode özelliği aracılığıyla seçin.

Renk dizisi

Bir gradyanın renk dizisini ayarlamak için:

1. Explorer penceresinde UIGradient'i seçin.

2. Properties penceresinde, Color özellik alanına tıklayın, ardından giriş kutusunun sağındaki ⋯ butonuna tıklayın.

   

3. Renk dizisinin alt eksenindeki her üçgen bir anahtar noktasıdır ve o noktadaki renk değerini belirler.

   

   1. Renk dizisindeki bir anahtar noktasına tıklayarak onu seçebilir veya yeniden konumlandırabilirsiniz veya grafikte herhangi bir yere tıklayarak başka bir anahtar noktası ekleyebilirsiniz.
   2. Renk yanındaki küçük kareye tıklayarak Renkler açılır penceresini açın, ardından anahtar noktası için istenen rengi seçin.
   3. Gerekirse, grafikteki renkleri eklemek/ayarlamak için bu adımları tekrarlayın.

Şeffaflık

Bir gradyanın şeffaflığını aralığında ayarlamak için:

1. Explorer penceresinde UIGradient'i seçin.

2. Properties penceresinde, Transparency özellik alanına tıklayın, ardından giriş kutusunun sağındaki ⋯ butonuna tıklayın.

   

3. Sayı dizisi grafiğindeki her kare bir anahtar noktasıdır ve o noktadaki şeffaflık değerini belirler.

   

   1. Sayı dizisindeki bir anahtar noktasına tıklayarak onu seçebilir veya yeniden konumlandırabilirsiniz veya grafikte herhangi bir yere tıklayarak başka bir anahtar noktası ekleyebilirsiniz.
   2. Zaman ve Değer girişleri aracılığıyla belirli bir zaman/değer kombinasyonu girin.
   3. Gerekirse, grafikteki şeffaflık seviyelerini eklemek/ayarlamak için bu adımları tekrarlayın.

Tip

Bir gradyanın Type özelliği, Linear, Radial, Elliptical veya Conical arasından tipini ayarlar.

• Linear — Renk/şeffaflık dizisi, öğe boyunca düz bir çizgide geçiş yapar. Yön, dönüş ile kontrol edilir ve konum, ofset ile kontrol edilir. Bu varsayılandır.

• Radial — Renk/şeffaflık dizisi, öğenin merkezinden dışa doğru yayılır, isteğe bağlı olarak Offset ile kaydırılabilir. Yarıçap, öğenin genişliği ve yüksekliğinin ortalaması ikiye bölünerek tanımlanır, bu da etkili bir şekilde $\text{(genişlik+yükseklik)/4}$ olur. Rotation bir radial gradyan üzerinde etkili değildir.

• Elliptical — Renk/şeffaflık dizisi, öğenin merkezinden bir elips şeklinde dışa doğru yayılır, isteğe bağlı olarak Offset ile kaydırılabilir. Elipsin yatay ve dikey yarıçapları, öğenin genişliğinin ve yüksekliğinin yarısıdır, böylece elips öğenin sınırlarına uyar. Rotation elipsin eksenlerini döndürür.

• Conical — Renk/şeffaflık dizisi, öğenin merkezinin etrafında saat yönünde döner, isteğe bağlı olarak Offset ile kaydırılabilir. Rotation, döngünün başlangıç ve bitiş açısını kontrol eder. Varsayılan olarak bu, 0 ile 360 derece arasında döner, ancak Scale değerleri 1'den küçükse bu açıyı azaltabilir.

Ofset ve dönüş

Offset ve Rotation özellikleri, gradyanın kontrol noktalarını ve açısını ayarlamanıza olanak tanır. Aşağıdaki diyagramlarda gösterildiği gibi, Offset, üst nesnenin genişliğinin veya yüksekliğinin yüzdesine dayanır ve hem pozitif hem de negatif değerler geçerlidir.

Benzer şekilde, gradyanı döndürdüğünüzde, kontrol noktaları da döner:

Ölçek

Bir gradyanın Scale özelliği, gradyanın kapsamını çarparak, renk/şeffaflık dizisinin öğe içinde ne kadar görünür olduğunu kontrol eder.

• Scale 1'den küçük olduğunda, gradyan tam kapsamın altında kalır. Kalan renk/şeffaflık, TileMode özelliğine göre doldurulur.

• Scale 1'den büyük olduğunda, gradyan tam kapsamın üzerinde uzanır ve yalnızca bir kısmı renk/şeffaflık görünür.

• Elliptical gradyanları için, Scale elipsin her iki yarıçapını etkiler.

Karo Modu

TileMode özelliği, gradyanın tam dizisinin üst nesneye tam olarak kaplamadığı durumlarda nasıl tekrar edeceğini ayarlar.

• Clamp — Varsayılan mod, dizinin başlangıç ve bitişindeki renk/şeffaflık değerlerinin sonsuz bir şekilde uzandığı, böylece başlangıç değerlerinin gradyandan önceki alanı doldurduğu ve bitiş değerlerinin gradyandan sonraki alanı doldurduğu moddur.

• Repeat — Gradyan, renk/şeffaflık dizisi karolarını başlangıçtan sona doğru sorunsuz bir şekilde sararak tekrar eder. Bu, dizideki ilk ve son renk/şeffaflık değerleri farklıysa görünür bir dikiş üretebilir.

• Mirror — Gradyan, her sınırda yansır, böylece renk/şeffaflık dizisi ping-pong yapar. Bu, her karo kenarında yönün tersine döndüğü için dikiş olmadan pürüzsüz bir tekrar üretir.

Çizgi

UIStroke örneği, metin veya bir kenarlığa bir dış hat uygular. Anahtar özellikler şunlardır:

• Çizgi dış hat renginin renk ve kalınlığının ayarlanabilirliği.
• Çizgi şeffaflığını üst nesnenin şeffaflığından bağımsız olarak ayarlama yeteneği.
• Üst nesnenin kenarına göre konum ve/veya ofset ayarlama.
• Üç köşe stili (yuvarlak, kesik veya miter).
• UIGradient örneği aracılığıyla çizgi gradyanı desteği.

Kalınlık

Çizgi genişliğini, Thickness özelliği aracılığıyla ayarlayabilirsiniz; bu özellik piksel cinsinden ölçülür (varsayılan) veya üst nesneye göre ölçeklendirilir, bu, değiştiricinin StrokeSizingMode özelliğine bağlıdır. Çizgi metin üzerindeyse ve StrokeSizingMode ScaledSize olarak ayarlandıysa, kalınlık yazı tipi boyutuna göre ayarlanır.

Renk veya gradyan

Çizgi rengini Color özelliği aracılığıyla ayarlayabilir ve ayrıca gradyan çizgileri oluşturmak için bir çocuk UIGradient örneği ekleyebilirsiniz.

Metin dış hat veya kenarlık

UIStroke, üst nesne türüne bağlı olarak ya bir metin dış hat ya da bir kenarlık olarak çalışır. UIStroke'ı TextLabel gibi bir metin nesnesine ebeveyn olarak ayarladığınızda, metnin dış hatlarına uygulanır; UIStroke'ı diğer GuiObjects'a ebeveyn olarak ayarladığınızda, kenarlığa uygulanır.

Bir metin nesnesine uygulandığında, ApplyStrokeMode özelliği ile varsayılan çizgi davranışını geçersiz kılabilirsiniz; bu, çizgiyi nesnenin sınırlarına uygulamanıza olanak tanır. Ayrıca, bir metin nesnesine iki UIStroke örneği ebeveyn olarak ayarlayarak metin dış hatlarını ve kenarlıklarını bağımsız olarak kontrol edebilirsiniz; biri Bağlamsal ve diğeri Kenar olarak ayarlanabilir.

Kenar konumu/ofset

BorderStrokePosition, çizginin üst nesnesinin kenarına göre konumunu ayarlar ve BorderOffset, çizginin konumuna ek bir ofset belirtmenize olanak tanır.

Şeffaflık

Transparency özelliği, üst nesne nesnesinin BackgroundTransparency veya TextTransparency'sinden bağımsız olarak çizgi şeffaflığını ayarlar. Bu, yalnızca bir dış hat içeren "boş" metin ve kenarlıklar oluşturmanıza olanak tanır.

Köşe stili

LineJoinMode özelliği, köşelerin nasıl yorumlandığını kontrol etmenizi sağlar. Round, Bevel veya Miter değerlerinden birini kabul eder.

Katmanlama

Bir GuiObject üzerindeki birden fazla kardeş UIStroke örneğini önceden arka plana katmanlamak için, ZIndex özelliğini kullanabilirsiniz. Daha düşük ZIndex değerine sahip olanlar, daha yüksek ZIndex değerine sahip olanların altında (arkasında) render edilir.

Aynı ZIndex değerine sahip UIStroke örneklerinin render sırası belirsizdir. Render sırasının önemli olduğu durumlarda aynı indekse sahip birden fazla UIStroke örneği uygulamayın.

Köşeler

UICorner örneği, üst nesnesi GuiObject'ın köşelerine deformasyon uygular. Uygulanan yarıçapı, CornerRadius özelliği aracılığıyla Scale veya Offset kullanarak kontrol edebilirsiniz.

Scale, köşeleri üst nesnenin en kısa kenarının toplam uzunluğuna dayalı bir yüzde olarak yuvarlar; bu, 0.5 veya daha yüksek bir ölçekle üst nesneyi "hap" şekline dönüştürür, genişliği veya yüksekliği ne olursa olsun. Offset, köşeleri belirli bir piksel sayısına yuvarlar, üst nesnenin genişliği/yüksekliği ne olursa olsun.

Ayrıca TopLeftRadius, TopRightRadius, BottomRightRadius ve BottomLeftRadius özellikleri aracılığıyla bireysel köşeleri kontrol edebilirsiniz.

Padding

Bir UIPadding nesnesi, üst nesne GuiObject'ın içeriğine üst, alt, sol ve/veya sağ padding uygular. Örneğin, bir metin etiketinin içindeki metni aşağı veya yukarı taşımak için değiştiricinin PaddingBottom özelliğine bir ofset uygulayabilirsiniz.

Gölge

Bir UIShadow nesnesi, üst UI örneği için bir gölge oluşturur. Bir gölge, üst nesnenin dikdörtgen şekline veya bir metin nesnesinin gliflerine uyum sağlayabilir. Şekil gölgeleri, üst nesnenin dışına veya içine görünebilir ve üst nesnenin hemen arkasındaki alanı maskeleyebilir. Hem şekil hem de metin gölgeleri bir renk gradyanı kullanabilir.

Eğer üst nesne bir UICorner veya sıfırdan büyük bir GuiObject.Rotation'a sahipse, şekil gölgesi aynı köşeleri veya döngüyü takip eder. UIShadow, Path2D veya dokuları desteklemez.

Şekil ve metin gölgeleri

Mode özelliği, gölgeyi neyin oluşturduğunu belirler ve her iki mod da aynı üst nesne altında bir arada bulunabilir.

• Shape varsayılandır. Gölge, herhangi bir GuiObject'ın dikdörtgen alanını takip eder.
• Text, bir TextLabel, TextButton veya TextBox'ın metin gliflerini takip eder. Diğer UI nesneleri bu modda gölge oluşturmaz.

Spread, Inset ve ShowBehindParent özellikleri, metin modunda etkili değildir.

Bulanıklık

BlurRadius özelliği, gölgenin bulanıklığını belirler. Daha büyük bir değer, gölgenin kenarlarının daha yumuşak görünmesini sağlar. Bu UDim özelliğinin ölçek faktörünün, üst nesnenin genişliğine veya yüksekliğine, hangisi daha kısa ise, göre olduğunu unutmayın.

Renk ve şeffaflık

Color özelliği, gölgenin rengini belirlerken, Transparency özelliği gölgenin şeffaflığını ayarlar; 0 tamamen opak ve 1 tamamen şeffafdır.

Çok renkli bir gölge için, UIShadow'ın bir çocuğu olarak bir UIGradient ekleyin. Gradyan, üst nesnenin dolgusunu değiştirmeden gölgeyi etkiler.

Ofset ve yayılma

Offset özelliği, gölgeyi üst nesnenin konumuna göre hareket ettirirken, Spread gölgeyi üst nesnenin boyutuna göre genişletir veya daraltır.

İç gölgeler

Inset değerini true olarak ayarlayarak gölgeyi üst nesnenin arkasında değil, üst nesnenin üzerine ve içine render edebilirsiniz. Pozitif Spread değerleri, iç gölgeyi üst nesnenin merkezine doğru genişletir.

Şeffaf üst nesne arkasındaki içeriği açığa çıkarma

Varsayılan olarak, ShowBehindParent değeri true'dur, bu nedenle tüm şekil gölgesi render edilir; bu, üst nesnenin hemen arkasındaki kısmı da içerir. Bu değeri false olarak ayarlarsanız, gölgenin o kısmını maskeleyebilirsiniz. Bu, gölgenin şeffaf bir üst nesne aracılığıyla görünen içeriği karartmasını önler.

Bu özellik, iç veya metin gölgeleri üzerinde etkili değildir.

Gölge katmanlama

Aynı üst nesneye birden fazla UIShadow örneği ekleyerek etkileri birleştirebilirsiniz. ZIndex özelliği, render sıralarını kontrol eder. Daha düşük değerlere sahip gölgeler, daha yüksek değerlere sahip gölgelerin arkasında render edilir.

Aynı ZIndex değerine sahip gölgelerin render sırası belirsizdir. Sıralarının önemli olduğu durumlarda her kardeş gölgeye farklı bir değer atayın.