Unity’de Can Barı Nasıl Yapılır? (Health Bar)

Merhaba, bir önceki dersimizde Unity‘de birden fazla sesi nasıl kontrol edip çalabileceğimiz öğrenmiştik.Böylece yapmış olduğumuz projelerde, farklı sesleri tek bir nesne üzerinden çalabiliyorduk.Bugünkü dersimizde ise, Unity ile can barı yapımına bakacağız.Unity‘de can sistemi yapmanın birden fazla yolu olduğu için, alternatif yöntemlerin hepsini size göstermeye çalışacağım.Evet vakit kaybetmeden yeni bir proje oluşturalım ve dersimize başlayalım.

Kullanacağımız arayüzü hazırlayalım.

Evet bu projemizde sadece arayüz üzerinden devam edeceğimiz için herhangi bir senaryo kullanmayacağız.Şimdi arayüzümüzü (UI) oluşturmaya başlayalım.İlk olarak Hierarchy penceresinde bir Canvas nesnesi oluşturuyoruz.Bu Canvas nesnesine eklediğimiz elemanların farklı çözünürlükte bozulmaması için, Inspector penceresinde bulunan Canvas Scaler bileşenine geliyoruz.

Daha sonra UI Scaler Mode ayarını, Scale With Screen Size moduna getiriyoruz.Son olarak, aşağıda açılan  Reference Resolution bölümüne istediğimiz bir çözünürlüğü yazıyoruz.Bunu daha önceki yazıları okuyanlar gayet iyi bileceklerdir.Ancak ilk defa bu yazıyı okuyanlar içinde bir bilgi olsun.Evet arayüzümüzü oluşturmaya devam edelim.Canvas nesnemizin altına bir Panel nesnesi oluşturuyoruz.

Bu Panel nesnemizin rengini istediğiniz gibi ayarlayabilirsiniz.Bu nesneyi, arkaplanı göstermemek için oluşturduk.Evet şimdi projemizde kullanacağımız Button nesnelerini oluşturmaya başlayalım.Bu Button nesneleri yardımı ile, oluşturduğumuz can barlarını kontrol edeceğiz.Şimdi Panel nesnemizin içerisine bir Button nesnesi oluşturuyoruz.

Scene penceresinden, Button nesnemizi istediğimiz gibi ayarladıktan sonra üzerine tıklayarak bir kopya daha oluşturuyoruz.Daha sonra bu kopya Button nesnemizi yine Scene penceresinde bulunan araçlar yardımı ile istediğimiz noktaya taşıyoruz ve gerektiği gibi ayarlıyoruz.Evet sahnemizin şu anki hali aşağıdaki gibidir.

Slider kullanarak can barı yapmak.

Evet can barı yapmak için ilk yolumuz, Slider nesnesinden yararlanmaktır.Bunun için Panel nesnemizin içerisine bir Slider nesnesi ekliyoruz.Daha sonra Inspector penceresinde bulunan Slider bileşeninin, Interactable özelliğini false durumuna getiriyoruz.Şimdi Slider nesnesinin çocuk (child object) elemanı olan Handle Slide Area nesnesini siliyoruz.Şimdi Slider nesnemizin Inspector penceresinde bulunan Slider bileşenine tekrar geliyoruz.

Buradan Max Value değerini istediğimizi gibi belirliyoruz.Buraya yazdığımız değer, oyuncumuzun maksimum canını temsil edecektir.Scene penceresine bakacak olursak, Slider nesnemizin çok küçük olduğunu görüyoruz.Bunu düzelmek için aynı penceredeki araçları kullanabiliriz yada dört köşede bulunan çapalar ile de kolaylıkla ayarlama yapabiliriz.Tercih sizin.Şimdi tek yapmamız gereken, Background ve Fill çocuk (child object)  nesnelerinin Inspector penceresinde bulunan Source Image bölümünü boşaltmak.Bunu yaptıktan sonra can barımız hazır hale gelecektir.

Image kullanarak can barı yapmak.

Evet şimdi gelelim ikinci yöntemimiz olan, Image nesnesi ile can barı yapmaya.Bu yöntem ilk yönteme göre daha basittir.Şimdi Panel nesnemizin içerisine bir Image nesnesi ekliyoruz.Daha sonra Inspector penceresinde bulunan Source Image bölümünü boşaltıyoruz.Bunu yapmamızın nedeni, düz bir  arkaplan elde etmek içindir.Scene penceresinden bu Image nesnemizi istediğimiz oranlara ve konuma getiriyoruz.

Şimdi bu nesnemizi seçerek bir kopya oluşturuyoruz.Oluşturduğumuz bu kopya Image nesnemizi, ilk nesnemizin çocuk nesnesi haline getirmemiz gerekiyor.Bunu yapmak içinde kopya olan nesneyi sürükleyerek, asıl nesnemizin üzerine bırakıyoruz.Şimdi ikinci nesnenin Inspector penceresinde bulunan Source Image bölümüne bir resim eklememiz gerekiyor.

Bunun için düz bir renk olan (tavsiyem beyaz) image dosyası yeterli olacaktır.Bu resmi projemizi dahil ettikten sonra bir işlemden geçirmemiz gerekiyor.Aksi taktirde kullanamayız.Projemize eklediğimiz resmi seçtikten sonra Inspector penceresinde, Texture Type modunu Sprite (2D and UI) olarak belirlememiz gerekiyor.Artık resmimizi Source Image bölümüne ekleyebiliriz.

Bu bölüme resmimizi ekledikten sonra hemen aşağıda farklı özellikler açılıyor.Image Type özelliğini, Filled olarak belirliyoruz.Fill Method özelliğini, Horizontal olarak belirliyoruz.Fill Origin özelliğini, Left olarak belirliyoruz.Fill Amount değeri ise, sıfır “0” ile bir “1” arasında bir değer alıyor.Bu özelliği biz, can barımızın ne kadar dolu olduğunu göstermek ve canımızı kontrol etmek için kullanacağız.

Slider ve Image kullanarak can barı yapmak.

Evet üçüncü yöntemimiz, hem Slider hemde Image kullanarak can barı oluşturmak.Bu yöntemi tercih etmek ister misiniz bilmem ama bu da alternatif bir yol olduğu için göstermek istedim.Şimdi bir Image nesnesi oluşturuyoruz.Daha sonra Inspector penceresinde bulunan Source Image bölümünü boşaltıyoruz.Yine buradaki Color bölümünden istediğimiz bir rengi seçebilirsiniz.

Scene penceresinden Image nesnemizi istediğimiz gibi ayarlıyoruz.Daha sonra bu nesnemizden bir kopya alıyoruz.Bu kopya Image nesnemizin Source Image bölümüne, ikinci yöntemde olduğu gibi bir resim eklememiz gerekiyor.Texture Type modunu yine değiştiriyoruz.Resimi ekledikten sonra, Image Type özelliğini, Simple olarak kalıyor.Daha sonra bir Text nesnesi oluşturuyoruz.Bu Text nesnesi ile, kalan canımızı ekranda gösterebileceğiz.

Text nesnemizi Scene penceresinde ayarladıktan sonra tekrar ilk oluşturduğumuz Image nesnesine dönüyoruz.İlk derken yani bu iki nesnenin ebeveyn (parent object) nesnesi olanı kastediyorum.Bu nesnemizi seçtikten sonra Inspector penceresinde Add Component butonu ile yeni bir Slider bileşeni ekliyoruz.Sırasıyla, Interactable özelliğini false durumuna getiriyoruz.

Sonra Transition ve Navigation özelliğini None yapıyoruz.Fill Rect bölümüne, az önce kopya olarak oluşturduğumuz Image nesnemizi sürükleyerek atıyoruz.Aşağıda bulunan Max Value değerini istediğimiz gibi ayarlıyoruz.Şimdi Add Component butonu ile yeni bir Outline bileşeni ekliyoruz.Bu bileşen ile nesnemize kenarlık verebiliyoruz.X ve Y değerlerini istediğimiz gibi ayarladıktan sonra rengimizi seçiyoruz.

Image kullanarak dairesel can barı yapmak.

Evet şimdiye kadar hep düz can barları yaptık.Ancak bunu istersek dairesel olarak da yapabiliyoruz.Bunun için yeni bir Image nesnesi oluşturuyoruz.Source Image bölümüne, dairesel olan bir resim ekliyoruz.Tabi Texture Type moduna dikkat ediyoruz.Resmi ekledikten sonra, Image Type özelliğini, Simple olarak kalıyor.Şimdi bu Image nesnemizden bir kopya alıyoruz.Daha sonra bu kopya nesnemizi sürükleyerek asıl nesnemizin üzerine bırakıyoruz.

Şimdi çocuk nesne olan yani kopya nesnemizi seçiyoruz.Source Image bölümüne, yine dairesel olan bir resim ekliyoruz.Burada aynı resmi kullanabilirsiniz.Ancak ben ortası saydam olan bir resim kullandım.Eğer aynı resmi kullanacaksanız, Scene penceresinde ikinci resmin boyutlarını değiştirmeniz gerekiyor.Aksi taktirde üst üste gelen iki Image nesneniz olacaktır.

Daha sonra çocuk nesnemizin Image Type özelliğini, Filled olarak değiştiryoruz.Fill Method özelliğini, Radial 360 olarak belirliyoruz.Fill Origin özelliğini, Bottom olarak belirliyoruz.Clockwise özelliğinin değerini, saat yönüne yada tersine doğru hareket etmesi için değiştirebilirsiniz.Ve artık dairesel can barımız hazırlandı.

Şu ana kadar öğrendiğimiz yöntemlerde can barları, tek renk üzerinden oluşturmaya dayalıydı.Bunu basit olması açısından tercih ettim.Ancak bir projede tabi ki arayüzler (UI) bu şekilde kalmıyorlar.Source Image bölümüne ekleyeceğimiz arayüz kaplamaları ile istediğimiz şekillerde can barları oluşturabiliriz.Aşağıdaki resimde iki farklı arayüz daha oluşturdum.Örnek olması açısından inceleyebilirsiniz.

Can barlarını kontrol edelim.

Evet buraya kadar, sadece projemizde kullanacağımız arayüzü hazırlamış olduk.Şimdi bu can barlarını nasıl kontrol edebileceğimizi öğrenelim.Ben yukarıdaki resimde de gördüğünüz gibi altı “6” tane can barı oluşturdum.Kodları uzun tutmamak adına, sadece tek bir Slider ve Image bileşeninin kontrolünü anlatacağım.Zaten diğerleri de birbirlerinin kopyası olacağı için sorun olmayacaktır.İlk olarak yeni bir C# Script dosyası oluşturuyoruz.Daha sonra bu script dosyamızı editör yardımı ile açıyoruz.

using UnityEngine.UI;

Şimdi ilk olarak, script dosyamıza bu kütüphaneyi dahil ediyoruz.Eğer bu kütüphaneyi dahil etmezsek, Unity‘de bulunan arayüz (UI) elemanlarına erişim sağlayamayız.

public Slider BirinciCanBari; 
public Image IkinciCanBari; 
public Text IkıncıCanBariYazisi;
public float DoluCanimiz;
public float Canimiz;

Evet şimdi projemizde kullanacağımız değişkenleri oluşturalım.İlk satırda Slider değişkeni oluşturuyoruz.Bu değişken ile Slider kullanarak oluşturduğumuz can barını kontrol edeceğiz.İkinci satırda Image değişkeni oluşturuyoruz.Bu değişken ile de Image kullanarak oluşturduğumuz can barını kontrol edeceğiz.Üçüncü satırda ise Text değişkeni oluşturuyoruz.Bu değişkeni ise, can barı üzerine eklediğimiz yazı bildirimini kontrol edeceğiz.Dördüncü ve beşinci satırlarda ise float türünde oluşturduğumuz değişkenler ile toplam ve o anki canımızı kontrol edeceğiz.

BirinciCanBari = GameObject.FindWithTag("canbari1").GetComponent<Slider> ();
IkinciCanBari = GameObject.FindWithTag("canbari2").GetComponent<Image> ();
DoluCanimiz = 100f;
Canimiz = DoluCanimiz;

Evet şimdi start() fonksiyonumuzun içerisine bu kodları yazıyoruz.İlk satırda değişkenimize, etiketi “canbari1” olan nesnenin Slider bileşenini tanımlıyoruz.İkinci satırda değişkenimize, etiketi “canbari2” olan nesnenin bu sefer Image bileşenini tanımlıyoruz.Böylece projemizi başlattığımız zaman, otomatik olarak script üzerindeki yerlerine arayüz elemanları eklenecekler.Üçüncü satırda ise, “DoluCanimiz” değişkenimize bir değer veriyoruz.Bu değer bizim maksimum canımızı temsil edecektir.Son satırda, “Canimiz” değişkenimizin değerini “DoluCanimiz” değişkenimizin değerine eşitliyoruz.

void CanBarlariniKontrolEt () {
 BirinciCanBari.value = Canimiz; 
 IkinciCanBari.fillAmount = Canimiz / DoluCanimiz; 
 IkinciCanBariYazisi.text = Canimiz+"/100";
}

Evet şimdi update() fonksiyonumuzun içerisine bu kodları yazıyoruz.İlk satırda yeni bir fonksiyon oluşturuyoruz.İkinci satırda “BirinciCanBari” değişkenimizin değerini kontrol etmek için, value özelliğine erişiyoruz ve değerini “Canimiz” değişkeninin değerine eşitliyoruz.

Üçüncü satırda ise değişkenimizin değerini fillAmount özelliğine erişerek, “Canimiz / DoluCanimiz” olacak şekilde tanımlıyoruz.Bunu yapmamızın nedeni ise fillAmount özelliği, sıfır “0” ile bir “1” arasında bir değer alıyor.Bu yüzden basit bir işlem yapmamız gerekiyor.Dördüncü satırda, “IkinciCanBariYazisi” değişkenimizin text değerine erişiyoruz ve (Canimiz+”/100″) olacak şekilde değerini değiştiriyoruz.

public void CanDoldur (int Can) {
   Canimiz += Can;
}

public void HasarVer (int Hasar) {
   Canimiz -= Hasar;
}

Evet şimdi iki parametreli fonksiyon daha oluşturuyoruz.Bu fonksiyonları, sahnemizde bulunan Button nesnelerine ekleyeceğiz.Böylece can barlarını doldurup, eksiltebileceğiz.Her iki fonksiyonda da, int (integer) türünde parametreler oluşturuyoruz.Daha sonra bir fonksiyonda, “+=” ile belirlediğimiz kadar can verebilirken, diğerinde “-=” belirlediğimiz kadar hasar verebiliyoruz.

if (Canimiz >= DoluCanimiz) {
   Canimiz = DoluCanimiz;
}
if (Canimiz <= 0) {
   Canimiz = 0;
}
CanBarlariniKontrolEt ();

Son olarak update() fonksiyonumuzun içerisine bu kodları yazıyoruz.İlk satırda yeni bir koşul oluşturuyoruz.Eğer o anki canımız, maksimum canımıza eşit veya daha büyükse koşulumuz çalışmaya başlıyor.Maksimum candan nasıl büyük olabilir diyorsanız, biz can verme butonuna sürekli basarsak belli oranca canımız artmaya devam edecektir.İşte bunun önüne geçmek için böyle bir koşul oluşturduk.ikinci satırda, böyle bir durum olursa hemen o anki canımızı, “DoluCanimiz” değişkenin değerine eşitliyor.

Dördüncü satırda yine bir koşul oluşturuyoruz.Eğer o anki canımızın değeri sıfıra “0” eşit yada altına düşerse koşulumuz çalışmaya başlıyor.Bu koşulumuz ise, hasar verme butonuna sürekli basıp canımızı eksilere düşürmemizi engellemek için bulunuyor.Beşinci satırda, böyle bir durum olursa hemen canımızı sıfıra “0” eşitliyor.Son satırda ise, CanBarlariniKontrolEt() fonksiyonumuzu çağırıyoruz.

Evet şimdi Hierarchy penceresinde boş bir nesne oluşturuyoruz.Daha sonra bu C# Script dosyamızı sürükleyerek, boş nesnemizin üzerine bırakıyoruz.Daha sonra Button nesnelerinin On Click bölümüne bu boş nesnemizi sürükleyip bırakıyoruz.Ardından butonlar için yaptığımız fonksiyonları seçiyoruz ve istediğimiz bir değeri yazıyoruz.Artık projemizi test edebiliriz.Evet bu projemizin de sonuna geldik.Bir sonraki yazıda görüşmek üzere…