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

Merhaba, bir önceki dersimizde Unity ile OverlapSphere kullanımını öğrenmiştik.Böylece yapmış olduğumuz projelerde bir nesneye 360 derece bir çarpışma alanı sağlayabiliyorduk.Bugünkü dersimizde ise, Unity‘de 2D projeler için ekran çözünürlüğü ayarlamayı öğreneceğiz.Daha önceki yazılara bakacak olursanız, Unity ile 3D projeler içinde ekran ölçeklendirmek ile ilgili yazımı bulabilirsiniz.Şimdi yeni bir 2D proje oluşturalım ve dersimize başlayalım.

Sahnemizi oluşturmaya başlayalım.

Evet bu dersimizdeki senaryoyu öncelikle inceleyelim.Bu yazının konusu ekran çözünürlüğü ayarlamak olduğu için senaryomuzda, projemizdeki kameranın sınırlarını çizmek olacaktır.Yani, kameranın açısı bizim belirlediğimiz sınırların dışına çıkmaması gerekiyor.Bunu nasıl yapacağımızı da birazdan öğreneceğiz.Şimdi sahnemizi oluşturmaya başlayabiliriz.İlk olarak projemizde çalışacağımız ekran oranını belirlememiz gerekiyor.

Bunun için Game penceresinde bulunan bölümden bir ekran oranı yada sizin oluşturduğunuz özel bir çözünürlüğü seçiyoruz.Ben bu projemiz için, 16:9 bir ekran oranı tercih ettim.Bu ayarı daha projenin ilk aşamalarında yapmak önemlidir.Çünkü seçtiğimiz oran, bizim referans çizgilerimizi oluşturacağı için sahnemizdeki nesneleri de bu çizgiye göre yerleştireceğiz.Şimdi ilk olarak projemizde kullanacağımız nesneleri Unity‘de Project penceresine ekleyelim.

Kameramızın sınırlarını belirlemek için, Scene penceresine bir arkaplan resmi ekleyeceğiz.Ancak bundan önce Project penceresinde bulunan resmimizi seçiyoruz ve Inspector penceresinde bulunan Texture Type ayarını Sprite (2D and UI) olarak değiştiriyoruz.Biz 2D bir proje üzerinde çalıştığımız için bu bölümdeki bir diğer önemli ayar ise, Pixels Per Unit ayarıdır.Kullandığımız resmin boyutu örneğin 600×600 ise, bu bölüme 600 yazmamız gerekiyor.Çünkü farklı çözünürlük değerlerinde en iyi sonuçları almak için bunu yapıyoruz.

Daha sonra Hierachy penceresinde Main Camera nesnemizi seçiyoruz.Inspector penceremizde yapmamız gerek birkaç ayar bulunuyor.Öncelikle projemizin başlangıcında kameramızın projeksiyon modu Perspective olarak geliyor.Biz bu modu Orthographic olarak değiştiriyoruz.Perspective  ve Orthographic arasındaki farka bakacak olursak kısaca, Perspective  kamera sahnede bir derinlik duygusu yaratır.Orthographic kamera ise, nesneleri derinlik duygusu yaratmadan çizer.Bu nedenle daha çok 2D projelerde kullanılır.

Evet arkaplan yerleştirdik ve kamera ayarımızı yaptık.Şimdi kameramızın sınırı olarak bu arkaplanı kullanacağız.Bu yüzden sahnemize yerleştireceğimiz tüm nesneleri bu arkaplan çerçevesi içerisinde konumlandıracağız.Şimdi internetten bulduğumuz çeşitli pixel block parçalarını sahnemize yerleştiriyoruz.Burada amaç kamera sınırlarını açıkça görmek olduğu için, yerleştirdiğiniz parçaların sahne ile uyumu yada ne olduğu önem arz etmiyor.

Arayüz elemanlarını oluşturmaya başlayalım.

Evet şimdi farklı çözünürlük değerlerini ve bu değerlerin oranlarını görmek için basit bir arayüz (UI) paneli hazırlayacağız.Bu aşmayı yapmanız şart değil fakat ekran çözünürlüğü değiştiği zaman aradaki farklılıkları görmek istiyorsanız, bu arayüz panelini oluşturabilirsiniz.İlk olarak Hierachy penceresinde sağ tıklıyoruz ve UI bölümünden bir Canvas ekliyoruz.Farklı çözünürlüklerde arayüz panelimizin düzgün görünmesi için birkaç ayar yapmamız gerekiyor.

Hierachy penceresinden Canvas nesnemizi seçiyoruz.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 Canvas 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 istediğiniz bir bölgesine konumlandırıyoruz.Daha sonra bu Panel elemanımızın da üzerine sağ tıklayarak,bir adet Text elemanı ekliyoruz.Bu Text elemanını konumlandırmak için Scene penceresinde gördüğümüz çapaları (anchors) kullanıyoruz.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 daha ayrıntılı anlatmıştım.Dileyen eski yazılara göz atabilir.

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

Evet şimdi farklı çözünürlük değerlerini ve ekran oranlarını hazırladığımız arayüz panelinde göstermek için kodlarımızı yazacağız.Bunun için Project penceresinde yeni bir C# Script dosyası oluşturuyoruz.Daha sonra bu script dosyamızı bir editör yardımı ile açıyoruz.Artık kodlarımızı yazmaya başlayabiliriz.

using UnityEngine.UI;

Öncelikle bu kütüphaneyi script dosyamıza eklememiz gerekiyor.Böylelikle arayüz (UI) elemanlarımızı kontrol edebileceğiz.

public Camera kamera;
public SpriteRenderer cerceveAlani;
public Text genislik;
public Text yukseklik;
public Text enBoyOrani;

Daha sonra script dosyamızda kullanacağımız değişkenleri tanımlıyoruz.İlk satırda ana kameramızı kontrol edebilmek için Camera değişkeni oluşturuyoruz.İkinci satırda sahnemizdeki resim nesnelerini kontrol edebilmek için SpriteRenderer değişkeni oluşturuyoruz.Üçüncü ve beşinci satırlar arasında 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.

void ArayuzKontrolu() {
   float ekranGenisligi = Screen.width;
   float ekranYuksekligi = Screen.height;
   float genislikYukseklikOrani = ekranGenisligi / ekranYuksekligi;
   genislik.text = "Genişlik : " + ekranGenisligi.ToString();
   yukseklik.text = "Yükseklik : " + ekranYuksekligi.ToString();
   enBoyOrani.text = "En Boy Oranı : " + genislikYukseklikOrani.ToString();
}

Evet değişkenlerimizi oluşturduk.Şimdi yeni bir fonksiyon oluşturuyoruz.Bu fonksiyon ile arayüz elemanlarını kontrol edeceğiz.İkinci ve üçüncü satırlarda float türlerinde değişkenler oluşturuyoruz.İkinci satırda ekranımızın genişlik (Screen.width) değerini, üçüncü satırda ise ekranımızın yükseklik (Screen.height) değerini bu değişkenlere tanımlıyoruz.Dördüncü satırda yine bir float türünde değişken oluşturuyoruz.

Bu değikene ise, ekranımızın en boy oranını tanımlıyoruz.Bu oranı bulmak içinse,  “ekranGenisligi” değişkenindeki değeri “ekranYuksekligi” değişkenindeki değere bölüyoruz.Beşinci ve yedinci satırlar arasında, arayüz elemanlarımızın text bölümlerine 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.

Kamera açımızı sabitleyelim.

void OthographicKamera () {
   float ekranGenisligi = Screen.width;
   float ekranYuksekligi = Screen.height;
   float ekranOrani = ekranGenisligi / ekranYuksekligi;
   float cerceveOrani = cerceveAlani.bounds.size.x / cerceveAlani.bounds.size.y;
   ...
}

Evet arayüz kontrolümüzü oluşturduk.Şimdi ise yazımızın asıl konusuna geçebiliriz.Kameramızın açısını sabitlemek için Perspective kamera modundan,  Orthographic kamera moduna geçmiştik.Bunun nedenini ve iki mod arasındaki farkı artık biliyoruz.Şimdi ise farklı çözünürlük değerlerinde kamera açımızı nasıl koruyacağımızı öğrenelim.

float ekranOrani = (float)Screen.width / (float)Screen.height;

İkinci ve dördüncü satırlar arasında yukarıda anlattığım aynı kodları kullanıyoruz.Bunları tekrara düşmemek için ikinci bir kere anlatmayacağım.Bunun yerine ikinci ve dördüncü satırlar arasını nasıl tek satıra düşürebileceğimizi göstereceğim.Yukarıdaki koda bakacak olursak aslında aynı işlevleri yerine getiriyor.Yani kullandığımız ekran oranını yine bize veriyor.Fakat bu işlemi üç satırda yapmak yerine tek satırda yapıyor.

Beşinci satırda ise yeni bir float türünde değişken oluşturuyoruz.Bu değişkene kamera açımızı sabitlemek için kullanacağımız referans çerçeve oranımızı tanımlayacağız.Buradaki bounds.size kodu, nesnenin ilgili eksendeki sınır boyutlarını almak için kullanılır.Yani “bounds.size.x”, nesnenin genişlik boyutunu alırken, “bounds.size.y” nesnenin yükseklik boyutunu alır.İki değerin birbirine bölünmesinden de, çerçeve oranı bulmuş oluyoruz.

if(ekranOrani >= cerceveOrani){
   kamera.orthographicSize = cerceveAlani.bounds.size.y / 2;
}else{
   float aradakiOranFarki = cerceveOrani / ekranOrani;
   kamera.orthographicSize = cerceveAlani.bounds.size.y / 2 * aradakiOranFarki;
}

Evet şimdi fonksiyonumuzun devamına yukarıdaki kodları yazıyoruz.Birinci satırda yeni bir koşul oluşturuyoruz.Eğer “ekranOrani” değişkenimizin değeri, “cerceveOrani” değişkenimizin değerine eşit yada büyükse koşulumuz aktif oluyor.İkinci satırda kameramızın orthographicSize değerine erişiyoruz.Bu değeri, referans olarak kullandığımız “cerceveAlani” değişkenine tanımlı nesnemizin genişliğini (bounds.size.y) ikiye “2” bölerek çıkan sonuca eşitliyoruz.

Buradaki iki “2” nerden çıktı diye düşünebilirsiniz.Bu değeri biz belirlemiyoruz.Çünkü Orthographic kamera modu, ekranın yüksekliğinin yarısı kadarıdır.Dördüncü satıra bakacak olursak, koşulumuzun false yani geçerli olmadığı (else) durumu baz alıyor.Burada yeni bir float türünde değişken oluşturuyoruz.Bu değişkene “cerceveOrani” değişkeninin değerini, “ekranOrani” değişkeninin değerini bölerek çıkan onucu tanımlıyoruz.Bulduğumuz bu değeri birazdan nerede ve neden kullandığımızı açıklayacağım.

Beşinci satırda, yine kameramızın orthographicSize değerine erişiyoruz.Bu değeri, referans olarak kullandığımız “cerceveAlani” değişkenine tanımlı nesnemizin genişliğini (bounds.size.y) ikiye “2” bölüyoruz ve bu sefer ilkinden farklı olarak “aradakiOranFarki” değişkenimizin değeri ile çarpıyoruz.Şimdi bu bize ne farklılıklar sağladı aşağıdaki resimlere bakarak açıklayalım.

Evet her iki kodu, aradaki farkı daha iyi anlayabilmeniz için 800×480 çözünürlük değerlerinde test ettim.Soldaki resimde orthographicSize değerini “aradakiOranFarki” değişkeninin değeri ile çarpılmadan nasıl sonuç verdiğini görüyoruz.Görüldüğü gibi kameramız oluşan boşlukları doldurmak için ekrana yakınlaşmış.Bunun sonucunda ise, oluştırduğumuz sahnenin bir kısmını göremiyoruz.Bu da bizim yapmış olduğumuz projelerde istemediğimiz bir durumu oluşturuyor.

İkinci yani sağdaki resime bakacak olursak, orthographicSize değerini “aradakiOranFarki” değişkeninin değeri ile çarpıldığı zaman nasıl sonuç verdiğini görüyoruz.Burada kameramız sahnemizi tam olarak ekrana yerleştirmek için ilkinin aksine uzaklaştırmış.Böylece sahnemizi tam olarak görebiliyoruz.Fakat bu seferde safe zone dediğimiz yani ekranın altında ve üstünde siyah boşluklar oluyor.Tabi kimse 800×480 bir çözünürlüğü referans alarak projesini oluşturmaz.Yada günümüzde bu çözünürlük değerlerine sahip bir cihaz artık kullanılmıyor.

Buradaki örneği aslında bir filmi yada diziyi izlerken de görebiliyoruz.Şöyleki, televizyonda bir film yada dizi izlerken altta ve üstte bu safe zone bölgelerini görebiliyoruz.Bunun da nedeni yine yukarıda bahsettiğim gibi, görüntüyü ekrana tam yansıtmak istediğinden kaynaklanıyor.Dikkat ederseniz, televizyon ayarlarında görüntüyü yakınlaştırma yada tam ekrana yansıtma ayarları bulunuyor.İşte bizde aslında aynı prensibi kullanarak projemizde bu ayarları yapıyoruz.

ArayuzKontrolu();
OthographicKamera();

Ancak aradaki farkı en iyi bu şekilde anlayacağınızı düşündüm.Şimdi script dosyamızda oluşturduğumuz iki fonksiyomuz var.Artık bunları update() yöntemi içerisine yazarak kullanabiliriz.Evet bu projemizin de sonuna gelmiş bulunuyoruz.Oluşturduğumuz script dosyamızı sürükleyerek, Main Camera nesnemizin üzerine bırakıyoruz.Daha sonra Inspector penceresinde ilgili bölümlere sırasıyla kameramızı, referans alacağımız çerçevemizi, arayüz elemanlarımızı kontrol etmek için genişlik, yükseklik ve en boy oranı Text nesnelerini sürükleyerek bırakıyoruz.Artık test edebiliriz.Evet bir sonraki yazıda görüşmek üzere…