Birlikte öğreniyoruz...

Bu dersimizde Unity UI (User interface) yani arayüz sistemini detaylı bir şekilde inceleyeceğiz. Genellikle arayüz tasarımı denince ilk akla gelen oyunlar için kullanılan menü tasarımları olmaktadır. Tabi menü tasarımları arayüz sistemi için demirbaşlardan biri ama buna ek olarak oyun sırasında ekranda gözüken can barı, mermi sayısı, diyalog pencereleri, haritalar gibi benzeri tüm öğelerde Unity UI sayesinde gerçekleştirilmektedir.

Eğer oyununuzun menü tasarımları kötü olursa ya da sahnede yer alan Unity UI bileşenleri kaliteli durmazsa, ilk izlenim olarak kötü bir imaj oluşturacaktır. Yani ilk giriş ekranın da kötü bir tasarımı olan bir oyuna ister istemez ön yargılı olunacaktır. Hatta belki potansiyel oyuncuları kaybetmenize sebep olabilir.

Dersimizde tüm Unity UI bileşenlerini detaylı bir şekilde inceleyerek nasıl oluşturulacaklarını, çalışma mantıklarını ve tüm ayarlarına değinmeye çalışacağız.

Hadi o zaman başlayalım…

Unity Canvas Bileşenleri

Unity UI elemanlarını kullanabilmemiz için Unity Canvas(Tuval) objesi kullanmamız gerekmektedir. Yani oyunumuzun sahnesine yazı, resim ya da buton benzeri bir elemanları eklemek için bir Canvas objesinin alt elemanı olması gerekmektedir.

Unity UI Canvas Objesi
Unity UI Canvas Objesi

Biz sahnemize herhangi bir Unity UI bileşeni eklersek yani bir text öğresi eklersek, otomatik olarak Canvas objesi oluşturacak ve text UI bileşenini canvas objesinin alt objesi olarak ekleyecektir.

Tabi manuel olarak da bir canvas objesi ekleyebilirsiniz. “Hierarchy” menüsünde “Sağ Tık / UI / Canvas” yolunu takip ederek yeni bir Canvas objesi ekleyebilirsiniz.

Unity Canvas Objesi
Unity Canvas

Sahnemize canvas objemizi ekledikten sonra sınırları görebilmemiz için yukarıdaki gibi sahnemizi “2D” olarak değiştireceğiz. Sonrasında ise “Inspector” alanına bakarsanız otomatik olarak “Canvas” ile ilgili bazı bileşenlerin eklendiğini görebilirsiniz. Şimdi bu ayarları biraz inceleyelim.

Canvas Bileşeni

Canvas objesinin ekranda nasıl görüntüleneceğinin belirlendiği “Render Mode” ve alt seçeneklerinin bulunduğu bölümdür.

Render Mode

Canvas elemanının nasıl işleneceğinin yani kullanıcının arayüzünde nasıl görüneceğinin belirlendiği kısımdır. “Screen Space – Overlay”, “Screen Space – Camera” ve “World Space” olarak üç farklı işleme türü bulunmaktadır.

Screen Space – Overlay

Screen Space - Overlay Ayarları
Screen Space – Overlay Ayarları

Varsayılan olarak gelen seçenek “Screen Space – Overlay” ile sahnenin en üstünde ekrana otomatik olarak konumlanmaktadır. Sahnenin boyutunda ya da çözünürlüğünde değişiklik gerçekleştirilse de otomatik olarak boyutlanacaktır.

Sahnede yer alan tüm objelerin üstünde yer alır.

Pixel Perfect: Kullanıcı arayüzünde hassasiyetli kenar yumuşatmaları için geçerli olan bir ayardır.

Short Order: Eğer ekranda birden fazla canvas objesi bulunuyorsa aralarında sıralama yapmak için yani hangisinin önce gösterileceğini belirlemek için kullanılan ayardır.

Target Display: Canvas objesinin hangi kamera açısında görüntüleneceğinin belirlendiği kısımdır.

Şöyle düşünebilirsiniz. Örneğin bir araba yarışı oyununuz var ve arabanın içinden sürüş ya da arabanın üst açısından sürüş gibi birden fazla kamera açınız bulunuyor. Bu gibi durumlarda Canvas objesinin hangi kamera açısında bulunacağını seçebiliyoruz.

Screen Space – Camera

Screen Space - Camera Ayarları
Screen Space – Camera Ayarları

“Screen Space – Camera” seçeneği tercih edildiğinde canvas boyutu otomatik olarak kamera boyutlarıyla aynı olacaktır. Kameranın çözünürlüğü değiştirilirse ya da oyun içinde açısı değiştirilirse, canvas otomatik olarak boyutlanacaktır.

Eğer sahnede yer alan diğer 3D objeler, “Plane Distance” ayarından daha önde konumlandırılırlarsa canvas yapısının önüne geçebilirler.

Pixel Perfect: Kullanıcı arayüzünde hassasiyetli kenar yumuşatmaları için geçerli olan bir ayardır.

Render Camera: “Screen Space – Camera” ayarının çalışabilmesi için ” kullanacağınız kameranın atamasının yapıldığı kısımdır.

Plane Distance: Kamera ve canvas arasındaki mesafenin belirlendiği ayardır.

World Space

World Space Ayarları
World Space Ayarları

“World Space” ayarıyla, canvas alanını istediğiniz gibi boyutlandırabilirsiniz. Bu sayede canvas, sahnede yer alan diğer objeler gibi davranacak ve 3D olarak yerleşim pozisyonuna göre diğer objelerin önünde ya da arkasında konumlandırılabilecektir.

Ayrıca “Rench Transform” seçenekleri sadece “World Space” seçeneğinde pasif durumdan çıkacaktır.

Sahneye eklenen tüm objelerde “Transform” bileşeni otomatik olarak eklenmekteydi. Fakat Unity UI elemanlarında artık “Rect Transform” olarak geçmektedir.

Canvas Scaler

Canvas üzerinde yer alan Unity UI bileşenlerinin boyutunu kontrol etmek için kullanılan ayarlar Canvas Scaller bölümünden gerçekleştirilir. Canvas Scaller üzerinden yapılan değişikliklere canvas içerisinde yer alan tüm bileşenler etkilenmektedir.

Örneğin bir ekran boyutu için canvas hazırladınız ve içerisine öğelerinizi eklediniz. Fakat sonrasında hazırladığınız ekran boyutundan daha küçük ya da büyük bir çözünürlükte oyununuz açıldığı zaman, öğelerinizin bazıları ekranın dışında kalarak gözükmeyecek ya da istediğinizden küçük gözükecektir.

Bu gibi durumların önüne geçebilmek için “Canvas Scaler” bölümünü iyi yapılandırmamız gerekiyor

UI Scale Mode

Canvas ve UI öğelerinin ekrana boyutuna göre nasıl ayarlayacağımızı belirlediğimiz en önemli bölümdür. “Constant Pixel Size“, “Scale With Screen Size” ve “Constant Physical Size” şeklinde üç ana seçenek bulunmaktadır.

Constant Pixel Size

Constant Pixel Size Ayarı
Constant Pixel Size Ayarı

Canvas içerisine eklediğimiz elemanların ekran boyutunun bağımsız olarak pixel olarak boyutlarını orantılayan seçenektir.

Scale Factor: Canvas içerisinde yer alan UI objelerini ölçeklendirmek için kullanılan ayardır.

Scale With Screen Size

Scale With Screen Size Ayarı
Scale With Screen Size Ayarı

Hazırlanan canvas ve içindeki UI öğeleri, cihazın boyutuna göre otomatik olarak ölçeklendirilmesi için kullanılan ayardır.

Hazırladığınız yapıya göre farklı seçenekleri kullanabiliyorsunuz fakat aktif olarak kullanılan ve en mantıklı seçenek “Scale With Screen Size” seçeneğidir.

Reference Resolution: Ekranınız için referans bir çözünürlüğün belirtilmesini sağladığınız seçenektir. Bu alandan belirtilen boyutlardan daha büyük ya da daha küçük bir cihaz ile oyununuz açılırsa ekranı doğru orantılı olarak büyültecek ya da küçültecektir.

Screen Match Mode: Eğer yukarıdaki “Reference Resolution” ayarında belirtilen referans çözünürlüğünün en, boy oranı, cihaz çözünürlüğüne uymaması durumunda nasıl işlem yapılacağını belirlediğimiz kısımdır. Üç farklı işleme yöntemi bulunmaktadır.

  1. Match Width or Height: Canvas alanını, referans olarak belirtilen yatay veya dikey olan kısımlara göre biçimlendirmek için kullanılır. Eğer 0 olarak belirtilirse genişlik referans alınacak ya da 1 seçilirse yükseklik baz alınacaktır.
  2. Expand: Canvas alanını referans olarak belirtilen boyuttan küçük olmaması için yatay ya da dikey olarak genişletmek için kullanılan ayardır.
  3. Shrink: Canvas alanını referans olarak belirtilen boyuttan büyük olmaması için yatay ya da dikey olarak kırpması için kullanılan ayardır.

Reference Pixels Per Unit

Reference Pixels Per Unit Ayarı
Reference Pixels Per Unit Ayarı

Canvas içerisine eklediğimiz elemanların ekran boyutunun bağımsız olarak ilk belirtilen boyutlarında kalmasını için kullanılan seçenektir. Böylece ekran ne kadar küçülürse küçülsün ya da tam tersi büyültülse de ekran aynı boyutta kalacaktır.

İçerisinde yer alan DPI ayarlarına daha sonra detaylı şekilde inceleyeceğiz.

Graphic Raycaster

Graphic Raycaster ise canvas yapımızın içerisinde olan objeleri farklı objeler ile maskelememiz için kullanılan bölümdür.

Örneğin canvas içinde yer alan bir obje farklı bir objenin arkasında kaldığında canvas elemanı olarak herhangi bir etkileşime girmemesi için kullanılır.

Bu bölümde yer alan ayarları anlamak için bu yazı içerisinde değineceğimiz “Button” konusuna bakabilirsiniz.

Unity Canvas Elemanları

Unity UI Elemanları
Unity UI Elemanları

Canvas içerisine tasarımımızı yapabilmemiz için “Text”, “Image”, “Button”, “Toggle”, “Slider”, “Scrollbar”, “Dropdown” ve “Input” gibi bir çok alt eleman bulunmaktadır. Bu elemanlar ile menü yapımızı ya da oyun ekranındaki bilgi kısımlarını tasarlayarak kullanıcılara sunacağız.

Fakat bu öğeleri incelemeye başlamadan önce bilmemiz gereken ve atlamamız gereken bir kısım var. Biz her ne kadar canvas bileşeninin “Scale With Screen Size” ayarını seçerek, canvas boyutunun oyuncunun ekranıyla orantılı olarak değişmesini belirmiş olsak da canvas içerisine yer alan elemanların pozisyonlarını belirlenmesi önemlidir.

Canvas boyutunu, ekran boyutuna göre düzenlesek bile canvas içinde yer alan elemanlar ekran daraldıkça ya da genişledikçe canvas içinde kalmaya devam ederler fakat pozisyonlarında değişiklik gerçekleşebilir.

Örneğin oyundaki kalan can hakkını sağ üst köşeye sınır olacak şekilde koydunuz ama kullanıcının ekranı değiştiği için en üst köşeden aşağıya doğru kaydı ve başka bir görüntünün üzerine geldi.

İşte bu gibi durumlardan kaçmak için canvas içindeki elemanların konumlarını, bizim manuel olarak değilde “Rect Transform” üzerinde ayar üzerinden otomatik olarak yapmasını sağlamamız gerekiyor.

Unity UI Elamanlarını Konumlandırma Kısmı
Unity UI Elamanlarını Konumlandırma Kısmı

Bu durumun önüne geçmek için birazdan inceleyeceğimiz tüm elemanların “Rect Transform” alanında yer alan ve yukarıda görsel olarak belirtiğimiz kısımdan ayarlarını yapmamız gerekiyor.

UI Elemanı Pozisyon Ayarlama
UI Elemanı Pozisyon Ayarlama

Anchor Presets” kısmından canvas içinde yer alan objenin dikey ve yatay eksende canvas objesinin hangi kısmında yer alacağını belirleyebiliriz. “Shift” tuşuna basarak ekranda yer alacağı pivot pozisyonu görebilir ve “Alt” tuşuna basarak istediğimiz konuma geçmesini sağlayabiliriz.

İstediğimiz konuma geçmesi için “Alt” tuşuna bastıktan sonra aşağıdaki ekran gelecektir ve “Alt” tuşuna basılı olarak ilgili pozisyona tekrar tıklamamız yeterli olacaktır.

Alt Tuşuna Basınca Gelen Ekran
Alt Tuşuna Basınca Gelen Ekran

Ekranda gördüğünüz “Stretch” kısımlarıyla ekranda istediğimiz alanda kompla yayılması için kullanılan bir özelliktir.

Text Objesi

unity ui text ayarlari
Unity UI Text Ayarları

Text objesi ile kullanıcıya etkileşime giremeyen bir yazı oluşturur. Burada etkileşim diye bahsettiğimiz kısım kullanıcı tarafından müdahale edilemeyen sadece görünmesi için eklenen bir objedir.

Biraz Microsoft Word belki biraz da Photoshop gibi bir program kullandıysanız tüm ayarlar gördüğünüzde tanıyacaksınızdır. Fakat arada ilk defa göreceğiniz ayarlar olacaktır. O yüzden atlamadan bakmanızı tavsiye ederim.

Text: Ekranda gözükecek olan yazıyı girdiğimiz kısımdır.

Font Style: Yazı tipi için seçilecek olan font türünün belirlendiği kısımdır. İnternet üzerinden indirdiğimiz bir fontu ya da fontları “Assets” klasörüne attıktan sonra otomatik olarak bu alanda gözükecektir.

Fontlarınızın tamamen ücretsiz olmasına dikkat etmeyi unutmayın. Bazı fontlar için ücretsiz yazsa da oyunlarınızda yani ticari amaçlı kullanma izni olmayabilir.

Font Size: Yazı boyutunun belirlendiği alandır.

Line Spacing: Bir den fazla satır olan yazılarda satırlar arasındaki mesafenin belirlendiği alandır.

Rich Text Etkisi
Rich Text Etkisi

Rich Text: Bu seçenek “Text” alanına giriş yaparken HTML kodlarını kullanmamızı sağlar. Örneğin <i></i> gibi yazarak yazının bir kısmının italik yani yatay olmasını sağlayabiliriz.

Alignment: “Text” bileşeni içinde yer alan yazının sadece “Text” bileşeni içinde konumlandırılması için kullanılan kısımdır.

Align By Geometry: Hizalama için farklı bir algoritmanın devreye girmesi için seçilmektedir.

Horizontal Overflow: Eğer text objesi için ayarlanan yükseklik ölçüleri font için küçük gelirse yani text belirtilen alana sığmazsa nasıl işleneceğini seçtiğimiz kısımdır.

  • Overflow: Yazı yatay olarak, text alanının genişliğine sığmasa da ekranda gösterecektir fakat kaymalara sebep olacaktır.
  • Wrap: Yazı yatay olarak sığmıyorsa text için belirtilen alanın dışına çıkmaması sağlanır. Bu şekilde ayarladığımızda yatay olarak sığmayan kısım otomatik olarak alt satıra kayacaktır.

Vertival Overflow:Horizontal Overflow” ayarının tam tersi şekilde yani genişlik ölçüleri font için küçük gelirse nasıl işleneceğinin ayarlandığı kısımdır.

  • Truncate: Text uzunluğu dikey olarak yani satır uzunluğu olarak text alanı için belirtilen boyuta sığmadığında otomatik olarak sığmayan kısımları gizlemesi için kullanılır.
  • Overflow: Yazının dikey olarak sığıp, sığmasına bakmadan tüm yazıyı gösterir fakat alanın dışına çıkacağı için kaymalara sebep olur.

Best Fit:Horizontal Overflow” ve “Vertival Overflow” alanlarının aksine eğer metin uzunluğu ya da genişliği belirtilen text alanına sığmıyorsa font büyüklüğünü otomatik olarak küçülterek ya da büyülterek ekranda düzgün bir şekilde gözükmesini sağlayacaktır.

  • Min Size: Fontun en çok küçülebileceği değerin verildiği kısımdır.
  • Max Size: Fontun en çok büyüyebileceği değerin verildiği kısımdır.

Color: Font renginin seçildiği alandır.

Material: Fonta material atamak için kullanılan kısımdır. Material olarak atamak için ilgili materyalin özelliğinin yani Shader kısmının “UI/Default Font” olması gerekmektedir.

Raycast Target: Bu ayar seçildiği zaman objenin tıklanabilir özelliğini kapatmak için kullanılan alandır.

Maskable: Bir Objenin farklı bir obje arkasında kaldığında görünüp, görünemeyeceğinin belirlendiği alandır.

Image Objesi

Unity UI Image
Unity UI Image

Oyun arayüzlerine ya da menülere resim eklemek için kullanılan Unity UI elemanıdır.

Hem image objesi konusunda hem de ileride lazım olacağı için Asset Store üzerinden bu bağlantıdaki standart sprite paketini indirdik.

Unity UI Image Bileşeni
Unity UI Image Bileşeni

Source Image: Image objesini ilk eklediğinizde ekranda beyaz bir görsel göreceksiniz. Bu görseli değiştirmek için “Source Image” kısmından “Sprite” türünde bir görsel seçebilirsiniz.

Color: Seçtiğiniz resme uygulanmasını istediğiniz görseli bu alandan seçebilirsiniz.

Material: Görüntüye materyal eklemek için kullanılan kısımdır.

Raycast Target: Objenin tıklanma özelliğini kapatmak için kullanılan kısımdır.

Maskable: Image objesinin farklı bir obje arkasında kaldığında maskalenme durumunun ayarlandığı kısımdır.

Image Type: Eklenen sprite türündeki görselin nasıl görüleceğin belirlendiği alandır. “Simple”, “Sliced”, “Tiled” ve “Filled” olarak dört alt seçeneği bulunur.

  • Simple: Eklenen sprite türündeki görselin olduğu gibi gözükmesi için kullanılır.
  • Sliced: Köşeli yapıya sahip sprite türündeki görsellerde kullanılan bir ayardır.
  • Tiled: Eklenen sprite görselini bir pixel başına ne kadar gösterileceğinin belirlendiği alandır. Değeri arttırdıkça aynı görseli her pixel eklediğini görebilirsiniz.
Unity Filled Kullanımı
  • Filled: Resimler için en çok kullanılan ayarlardan biridir. Oyunda yer alan resim türündeki objelere genellikle bu alandan işlem yapılmaktadır.
    • Fill Amount: Resimde maskeleme işlemi için kullanılan bölümdür. 0-1 arasında bir değer alan Fill Amount ayarını yavaş yavaş düşürürseniz resmi belirtilen açıyla sildiğini yani maskelediğini görebilirsiniz.
    • Fill Method: Maskeleme işleminin hangi açıyla ya da yatay mı yoksa dikey mi olarak yapılacağının belirlendiği ayardır.
    • Fill Origin: Maskeleme işleminin hangi taraftan başlayacağının belirlendiği ayardır.

Filled ayarı oyunlarda yer alan karakterin sağlık gücünün azalması, artması durumunu ekranda göstermek için kullanılır.

Use Sprite Mesh: Eklediğimiz sprite dosyasının kendi kalıbını kullanması için seçilen ayardır.

Preserve Aspect: Eklediğiniz sprite boyutu ve Image objesinin boyutu arasında boyut farkı olduğunda kullanılan ayardır. Örneğin 100×100 boyutunda bir image objesi eklediğiniz ve sprite boyutunuz ise daha büyük ya da küçükse eklediğiniz spritei image objesinin boyutuna göre yeniden şekillenecektir.

Button Objesi

Unity UI Button Objesi
Unity UI Button Objesi

Kullanıcıdan geri dönüş alarak bir kodu başlatmak ya da bir eylemi onaylamak için kullanılabilen yapılardır. Örneğin ayar menülerinin içinde yer alan kaydet ya da bir formun gönder butonunu düşünebilirsiniz.

Sahneye bir “Button” eklediğinizde “Text” türündeki UI bileşenini otomatik olarak alt öğesi olarak ekleyecektir. Ayrıca “Button” objesinin bileşenler kısmına “Image” bileşeninin otomatik olarak eklendiğini görebilirsiniz.

Button Bileşeni
Button Bileşeni

Yani aslında “Button” bileşeni için üç farklı alandan değişiklikler yapabiliriz. “Button” üzerinde yazan yazılar için “Text” kısmını, “Sprite” ya da “Material” atamak için “Image” kısmını ve “Button” için kullanılan genel ayarlar kısmını değiştirebiliriz. “Text” ve “Image” için eklenen objeler önceki konu başlıklarında gördüğümüz ayarlarla birebir aynıdır. O yüzden “Button” objesinin genel ayarlarına göz atalım.

Button Bileşeni Ayarları
Button Bileşeni Ayarları

Interactable: Eklenen butonun tıklanabilir olup, olmayacağının seçildiği alandır. Tıklanabilir olması için kutucuğun işaretli olması gerekmektedir.

Transition: Bu kısımdan butonun kullanıcıdan alınan etkileşime nasıl tepki vereceği ayarlanmaktadır. Bu alanda “None”, “Color Tint”,” Sprite Swap” “Animation” seçenekleri bulunmaktadır.

  • Color Tint: “Button” üzerinde gerçekleşen kullanıcı işlemlerinde oluşan etkileri renklerle göstermek için kullanılan kısımdır.
  • Sprite Swap: “Button” üzerinde kullanıcı işlemlerinde oluşan etkileri “Sprite” dosyaları ile göstermek için kullanılan kısımdır.
  • Animation: “Button” üzerinde kullanıcı işlemlerinde oluşan etkileri animasyonlarla göstermek için kullanılan kısımdır.
  • None: Kullanıcı işlemlerinde değişiklik olmaması için seçilen ayardır.

“Color Tint”,” Sprite Swap” ve “Animation” seçeneklerinin hepsi aynı mantıkla çalışmaktadır. Yani kullanıcı “Button” bileşeninin üzerine geldiğinde, tıkladığında, tıklamayı bıraktığında gibi işlemlerde renk, sprite ya da animasyon göstermemizi sağlarlar. Biz ek bir kaç özellik olduğu ve daha animasyonları görmediğimiz için en çok kullanılan “Color Tint” ile inceleyeceğiz.

Button Bileşeni Geçiş İşlemleri

Normal Color: Butonun ana rengini değiştirmek için kullanılan seçenektir.

Highlighted Color: Butonun üzerine gelindiğinde değişmesini istenilen rengin seçildiği bölümdür. Butona tıklanmadan üzerinde gezildiğinde.

Selected Color: Butona bir kere tıklama işlemi gerçekleştikten sonra ana renk yerine hangi renge geçmesi isteniyorsa, bu kısımdan ayarlanmaktadır.

Pressed Color: Butona tıklandığında ilk gözüken rengin belirlediği seçenektir.

Disabled Color: Butonun tıklanabilir özelliği yani “Interactable” özelliği pasif duruma getirildiğinde değişmesi istenen rengin ayarlandığı kısımdır.

Navigation: Klavye ile UI bileşenleri arasında gezinme ayarlarının yapıldığı kısımdır. Örneğin “Tab” tuşuna basarak bir formun öğeleri arasında gezmeyi düşünebilirsiniz. Fakat mobil oyunlarda bu ayar kullanılamaz.

Color Multiplier: Renklerin ton değerini belirtilen değer ile çarparak yumuşak bir geçiş sağlamak için kullanılır.

Fade Duration: Renk geçişlerinde beklenmesi istenilen sürenin ayarlandığı kısımdır.

Toggle ve Toggle Group Bileşeni

Unity ui toggle objesi
Unity UI Toggle ve Toggle Group

Kullanıcıdan onay almak için kullandığımız yapılardır. Örneğin oyundaki grafik ayarlarından birini açıp, kapaması için “Toggle” kullanılır.

Fakat kullanıcı birden fazla seçeneği seçenek için aralarından sadece birini seçmesi gerekiyorsa “Toggle Group” kullanılır.

Unity UI Toogle Bileşeni
Unity UI Toggle Bileşeni

Bir “Toggle” bileşeni eklendiğinde otomatik olarak “Background”, “Checkmark” ve “Label” objeleri de sahneye eklenerek bir yapı oluşturacaktır.

  • Background” bileşeniyle “Toggle” içinde onay işaretinin olduğu kısmının arka planını ve rengini değiştirme gibi işlemlerini yapabilirsiniz.
  • Checkmark” bileşeniyle onay işaretinin simgesini ve rengini değiştirme gibi işlemleri yapabilirsiniz.
  • Label” bileşeniyle “Toggle” bileşeninde yer alan yazıyı ve yazı stilini değiştirebilirsiniz.

Toggle Transition: Kutucuk işaretlendiğinde oluşacak olan geçiş efektinin belirlendiği kısımdır.

Graphic: Onay işareti için kullanılacak olan görüntün seçildiği alandır. Otomatik olarak eklenen “Checkmark” objesi seçili gelir.

Group: Eğer birden fazla seçenekten sadece bir tanesinin seçilmesi isteniyorsa “Toggle Group” bileşeni eklenerek bu alandan seçilmesi gerekmektedir.

Toggle Group” eklemek için sahnede yer alan “Toggle” objelerinizden birinin içerisindeyken “Add Component” alanından “Toggle Group” eklenmesi ve “Group” alanından seçilmesi gerekecektir. Son olarak diğer “Toggle” objelerinizin “Group” alanlarına “Toggle Group” ekli olan objenin sürüklenmesi gerekiyor. Bu işlemi aşağıdaki videodan izleyerek mantığını anlayabilirsiniz.

Toggle Group Kullanım

Allow Switch Off: “Toggle Group” üzerindeki bu ayar işaretlenirse seçenekler arasında geçiş yaparken diğerlerini kapatacaktır.

Slider Bileşeni

Unity UI Slider Bileşeni
Unity UI Slider Bileşeni

Slider yani kaydırma çubuğu ile kullanıcının seçimine göre arka planda işlem gerçekleştirilebilir. Örneğin bir oyunun ayarlar penceresinde yer alan ses seviyesini ayarlama kısmını düşünebilirsiniz. Kullanıcı kaydırma çubuğu ile istediği ses seviyeye getirerek ayarlarını düzenleyebilir. Unity tarafında getirilen seviyeyi hesaplayarak kullanıcının tercihine göre değişiklik gerçekleştirebiliriz.

Slider objesini sahneye eklediğimizde otomatik olarak “Background”, “Fill Area”, “Fill”, “Handle Slide Area” ve “Handle” objeleri otomatik olarak eklenecektir. Eklenen her obje birleşerek bir yapı oluşturlar ve “Slider” elde etmemizi sağlamaktadır.

Direction: “Slider” objesi içinde yer alan tutacağının nasıl hareket edeceğini belirlediğimiz kısımdır. Soldan sağa, sağdan sola, yukarıdan aşağıya yada aşağıdan yukarıya seçenekleri bulunmaktadır.

Min Value: “Slider” objesinde kaydırma alanı en düşük seviyeye geldiğinde değerin kaç olacağının belirlendiği alandır.

Max Value: “Slider” objesinde kaydırma alanı en yüksek seviyeye geldiğinde değerin kaç olacağının belirlendiği alandır.

Whole Numbers: Eğer işaretlenirse “Min Value” ve “Max Value” arasındaki değerlerin tam sayı olarak artacaktır. Yani 1 ile 10 arasında bir değer verirseniz her kaydırmada birer birere artacaktır. Normalde “Float” yani ondalık sayı almaktadır.

Value: “Slider” objesinin oyun başladığında başlangıç değerini belirlemek için kullanılır.

Scrollbar Objesi

Unity UI Scrollbar Objesi
Unity UI Scrollbar Objesi

Çalışma mantığı olarak “Slider” objesine benzemektedir. Aynı şekilde kaydırma yapıları için kullanılır fakat genellikle menü yapılarında taşma durumlarında aktif olarak kullanılmaktadır. Örneğin markette satın alabileceği ürünler ekrana sığmayacak bir yapıdaysa “Scrollbar” kullanarak kullanıcının kaydırarak itemları gezmesini sağlayabiliriz.

“Scrollbar” ekleme işleminde sonra sahneye otomatik olarak “Sliding Area” yani kaydırma alanı ve “Handle” yani tutamaç için objeler eklenecektir.

Direction: Kaydırma çubuğunun hangi yönden başlayarak hangi yönde biteceğinin belirlendiği ayardır.

Value: Kaydırma çubuğunun hangi seviyeden başlayacağının belirlendiği alandır. 0 ile 1 arasında bir değer almaktadır.

Size: Kaydırma çubuğunda yer alan tutamacın boyutunun belirlendiği kısımdır. 0 ile 1 arasında değer verilebilmektedir.

Number Of Steps: Tutacağı kaydırma işlemi için kademe belirlenmek istendiğinde kullanılan ayardır. Tutamaç belirlenen değer orantısında ekkranda hareket edecektir.

Unity UI Dropdown Objesi
Unity UI Dropdown Objesi

Kullanıcıya içerisinden seçim yapma imkanı olan açılır, kapanır bir liste göstermek için kullanılır. Kullanıcı açılır pencereye basarak istediği seçimlerden birini işaretleyerek işlem gerçekleştirebilir.

“Dropdown” Unity UI bileşenini sahneye eklediğinizde yukarıdaki resimde gözüktüğü gibi otomatik olarak birçok alt obje oluşturacaktır. Bu objeler birleşerek “Dropdown” yapısını oluşturmaktadır.

Template: Açılır liste şablonunun belirlendiği kısımdır. Otomatik olarak sahneye eklenen “Template” objesi seçilmiş olarak gelir.

Value: Açılır liste içerisinde yer alan seçeneklerden hangisinin varsayılan olarak seçili olmasını istediğimizi belirttiğimiz kısımdır. 0 seçilirse ilk seçenek, 1 seçilirse ikinci seçenek ve 2 seçilirse üçüncü seçenek varsayılan olarak seçili olur.

Options: Açılır listenin içinde yer alan seçeneklerin belirlendiği kısımdır. + tuşuna basarak istediğiniz kadar seçenek ekleyebilirsiniz.

Input Field Bileşeni

Unity UI Input Field Bileşeni
Unity UI Input Field Bileşeni

Kullanıcıdan bilgi almak için kullanılan Unity UI bileşenidir. Bir oyuna kayıt olurken kullanıcı bilgilerini yazdığınız ekran olarak düşünebilirsiniz.

Text: Kullanıcı girişinden önce otomatik yazılmasını istediğimiz içeriğin belirlendiği kısımdır. Burada silik olarak yazan “Enter text…” farklı ile buraya yazılan içerik farklıdır. “Enter text…” yazısını değiştirmek için “Placeholder” objesinin içerisindeki “Text” alanı kullanılır.

Character Limit: Kullanıcı tarafından yazılacak olan içeriğin en fazla kaç harf olacağını belirlendiği kısımdır.

Content Type: Kullanıcının yazacağı içeriği belirli şartları sağlaması için kullanılan alandır.

  • Standart: Kullanıcı istediği herhangi bir karakteri girebilir.
  • Integer Number: Kullanıcı sadece sayı girişi yapabilir.
  • Decimal Number: Kullanıcının sadece ondalık sayı girişi yapabilir.
  • Alphanumeric: Kullanıcı hem sayı hem de harf girişi yapabilirken, sembol girişi yapamaz.
  • Name: Girilen bilginin ilk harfini otomatik olarak büyük yapar. Boşluk bırakıldıktan sonra yazılan ikinci kelimede büyük harfle başlar. Ad, soyad girişelri için uygundur.
  • Email Address: Kullanıcıya bir adet @ işareti koymaya zorlar. E-posta girişleri için uygundur.
  • Password: Girilen bilgileri * olarak gösterir. Özel karakterlere izin verir.
  • Pin: Girilen bilgileri * olarak gösterir. Sadece tam sayıya izin verir.
  • Custom: Giriş kurallarını bizim belirlememizi sağlar.

Caret Blink Rate: Giriş yapılırken yanıp sönen metnin hızının belirlendiği kısımdır.

Caret Width: Yanıp sönen imlecin kalınlığının ayarlandığı kısımdır.

Custom Caret Color: Yanıp sönen imlecin renginin ayarlandığı kısımdır.

Hide Mobile Input: Mobil cihazlarda klavye çıkmasının engellenmesi için kullanılan alandır. Sadece IOS cihazlarda kullanılabilir.

Read Only: İlgili alanın seçilebilir olmasını ama kullanıcının bilgi girmesinin engellenmesi için kullanılır.

Panel Bileşeni

Unity UI Panel Bileşeni
Unity UI Panel Bileşeni

Canvas objesi içerisinde belirli alanlarda Unity UI bileşenleri göstermek için kullanılan yapıdır.

Örneğin oyununuzda bir harita, topladığı puan ya da kalan hakkı gibi özellikleri göstermek istiyorsanız ve “Canvas” içerisine “Panel” yapılarını ekleyip, konumlarını ayarlayabilirsiniz.

Eklediğiniz bu paneller içerisine resim, yazı, buton gibi istediğiniz diğer UI bileşenlerini ekleyerek ekranın belirli kısmında yan yana gösterebilirsiniz.

Scroll View Bileşeni

Unity UI Scroll View Bileşeni
Unity UI Scroll View Bileşeni

Kullanıcıya gösterilecek olan ekranın boyutunun büyük olması ya da küçük bir ekranda fazla içerik olması gereken durumunda kullanılır. Eklenen içerik belirtilen alanlar doğrultusunda aşağı-yukarı ya da sağa-sola olarak esneyecektir.

Genellikle oyunlarda her iki kaydırma yapısı yerine, ya yukarı-aşağı ya da sağa-sola yapısı kullanılmaktadır. Örneğin oyunların market sayfaları genellikle bu şekilde tasarlanır. Mantık olarak “Scrollbars” yapısına benzemektedir.

Scroll View Content Kullanimi
Scroll View Content Kullanımı

“Scroll View” içerisine eklenecek olan diğer objeler sahneye otomatik olarak eklenen “Content” objesinin altına eklenir. Ayrıca “Content” objesini boyutlandırarak ekranın istediğiniz tarafa ne kadar kayacağını ayarlayabiliriz.

Horizontal: Yatay kaymayı etkinleştirmek için aktif olması gerekmektedir.

Vertical: Dikey kaydırmayı etkinleştirmek için aktif olması gerekmektedir.

Movement Type: “Scroll View” içerisine eklenen içeriğin belirlediğimiz sınırlar içinde kalıp, kalmamasının ayarlandığı kısımdır. İçeriğin belirlediğimiz alanlar içinde kalması için Elastic ya da Clamped seçenekleri tercih edilir.

Inertia: Kaydırma kısmında içeriği aşağıya doğru kaydırdığımızda ne kadar esneyerek fazladan kayacağının belirlendiği kısımdır.

Deceleration Rate: İçeriğin yatay ya da dikey olarak kaydırma hızının belirlendiği kısımdır. 0 ile 1 arasında bir değer alır ve eğer 0 verilirse içerik kaydırılamaz duruma gelir.

Scroll Sensitivity: Mouse kullanılarak oynanacak oyunlarda, tekerleğin içeriği ne kadar hızlı kaydıracağını belirleyen ayardır.

Horizontal Scrollbar ve Vertical Scrollbar: Kaydırma çubukları ve görüntü arasında mesafe belirlemek için kullanılan ayardır. “Spancing” üzerinden değer verilir.

TextMesh Pro Bileşeni

TextMesh Pro bileşeni standart Text UI elemanından çok daha gelişmiş ve efektif kullanabileceğimiz bir bileşendir. Fakat çalışmanızda kullanabilmeniz için Unity oyun moturuna paket olarak kurmamız gerekiyor.

texmesh pro yukleme ekrani
Textmesh Pro PaketOlarak Yükleme

Window / Package Manager” üzerinden paket yöneticisini açtıktan sonra “TextMeshPro” ismini bularak, “Install” butonuna basıyoruz ve yüklemeyi tamamlıyoruz.

TextMesh Pro Ayarları

Yükleme işleminden sonra sahnenize “UI / Text – TexMeshPro” objesini eklediğinizde “Inspector” penceresine göz atarsanız normal “Text” UI elemanından çok daha gelişmiş olduğunu görebilirsiniz.

Daha detaylı incelemek için ayarlarına bir göz atalım.

Textmesh Pro Ayarları
Textmesh Pro Ayarları

Text: Sahnede gözükecek olan içeriği yazdığımız kısımdır.

Font Asset: Sisteme TPM türünde yüklenmiş hazır fontları kullanabileceğiniz bölümdür. Fontların TPM türünde olması gerekmektedir bu yüzden sistemdeki normal fontları bu alanda kullanamazsınız. İlerleyen kısımlarda TMP türünde font oluşturmayı öğreneceğiz.

Material Preset: Material uygulamak için kullanılan alandır. Hazır olarak yüklenmiş üç farklı material bulunmaktadır.

Font Style: Bold, italic, büyük harfe çevirme gibi standart özelliklerin olduğu kısımdır. Bu kısımdaki “SC” kısaltmasını belki bilmiyor olabilirsiniz tüm harfleri büyük yaparak sadece ilk harfleri daha da büyük hale getirir.

Font Size: Sahnede yer alan yazının boyutu.

Auto Size: Eklediğimiz yazının TextMesh Pro bileşeninin boyutuna göre otomatik olarak düzenlenmesinin yapıldığı kısımdır. İşaretlendiğinde fontu boyuta göre otomatik büyültecek ya da küçültecektir.

Auto Size Options: Fontu pencereye göre değiştirme işleminde, font boyutunu en çok ne kadar küçülteceğini ya da büyülteceğini ayarladığıız kısımdır.

Vertex Color: Font renginin ayarlandığı kısımdır.

Color Gradient: Font renklerinde kapsamlı renk ayarları yapmak için kullanılan alandır. Farklı renkler seçerek renk geçişlerinin olduğu bir yazı elde edebiliriz.

  • Color Preset: Sisteminizde yüklü olan Hazır TMP yapılarının olduğu kısımdır.
  • Color Mode: Renk geçişlerinin nasıl olacağını seçtiğimiz alandır.
    • Horizontal Gradient: Yatay renk geçişleri için kullanılır.
    • Vertical Gradient: Dikey renk geçişleri için kullanılır.
    • Four Corners Gradient: Dört farklı renk ile renk geçişinin yapıldığı kısımdır.

Override Tags: Kod tarafıyla yazı renginin değişmesini engellemek için kullanılan ayardır.

Spacing Options(em): Harfler, kelimleler, satırlar ve paragraflar arasında ekstra boşluk oluşturmak için kullanılır.

Alignment: İçeriği hizalamak için kullanılan ayarlardır.

Wrapping: Eğer yazıla text içeriği belirtilen alandan uzunsa ve “Enabled” olarak seçiliyse otomatik olarak alt satıra geçer.

Overflow: “Wrapping” ayarı “Disabled” olarak seçilirse taşma işlemini nasıl göstereceğinin seçildiği alandır.

  • Ellipsis: Sığmayan içeriği üç nokta olarak gösterecektir.
  • Overflow: Sığmayan içeriğin taşmasına izin verecektir.
  • Truncate: Alana sığan içeriği gösterir ve diğer kısımlarını otomatik keser.
  • Scroll Rect: Eğer TMP bir scroll içerisindeyse kaydırmalı yapıya uygun olarak gösterecektir.
  • Page: İçeriği parçalara bölerek sayfa yapısı oluşturur.
  • Linked: Alana sığmayan içeriği farklı bir TMP objesinin içinde göstermek için kullanılır.

Margins: TMP objesine yatay ya da dikey açılardan boşluk bırakmak için kullanılan ayardır.

Rich Text: Text içerisinde HTML etiketlerini kullanmamızı sağlar.

Sprite Asset: Text içeresinde sprite eklemek için kullanılan alandır.

TextMesh Pro Sprite Oluşturma

TextMesh Pro ile eklenen yazılara “Sprite” görselleri ekleyebiliriz. Fakat bu “Sprite” dosyasının TMP türünde olması gerekmektedir. TextMeshPro içerisine ekleyeceğimiz sprite dosyalarını yazılarda kullandığımız smileyler olarak düşünebilirsiniz. Bu tarz görseller eklemek için aşağıdaki işlemleri yapmamız gerekiyor.

Sprite Importer Adresi
Sprite Importer Adresi

TextMeshPro paketine sprite yüklemek için “Window/TextMeshPro/Sprite Importer” menüsünü kullanacağız.

TextMesh Pro Sprite

Import Settings” üzerinden bir kaynak dosyası seçtikten sonra “Sprite Texture Atlas” seçeneği altından eklemek istediğimiz sprite dosyasını seçerek “Create Sprite Asset” diyoruz. Create işlemi bittikten sonra “Save Sprite Asset” butonuna basarak kaydetme işlemini gerçekleştiriyoruz.

textmeshpro sprite olusturma
TextMeshPro Sprite Kısa Kodunu Alma

Kaydettiğimiz TMP türündeki sprite dosyamızı açtığımızda “Inspector” alanında yukarıdaki gibi bir pencere göreceksiniz. Bu alandan eklediğimiz sprite dosyasını index numarasını ve ismini görebilirsiniz. Bu bilgileri kısa kod oluşturmak için kullanacağız. Ayrıca pozisyonunu düzenleyerek nasıl gözükeceğini de ayarlayabilirsiniz.

TMP objesi ayarlarında yer alan “Sprite Asset” kısmına TMP için oluşturduğumuz dosyayı seçtikten sonra text alanına aşağıdaki bilgileri yazdığınızda otomatik olarak eklediğimiz sprite gözükecektir.

<sprite=0>
<sprite name="1f605">

TextMesh Pro Font Ekleme

TextMesh Pro yapısı itibariyle içerisinde standart fontları kullanamamaktayız. Bu yüzden “Font Asset Creator” penceresinden fontlarımızı dönüştürmemiz gerekmektedir.

font asset creator kullanimi
Font Asset Creator Bölümü

Window / TextMeshPro / Font Asset Creator” adresini takip ederek font dönüştürme penceresini açıyoruz.

font asset creator ayarlari

Açılan pencereden fontumuzu seçerek aşağıda belirtilen ayarları yaparak “Generate Font Atlas” butonuna basıyoruz. İşlem bittikten sonra ise TMP türünde fontumuz hazır durma gelecektir. Son olarak “Save” butonuna basarak işlemimizi bitiriyoruz.

Source Font File: Sistemde yüklü olan fontlardan birini seçiyoruz.

Packing Method: Optimum seçerek en iyi dönüştürme sonucunu almaya çalışıyoruz.

Atlas Resolution: Fontların büyüklüğünü belirledğimiz kısım diye düşünebilirsiniz 512 x 512 ideal bir orandır.

Font Asset Font Ekleme
Font Asset Font Ekleme

Artık TMP ayarlarında yer alan “Font Asset” kısmından yani fontu belirleme kısmından yeni oluşturduğumuz fontu kullanabiliriz.

Ayrıca aşağıda yer alan penceredeki ayar kısmından fontumuza çeşitli efektler uygulayabilirsiniz.

Font Ayarları
Font Ayarları

Unity UI yani Unity arayüz bileşenleriyle ilgili bir çok maddeyi detaylıca inceledik. Sonradan bu alana UI bileşenlerinei C# üzerinden müdahale etme kısımları eklemeyi düşünüyorum. Ekleme yaptığımızda siteden bilgi veriyor olacağım.

Sonraki konumuz Unity için zevkli sayılacak olan konulardan biri olan Animasyonlar konusu olacak. Beklemede kalın…

Hazır…