Unity3D UI Sistemi Çapa Noktaları Yapısı

Bu yazımda kısaca Unity3D versiyon 4.6’dan sonra gelen “UI(User Interface)” yapısına bakacağız. Bununla birlikte çok sık olarak karşılaştığım “UI yapısının her telefonda aynı görünmesi” durumuna bakacağız. Kullanışlı ve temel olarak basit bir yapıdır.

Öncelikle Unity3D içerisinde hiyerarşi altına sağ tıklayarak UI altında “Canvas” ekleyelim.

2 adet yeni obje eklenecek. Bunlardan ilki seçmiş olduğumuz “Canvas” objesidir. Sahne içerisinde kullanacağımız tüm UI elementleri bu “canvas” içerisine yerleşecek. İkinci olarak “EventSystem” objesidir. Bu ise kısaca “canvas” üzerinde yapılan parmak hareketlerini yakalamayı sağlayacaktır. Aslında bu obje değil üzerinde çalışan script yapıları bunu sağlıyor.
Çalışma alanımız yani “Scene” altında 2D özelliğini kullanarak daha kullanışlı bir duruma getirelim.

Buradaki “canvas” boyutu “Game” alanının piksel boyutları kadar olacaktır. Yani her cihazın ekran boyutunu tam olarak kaplayacak.
Şimdi örnek olarak bu “canvas” içerisine alt obje olarak bir tane “Button” ekleyelim.

Buton eklendikten sonra çalışma alanımızda 4 adet birbirine bakan oklar çıktı. Bu oklar bizim için oldukça önemli durumdadır. Çünkü butonun yerleşimi ekrana göre oranını bunlar sağlamaktadır.

Bu oklara “Anchor” denilmekte. Yani Türkçe olarak “Çapa” diyebiliriz. 2 farklı şekilde bunları düzenleyebiliriz. İlk olarak direk çalışma alanımız üzerinden sağa sola çekerek yapabiliriz. İkinci olarak ise “Inspector Panel” üzerinde “Rect Transform” içerisinde “Anchors” değişkeni üzerinden X ve Y olarak max ve min değerlerini verebiliriz. Ek olarak burada bir önemli nokta daha bu değerlerin her ekranda aynı görünmesini sağlayan kısım tamamen ekranın piksel değerlerinden bağımsız olarak yüzdesel olarak değer vermemizdir. Bu sebepten dolayı verebileceğimiz değerler 0 ile 1 arasında olmalıdır.
Örneğin ekranın sağından %40, solundan %20 bırakmak için X ekseninde min değerini 0.2 ile solundan %20 boşluk bırakabiliriz. Farklı olarak sağından boşluk için X ekseninde max değerini 0.6 vermemiz gerekmekte. Bunun sebebi ise en sağ köşesi X ekseninde 1 olmasıdır. Buradan yola çıkarak üstten %30 ve alttan %30 bırakalım.

Burada dikkat ettiyseniz ekrandaki butonun boyutu değişmedi. Biz burada bırakılacak boşlukları yüzdesel olarak verdik ancak istersek butona piksel olarak bu noktalardan bırakılacak uzaklıkları “Left, Right, Top, Bottom” verebiliyoruz. Benim tercihim genel olarak yüzde değerleri ile verip bu değerlerin tamamını 0 yapmak oluyor.

“Rect transform” altında bu çapa noktalarının referans noktalarını değiştirebilirsiniz. Örneğin buradan “strecth – center” yaparsak uçları en alt ve üst noktada olup sağdan soldan ortalanacaktır. Tabi bu durumda bizim oynamamız gereken değerler yukarıda bahsettiğim “margin” değerleri olacak.

Son olarak bu buton üzerinde döndürme ve büyütme küçültme işlemlerini de yapabilirsiniz. “Rotation” değeri ile X, Y, Z olarak döndürme; “Scale” değeri ile de X, Y, Z olarak boyutlandırma işlemleri yapılmaktadır.
Özet ile çapa noktalarını kullanarak yüzdesel olarak yerleştirdiğiniz UI objeleri her cihaz boyutunda aynı oranlar ile görünecektir. Tabi bunu yaparken görselleri boyutlandıracağı için bozulmalar yaşanabilir.
Teşekkürler, görüşmek üzere.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir