Oyun Tasarımı Destek Sitesi

Merhabalar,

Bu derste, Unity oyunlarınıza nasıl dinamik UI panelleri ekleyebileceğinizi göstereceğim. Bu paneller, tıpkı editördeki paneller gibi, hareket ettirilebiliyor, yeniden boyutlandırılabiliyor ve diğer panellerin yanına sekme olarak atanabiliyor.

Asset Store: https://assetstore.unity.com/packages/tools/gui/dynamic-panels-114126

Alternatif link: https://github.com/yasirkula/UnityDynamicPanels/releases

WebGL demo: http://yasirkula.net/DynamicPanelsDemo/

Bu asset’i, Oyun İçi Debug Konsolu‘nu ve Oyun İçi Inspector‘u kullanarak oluşturduğum sahneden bir resmi aşağıda görebilirsiniz:

Detaylar için yazının devamını okuyabilirsiniz…

Öncelikle indirdiğiniz unitypackage‘ı Assets-Import Package yoluyla projenize import edin. Ardından UI paneller hangi objenin child’ı olsun istiyorsanız, o objeye Dynamic Panels Canvas component’i verin. Dilerseniz bu component’i direkt sahnenizdeki Canvas‘a da verebilirsiniz. Burada bilmeniz gereken bir nokta, Dynamic Panels Canvas component’ini hangi objeye verirseniz, panellerin hareket alanı o objenin RectTransform‘unun kapladığı alanla sınırlı olur. Yani eğer canvas’a verirseniz paneller canvas’ın tamamını kullanabilirken, canvas’ın sadece sol yarısını kaplayan bir RectTransform’a verirseniz paneller canvas’ın sağ yarısına dokunmazlar.

Editörden de aşina olabileceğiniz üzere, iki çeşit panel vardır: kenetlenmiş (docked) panel ve serbest panel. Bir paneli sekmesinden tutup diğer panellerin kenarlarına veya ekranın bir kenarına bırakınca, paneli oraya kenetlemek mümkündür. Bu şekilde kenetlenmiş paneller birlikte hareket ederler. Veya kenetlenmiş bir paneli sekmesinden tutup boş bir yere sürükleyince, o paneli serbest hale getirmek mümkündür. Bu durumda o panel, diğer panellerden bağımsız bir şekilde serbestçe hareket edebilir. Bu davranışlar oyun içi paneller için de geçerlidir.

Şimdi panelleri oluşturmaya başlayabiliriz. Bu sistemde paneller, oyun esnasında dinamik olarak oluşurlar. Bizim sadece Dynamic Panels Canvas component’inin Inspector‘undan, hangi UI objelerinin panele dönüşmesini istediğimizi söylememiz yeterli:

Burada 3 ana bölme karşımıza çıkıyor:

A) Properties

Minimum Free Space: Dynamic Panels Canvas’ın içerisinde daime panellerin kapatamayacağı bir boşluk vardır. Bu değer, boşluğun minimum boyutunu belirler. Bu kadar az boşluk kaldığında artık paneller bu boşluğu dolduracak şekilde yeniden boyutlanamazlar.

Panel Resizable Area Length: Panelleri yeniden boyutlandırmaya yarayan görünmez alanın boyutunu belirler. Bu alan ne kadar büyük olursa panelleri yeniden boyutlandırmak o kadar rahat olur.

Canvas Anchor Zone Length: Bir paneli sekmesinden tutup sürükleyerek Dynamic Panels Canvas’ın bir kenarına yaklaştırınca, paneli canvas’ın o kenarına kenetlemek (dock) mümkündür. Bu değer, paneli canvas’a ne kadar yaklaştırınca ona kenetlenebileceğimizi belirler.

Panel Anchor Zone Length: Bir paneli sekmesinden tutup sürükleyerek başka bir panelin bir kenarına yaklaştırınca, paneli o diğer panele kenetlemek mümkündür (eğer diğer panel halihazırda kenetli bir panel ise). Bu değer, paneli diğer panelin kenarına ne kadar yaklaştırınca ona kenetlenebileceğimizi belirler.

B) Free Panels

Oyunun başında serbest olmasını istediğiniz panelleri burada belirleyebilirsiniz. Add New butonuna basarak yeni bir serbest panel oluşturup ardından + butonuna tıklayarak bu panele sekmeler ekleyebilirsiniz. Her bir sekmenin 4 parametresi vardır:

Content: O sekme aktifken, panelin içerisinde hangi RectTransform‘un gösterileceğini belirler. Panel olmasını istediğiniz RectTransform’u buraya vermelisiniz.

Label/Icon: Sekmenin ismini ve (tercihen) ikonunu belirlemeye yarar.

Min Size (XY): Content‘in minimum boyutunu belirlemeye yarar. Paneli yeniden boyutlandırırken bu boyutun altına inilemez.

Mevcut bir serbest paneli silmek için, o panelin bir sekmesini seçin ve Remove Selected butonuna tıklayın.

C) Docked Panels

Oyunun başında kenetli olmasını istediğiniz panelleri burada belirleyebilirsiniz. “= Docked Panels =” başlığının altındaki büyük önizleme alanında yer alan bir bölmeye tıklayıp Dock new panel inside butonlarını kullanarak o bölmeye yeni bir panel kenetleyebilirsiniz. Ardından o panele sekmelerini vermeyi unutmayın. Dilerseniz Dock new panel to canvas butonlarını kullanarak direkt canvas’ın kenarlarına kenetli paneller de oluşturabilirsiniz.

Eğer bir noktada takılırsanız Plugins/DynamicPanels/DemoScene sahnesini açıp oradan kopya çekebilirsiniz. Şimdiye kadar demeyi unuttum ama demo sahnesinde de göreceğiniz üzere, dilerseniz aynı sahnede birden çok Dynamic Panels Canvas component’i bulundurabilirsiniz. Sürükle-bırak ile de panellere bu canvas’lar arasında geçiş yaptırabilirsiniz.

Bu dersin burada sonuna gelmiş bulunmaktayız. Sonraki dersimizde görüşmek üzere!