Unity’de Ekran Çözünürlüğü Ayarlamak (3D Proje)

Merhaba, bir önceki dersimizde Unity ile basit bir diyalog sistemi hazırlamıştık.Böylece yapmış olduğumuz projelerde, metine dayalı mekanikler oluşturabiliyorduk.Bugünkü dersimizde ise, Unity’de 3D projelerde ekran çözünürlüğünü nasıl ayarlayabileceğimizi öğreneceğiz.Böylece farklı ekran çözünürlüklerinde projemiz istediğimiz gibi görünecektir.Bu yazı başlıktan da belli olduğu gibi, 3D projeler için geçerli olacaktır.Daha sonra 2D projeler içinde ayrı bir yazı hazırlayacağım.Şimdi Unity‘de yeni bir proje oluşturalım ve dersimize başlayalım.

Sahnemizi oluşturmaya başlayalım.

Bu ders için oluşturduğumuz senaryo, tamamen kameramızın sınırlarını belirleyecek şekilde olması gerekiyor.Bu nedenle, bir yarışın başlangıç çizgisini baz aldığımız bir sahne oluşturacağız.Böylece farklı çözünürlüklerde, kameramızın görüş açısını daha iyi ayırt edebileceğiz.Şimdi ilk olarak Game Penceresinde bulunan ekran oranımızı belirlememiz gerekiyor.Ben bu proje için, 16:9 bir ekran oranı tercih ettim.Bu ayarı projenizin başında yapmanız önemlidir.Çünkü seçtiğiniz oranı baz alarak projenizde kullanacağınız nesneleri konumlandıracaksınız.

Şimdi kullanacağımız oranı belirledikten sonra bir Plane nesnesi oluşturuyoruz.Bu nesne bizim zeminimizi oluşturacak.Daha sonra sahnemize bir Cube nesnesi ekliyoruz.Bu nesneyi Scene penceresinde istediğimiz ölçeklerde ayarladıktan sonra, iki kopya daha oluşturuyoruz.Kopyaladığımız bu nesneleri de aynı şekilde ayarladıktan sonra, başlangıç çizgimizi tamamlamış oluyoruz.Farkı daha iyi görebilmek adına, başlangıç çizgimizi oluşturan bu nesnelere bir material dosyası atayabiliriz.

Şimdi bir araba modeline ihtiyacımız var.Bu şart değil.Bir model yerine Unity‘de bulunan hazır nesnelerden de yararlanabilirsiniz.Ancak farklı ekran çözünürlüklerinde oluşacak ölçeklendirmeyi daha iyi anlamak için tavsiyem bir model kullanmamızdır.Bu arada bu model bir arabada olmak zorunda değil.Ben senaryoya bağlı kaldığım için bir araba modeli tercih ettim.Seçtiğimiz 3D modeli sahnemize ekledikten sonra, Scene penceresinde bulunan araçlar yardımı ile nesnemizi sahnemize göre ayarlıyoruz.Sahnemizin şu anki hali bu şekildedir.

Arayüz elemanlarını sahnemize dahil edelim.

Bu aşamaya kadar, sahnemizin oluşturduk.Şimdi ise, ekran çözünürlüğümüzü kontrol etmek için bir arayüz oluşturacağız.Bunun için öncelikle bir Canvas nesnesi oluşturuyoruz.Eklemiş olduğumuz bu Canvas nesnesinde önemli bir ayar yapmamız gerekiyor.Inspector penceresinde bulunan Canvas Scaler bileşenine geliyoruz.Bu bileşenin altında yer alan, “UI Scale Mode” ayarını Scale With Screen Size seçeneğine getiriyoruz.Aşağıda açılan Referance Resolution ayarına ise, istediğimiz bir ekran çözünürlüğü değerini giriyoruz.

Böylece farklı çözünürlüklerde, arayüz (UI) elemanlarımızın görünüşünde bir bozulma olmuyor.Daha sonra bu nesnemizin üzerine sağ tıklıyoruz ve bir adet Panel ekliyoruz.Bu Panel elemanımızı Scene penceresindeki araçları kullanarak, ekranımızın altına konumlandırıyoruz.Daha sonra bu Panel elemanımızında üzerine sağ tıklayarak, iki adet Text elemanı ekliyoruz.Eklemiş olduğumuz bu Text elemanlarını, bir tanesi sağda ve bir taneside solda olacak şekilde konumlandırmamız gerekiyor.

Bunu yapmak için Scene penceresinde gördüğümüz çapaları (anchors) kullanarak, seçili olan elemanımızın ekran üzerinde bulunan konumunu belirliyoruz.Örnek olarak ilk Text elemanının x eksenindeki çapa konumu (min: 0 ve max: 0.5), ikinci Text elemanının x eksenindeki çapa konumu ise (min: 0.5 ve max: 1) olacak şekilde ayarlıdır.Böylece farklı ekran çözünürlüklerinde, bu Text elemanlarının konumları değişmeyecek ve ayarladığımız şekilde gözükecektir.Daha önceki yazılarımda arayüz elemanlarını ve çapa kullanımını daha ayrıntılı anlatmıştım.Dileyen eski yazılara göz atabilir.

Şimdi ikinci bir Panel elemanı ekliyoruz.Bu sefer Scene penceremizde ekranımızın üzerinde olacak şekilde ayarlıyoruz.Yine çapalardan (anchors) destek alarak kolay bir şekilde konumunu ayarlayabiliyoruz.Bu Plane elemanımızın üzerine sağ tıklıyoruz ve bir adet Text elemanı oluşturuyoruz.Bu Text elemanını da istediğimiz gibi ayarladıktan sonra arayüz ile işimiz bitmiş oluyor.Bu arada yazıların boyutu ve panellerin arkaplan rengi gibi özellikleri size bıraktım.İstediğiniz gibi ayarlayabilirsiniz.

Kameramızın açısını belirleyelim.

Şimdi sahnemizin kamera açısını ayarlamamız gerekiyor.Bunu daha önceden belirlediğimiz ekran genişlik/yükseklik oranını baz alarak yapacağız.Yazımın başlarında sahneyi oluştururken, kamerayı başlangıç çizgisine göre ayarlayacağımızı söylemiştim.Şimdi bunu yapmak için, ana kameramızı (main.camera) seçiyoruz.Daha sonra ister Scene penceresinden istersek de, Inspector penceresinde bulunan Transform bileşeninden kameramızın eksen ayarlarını yapabiliriz.

Artık kameramızın görüş açısı, sahnemizde bulunan başlangıç çizgisi ile sınırlıdır.Bu sınır bizim projemizdeki minimum görüş açısını temsil ediyor.Yani farklı çözünürlüklerde projemizi görüntülediğimiz zaman göreceğimizi minimum açı bu olacaktır.Bir başka değişle, projemiz için bir güvenli alan (safe zone) oluşturuyoruz.Kafanız karıştı ise, bu görsel daha iyi anlamanıza yardımcı olacaktır.

Bu görselde de anlaşılacağı gibi, farklı ekran oranlarına göre projemizin görünmeyen kısımları görünebiliyor.Bunun hem olumlu hemde olumsuz sonucu var.Olumlu sonucu, farklı çözünürlüklerde projeniz tam ekran (fullscreen) olarak gözükecektir.Özellikle 16:9 oranlarından yüksek çözünürlük oranlarında bunu daha iyi görebiliyoruz.Olumsuz tarafı ise, projenizde belirlediğiniz kamera açısının dışına çıkabilmeniz.Bu aslında yerine göre olumlu, yerine göre olumsuz olabilir.Örneğin, bir strateji oyunu için daha fazla alanı görebilmeniz size avantaj kazandırır.Yada bir fps oyununda geniş açı görmek, odak noktanızı kaydıracağı için size dezavantaj sağlayacaktır.

Gördüğünüz gibi 16:9 oranına göre ayarladığımız kamera pencereyi 18:9 oranına ayarladığımız zaman, belirlediğimiz alanı (safe zone) korumak kaydıyla ekstra bir görüş alanı da sunmaktadır.Bazılarımız bunu hoş karşılamayabilir.Ayarladığımız kameranın açısının dışında bir görüntü istemeyebiliriz.Bunun çözümünü yazının ilerleyen kısımlarında değineceğim.Şimdi devam edelim.

Ekranımızın çözünürlük değerlerini bulalım.

Projemizi başlattığımız zaman ekran çözünürlüklerini ve bu çözünürlüğün oranını bulmak için basit bir kod yazacağız.Bunun için bir C# Script dosyası oluşturuyoruz ve editör yardımı ile açıyoruz.

using UnityEngine.UI;

Öncelikle bu kütüphaneyi script dosyamıza dahil ediyoruz.Böylece arayüz(UI) elemanlarımıza erişip, onları kontrol edebileceğiz.

public Text genislik;
public Text yukseklik;
public Text enBoyOrani;

Daha sonra bize gereken değişkenleri oluşturuyoruz.Biz arayüzdeki Text elemanlarına erişip, ekran üzerindeki değerleri bu değişkenlere atayacağımız için üç “3” adet Text değişkeni oluşturuyoruz.İlk satırdaki değişkene, ekranımızın genişlik değerini eşitleyeceğiz.İkinci satırdaki değişkene, ekranımızın yükseklik değerini eşitleyeceğiz.Son satırda bulunan değişkenimize ise, ekranımızın yükseklik/genişlik oranını eşitleyeceğiz.

Vector2 cozunurlukDegerleri = new Vector2 (Screen.width, Screen.height);
float ekranGenisligi = Screen.width;
float ekranYuksekligi = Screen.height;
float genislikYukseklikOrani = ekranGenisligi / ekranYuksekligi;

Şimdi bu kodları start() fonksiyonumuzun içerisine yazıyoruz.İlk satırda, yeni bir Vector2 değişkeni oluşturuyoruz.Bu değişkenimizin değerine, oluşturduğumuz Vector2 değişkenini eşitliyoruz.Bu değişkenimizin parametrelerine bakacak olursak, Screen fonksiyonu yardımı ile elde ettiğimiz genişlik (width) ve yükseklik (height) değerlerini barındırdığını göreceksiniz.

İkinci satırda float türünde yeni bir değişken oluşturuyoruz.Bu değişkenimize, Screen fonksiyonu yardımı ile bulduğumuz genişliği eşitliyoruz.Üçüncü satırda yine float türünde bir değişken oluşturuyoruz.Bu sefer Screen fonksiyonu ile bulduğumuz yükseklik değerini eşitliyoruz.Son satırdaki float değişkenimize ise, genişlik değerini içinde bulunduran değişken ile yükseklik değerini içinde bulunduran değişkeni birbirlerine bölerek bulduğumuz değeri eşitliyoruz.Bu bize, hedef çözünürlüğün ekran oranını veriyor.

genislik.text = "Genişlik : " + srcWidth.ToString();
yukseklik.text = "Yükseklik : " + srcHeight.ToString();
enBoyOrani.text = "En Boy Oranı : " + genislikYukseklikOrani.ToString();

Bulduğumuz bu değerleri hazırladığımız arayüzde göstermek için yukarıda bulunan kodları start fonksiyonumuzun devamına yazıyoruz.Üç satırda da, arayüz elemanlarımızın text bölümüne erişiyoruz.Daha sonra float türündeki değerleri, ToString fonksiyonu yadımı ile ekrana yazdırıyoruz.Bu fonksiyon önemli zira kullanmaz ise, konsol penceresinde hata mesajı gözükecektir.Bununda nedeni, string türünde değer alan bir fonksiyona int (integer) yada float türünde değer girdimiz içindir.

Belirlediğimiz kamera açısının dışına çıkmamak.

Yazımın ortalarında bazılarımızın belirlediğimiz kamera sınırlarının dışını görmek istemeyeceğini söylemiştim.Bunun içinde bir çözüm yolu bulunuyor.Yalnız, aynı diğer yöntemde olduğu gibi bu yönteminde olumlu ve olumsuz sonuçları içerisinde barındırdığını söylemem gerekiyor.Bunları yazımın devamında anlatacağım.

Bu yöntemde farklı çözünürlüklerde olmasına bakılmaksızın, ana kameranız için belirlediğiniz sınırları koruyarak ekranda gösteriyor.Yani bir ölçeklendirme yapıyoruz ve bu ölçeklendirmeyi ekranda gösteriyoruz.Tabi ölçeklendirme sadece kamera üzerinde gerçekleşiyor.Projenizde bulunan nesnelerin boyutlarına müdahale edilmiyor.Şimdi script dosyamıza geri dönelim ve kodlarımızı yazmaya başlayalım.

public Camera Kamera;

Öncelikle ana kameramızı kontrol edebilmek için, bir adet Camera değişkeni oluşturuyoruz.

float hedefOran = 16.0f / 9.0f;
float EkranOrani = (float)Screen.width / (float)Screen.height;
float EkranYuksekligi = EkranOrani / hedefOran;

Daha sonra start() fonksiyonumuzun içerisine bu kodları yazıyoruz.İlk satırda float türünde yeni bir değişken oluşturuyoruz.Bu değişkende projemizin ekran oranını belirliyoruz.Ben projemi 16:9 oranına göre ayarladığım için bu genişlik/yükseklik oranını baz alacağım.İkinci satırda yine float türünde bir değişken oluşturuyoruz.Bu değişkene ise, ekranımızın yükseklik ve genişlik değerlerini birbirlerine bölerek ortaya çıkan değeri eşitliyoruz.Bu bize, hedef çözünürlüğün ekran oranını veriyor.Son satırda ise değişkenimize az önce hesapladığımız oranı, hedef olarak belirlediğimiz orana bölerek eşitliyoruz.Bu şekilde ekranımızın yükseklik oranını buluyoruz.

Bu yükseklik oranını bulmamızın nedeni, farklı ekran çözünürlüklerinde kameramızı tekrar ayarlayıp/ayarlamayacağımızı tespit etmek içindir.Biraz daha açarsak, yukarıda 16:9 bir oranı hedef almıştık.Eğer bu oranlara sahip bir cihazda projemizi başlatırsak, kamera üzerinde herhangi bir ayar yapmamıza gerek olmayacaktır.Ancak farklı bir ekran oranına sahip bir cihazda, kameramız için belirlediğimiz açıyı korumak için tekrar bir ayar yapmamız gerekecektir.

if (EkranYuksekligi < 1.0f) {  
   Rect rect = Kamera.rect;
   rect.width = 1.0f;
   rect.height = EkranYuksekligi;
   rect.x = 0;
   rect.y = (1.0f - EkranYuksekligi) / 2.0f;
   Kamera.rect = rect;
}

Start() fonksiyonumuzun devamına bu kodları yazıyoruz.Birinci satırda yeni bir koşul oluşturuyoruz.Eğer değişkenimizin değeri, birden “1” küçükse koşulumuz aktif oluyor.İkinci satırda, Rect değişkenimize kameramızın Rect değerlerini tanımlıyoruz.Böylece bu değerleri değiştirebileceğiz.Üçüncü satırda rect değişkenimizin genişliğini bir “1” olarak belirliyoruz.

Dördüncü satırda ise yüksekliği, “EkranYuksekligi” değişkenimizin değerine eşitliyoruz.Beşinci satırda x eksenini, sıfıra “0” eşitliyoruz.Altıncı satırda ise y eksenini hesaplamak için küçük bir işlem gerçekleştiriyoruz.Burada yaptığımız işlemi, en boy oranını korumak için yapıyoruz.Son satırda ise kameramızın Rect değerlerini, biraz önce hesapladığımız “rect” değişkeninin değerlerine eşitliyoruz.

else {
         float EkranGenisligi = 1.0f / EkranYuksekligi;
         Rect rect = Kamera.rect;
         rect.width = EkranGenisligi;
         rect.height = 1.0f;
         rect.x = (1.0f - EkranGenisligi) / 2.0f;
         rect.y = 0;
         Kamera.rect = rect;
      }

Eğer koşulumuz doğru olmazsa yani belirlediğimiz kriterleri karşılamaz ise, bu sefer else kısmındaki kodlarımız aktif olacaktır.İkinci satırda float türünde bir değişken oluşturuyoruz.Burada ekran genişliğini tekrar ayarlamak için bir işlem yapıyoruz.Böylece bize gereken oranı buluyoruz.Üçüncü satırda Rect değişkenimize kameramızın Rect değerlerini tanımlıyoruz.Dördüncü satırda genişliği, “EkranGenisligi” değişkeninin değerini eşitliyoruz.

Beşinci satırda yüksekliği bire “1” eşitliyoruz.Çünkü yükseklik sadece sıfır ile bir (0-1) arasında bir değer alıyor.Altıncı satırda ise x ekseni için bir hesap yapıyoruz.Bu hesabı yapmamızın nedeni, belirlediğimiz kamera açısının dışının gösterilmemesi içindir.Yedinci satırda, y ekseninin değerini sıfır “0” olarak belirliyoruz.Sekizinci satırda ise, Rect değerlerini, biraz önce hesapladığımız “rect” değişkeninin değerlerine eşitliyoruz.

Burada yaptığımız işlemleri özetleyecek olursak eğer koşulumuz true ise, kamera üzerinde herhangi bir değişiklik yapmıyoruz.Ancak false ise, kameramız için belirlediğimiz açının da dışı gözükeceği için kameramız üzerinde yeniden bir Rect tanımlaması yapıyoruz.Kamera dışı nasıl gözükmeyecek derseniz, aşağıdaki görselden de anlaşılacaktır fakat açıklamasını yapayım.Belirlediğimiz oranın dışına çıkıldığı durumlarda, kamera sınırımızın dışı siyah şeritler (black line – black border) çekiliyor.

Gördüğünüz gibi, kamera açımız korunuyor.Ancak bu yolu tercih etmemizin de artık ve eksileri mevcut.Artı olarak, her çözünürlükte sadece bizim belirlediğimiz kamera açısı gözükecektir.Bu da, yapmış olduğumuz projede bir tutarlılık sağlayacaktır.Eksi olarak ise, projemizin tam ekran gözükmemesi ve yan taraflarda gözüken siyah şeritleri gösterebiliriz.

Evet bu dersimizin de sonuna geldik.Şimdi son olarak, ekranda hazırladığımız arayüz elemanlarını hazırladığımız script üzerine ekleyelim.Bunun için, C# Script dosyamızı ana kameramızın (main.camera) üzerine sürükleyip bırakalım.Daha sonra kameramızı ve Canvas içerisinde bulunan Text elemanlarını, script üzerindeki yerlerine ekleyelim.Artık test edebiliriz.Evet bir sonraki yazıda görüşmek üzere…