Oyun Geliştirme- 2 (UI)

Yeniden Herkese Merhaba,

Oyun Geliştirme İle İlgili Yazılarım Devam Ediyor. Bu Yazımda Unity’ nin UI Sistemine Giriş Yapacağız. UI Sisteminin Birçok Elemanı Vardır;

  • CANVAS

Canvasın 2 Önemli İşlevi Vardır;

  1. Diğer UI Elemanlarını İçine Alır ve İçinde Barındırır. Ve Diğer Tüm Arayüz Elemanları Canvas İçinde Barındırılır.
  2. Canvas Oyunumuzu 3D Oyunlardan Ayıran En Önemli Özelliğimizdir.
  • BUTTON

Adındanda Anlaşılcağı Üzere Bu Eleman Tıklanma Özelliği Bulunan Bir Butondur.

Bu elemanın özelliklerinden bahsetmeden önce birlikte bir canvas ve birkaç butondan oluşan basit bir arayüz oluşturmayı uygun buldum. Böylece yeni sistemle birlikte nasıl hiç kod yazmadan arayüz oluşturabildiğimizi görecek ve bazı önemli terimlerle tanışacaksınız: anchor ve pivot.

1- GameObject-UI-Canvas yolunu izleyerek elle oluşturabiliriz.

2- Direkt GameObject-UI-Button ile bir buton oluştururuz ve yeni bir canvas bizim için otomatik olarak oluşturulur.

Ben 2. yolu tercih edeceğim. GameObject-UI-Button yolunu izleyin. Hierarchy panelinizde bir canvas bir de button belirecek.

Eğer Scene paneline bakacak olursanız devasa bir dikdörtgensel alan ve bu alanın içine yerleştirilmiş ufak bir buton göreceksiniz. İşte bu dikdörtgensel alan bizim canvas’ımız. Şu anda canvas 2D modunda, yani canvasın içinde oluşturduğumuz arayüz elemanları direkt oyun ekranının üzerine çizilecekler.

  • Butona Basınca Yapılacakların Ayarlanması

Yeni UI Sisteminde Eskiye Göre Birçok Yenilik Getirildi. Eskiden GUITexture’ ler vardı ve Bunlara Kodla OnMouseDown() Fonksiyonu İle Erişebiliyoduk. Ama Yeni Sistem Bu İşi Gayet Kolay Ve Zevkli Bir Hale Getirdi.

Örnekle Gösterelim,

Ekranda Bir Tane Canvasımız var Ve Bu Canvasın İçine Bir Button Ekleyelim. Bu butona tıklayınca konsola “Merhaba Dünya” yazdırmak istiyoruz diyelim. Bunun İçin Çok Kısa Bir Kod Bloğuna İhtiyacımız Var. Bu Örnekte Javascript Kullanacağım Başka Serilerde C# İlede Kullanacağım.

“Örnek.js” Adında Yeni Bir Js Oluşturuyoruz. İçeriğini Şu Şekilde Düzenleyin;

public function Merhaba()
{
    Debug.Log( "Merhaba Dünya" );
}

 

Bu Scripti İstediğiniz Objeye Sürükle Bırak Yöntemi İle Atın(ben Main Camera‘ya vereceğim). Şimdi Button Objesini Seçin. Inspector‘da “On Click()” diye bir kısım var. Bu (şu anda boş olan) bir listedir. Butona tıklandığı zaman bu listede yer alan fonksiyonlar otomatik olarak çağrılır. Biz Main Camera’daki Örnek.js script’inin Merhaba() fonksiyonunu çağırmak istiyoruz. Bunun için oradaki + işaretine tıklayın. Obje olarak Main Camera’yı seçin ve fonksiyon olarak MerhabaScript-Merhaba() yolunu izleyin:

  • İPUCU

Shift tuşu! Bu tuş çok işinize yarayabilir.

Objeyi Bir Yerden Başka Bir Yere Taşırken Shift’ e Basılı Tutarak Yatay ve Dikey Eksendeki Hareketleri Haricindeki Hareketleri Engeller.

  • Panel

Bu Eleman Oyununuzun Arayüzünü Güzel Gözükmesini Sağlayan Bir UI Elemanıdır. Bazen Lazım Olabiliyor.

  • Ekran Çözünürlüğünün Her Telefonda Aynı Kalması

Button’u işlerken anchor‘ları kullanarak arayüz elemanlarının arayüzle beraber nasıl boyutlanabileceğini gördük. Ancak bazen özel durumlar olur. Örneğin arayüzde bir resim çizdiriyorsunuz diyelim. Resmin anchor’larını canvas’ın dört bir köşesine yaydınız; resim canvas ile büyüyüp küçülüyor. Ama burada ufak bir sıkıntı var: resmin en/boy oranı (aspect ratio) korunmuyor! Bu, butonlar için bir sıkıntı değil ama bir resim çizdirirken genelde resmin en/boy oranının korunmasını isteriz. Bu gibi durumlarda yeni UI sisteminin bize sağladığı birkaç seçenek mevcut:

Aspect Ratio Fitter

Bu component, atandığı UI elemanının en/boy oranının daima aynı kalmasını sağlar. Bu component’i Component-Layout-Aspect Ratio Fitter yolunu izleyerek istediğiniz UI elemanına verebilirsiniz. Component’in sahip olduğu “Aspect Mode” değişkeni burada önem arz ediyor:

 

37

 

 

 

 

 

 

Bu seçenekler sırayla şöyle:

None: Component işlevini kaybeder.

Width Controls Height: UI elemanının genişliği değiştikçe; yüksekliği, en/boy oranını koruyacak şekilde otomatik olarak değiştirilir.

Height Controls Width: UI elemanının yüksekliği değiştikçe; genişliği, en/boy oranını koruyacak şekilde otomatik olarak değiştirilir.

Fit In Parent: UI elemanının ya genişliği ya da yüksekliği daima parent objenin kenarlarıyla temas halinde olur (bu esnada en/boy oranı korunur).

Envelope Parent: UI elemanı, parent objesinin tamamını içine alacak şekilde otomatik olarak boyutlandırılır (bu esnada en/boy oranı korunur).

Son iki seçenek benim pek ilgimi çekmedi ama ondan önceki iki seçenek gerçekten kullanışlı duruyor. Bu iki seçeneği kullanarak hazırladığım örnek bir scene’i, örnek projenin içinde bulabilirsiniz.

Bu component’i kullanırken bilmeniz gereken önemli bir nokta daha var: pivot noktasının konumu. Eğer ki UI elemanının hep ekranın en sol üstünde yer almasını istiyorsanız ve Aspect Ratio Fitter component’ini kullanıyorsanız o zaman pivot noktasını UI elemanının sol üst köşesine taşımalısınız. Böylece UI elemanının otomatik olarak boyutlandırılması sağ ve alt kenarlar üzerinden gerçekleşecek, sol üst noktanın konumu değişmeyecek.

Canvas Scaler

Bu component benim gerçekten çok hoşuma gidiyor; kullanması da gayet basit:

Öncelikle Game panelinin sol üstündeki çözünürlük butonu vasıtasıyla çözünürlüğü 1024×768 yapıyoruz:

Sonra Canvas objesini seçiyoruz ve “Canvas Scaler (Script)” component’inin “Ui Scale Mode“unu “Scale With Screen Size” yapıyoruz. Karşımıza gelen yeni değişkenlerden referans çözünürlüğü 1024×768 yapıyor, “Screen Match Mode“u ise “Expand” yapıyoruz.

Artık arayüzümüzü hazırlamaya hazırız. Arayüzü hazırlarken dikkat etmemiz gereken nokta, UI elemanlarının anchornoktalarını dört farklı noktaya yaymak yerine bir noktada toplamak.

NOT: Canvas Scaler‘ın sahip olduğu diğer değişkenleri araştırmak size düşmüş; onların nolduğunu ben de tam bilmiyorum.

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s