Unity'den Anka Kuş (Flappy Bird) Yapımı

  

Hepinize merhaba,

Bu derste, popüler Flappy Bird oyununu Unity‘de sıfırdan tekrar programlamaya çalışacağız. Oyunumuzda bulunacak özellikler şunlar:

• Ekrana tıklayınca kuşun zıplaması 
• Kuşun kanat çırpması (bir animasyona sahip olması)
• Engellerin gerçek-zamanlı rastgele şekilde oluşturulması
• Engele çarpınca ölmek
• Yüksekskorun cihazda kayıt altına alınması
• Çeşitli ses efektleri

Projenin bitmiş hali: https://app.box.com/s/pduuj3duocmx4c8izxjj (Alternatif link)

Derse başlamadan önce, Unity’nin arayüzüne ve script yazmaya az da olsa aşina olmanız çok işinize yarayacaktır.

Öncelikle yeni bir Unity projesi oluşturun. Projeye istediğiniz ismi verin ve “Template” olarak 2D‘yi seçin.

Eğer şimdi Game paneline geçiş yaparsanız arkaplanın boğuk bir mavi renkte olduğunu göreceksiniz. İsterseniz biz bu rengi biraz açalım. Bunun için sahnenizdeki Main Camera‘yı seçip Background değerini 28,191,214 yapın:

Başta oyunun görsellerini bir şekilde kendim hazırlamayı düşünüyordum ama sonradan bu işte yetersiz olduğumu fark ettim ve lanica.co/flappy-clone/‘dan oyunun bir klonunun görsellerini aldım. Klon oyunumuzda da bu görselleri kullanacağız. Bu projeyi öğrenme amaçlı yapacağımız için sorun çıkmayacaktır. Ben proje için gerekli tüm görselleri ve sesleri bir Winrar arşivinde depoladım. Siz direkt onu indirin: https://app.box.com/s/kct22wtzp25s4bi2h1ag (Alternatif link)

NOT: Bir alttaki paragrafı okumadan bu notu okumanızın önemli olduğunu düşünüyorum. Unity’nin yeni sürümleriyle beraber Project panelinin tarzı değişti. Artık iki farklı şekilde görebiliyoruz Project panelini: tek hücreli ve iki hücreli olarak. Yeni bir proje açtığınız zaman Project paneli otomatik olarak iki hücreli şekilde gelir ama ben bu yeni stili sevmiyorum ve eski tek hücreli stili kullanıyorum. Dersi anlatırken de tek hücreli stili kullanarak anlatıyorum. Eğer herhangi bir sıkıntı yaşamak istemiyorsanız siz de tek hücreli Project paneline geçiş yapın. Bunu yapmak çok kolay: Project panelinin sağında bir kilit simgesi, onun da sağında bir menü simgesi var. İşte o menü simgesine tıklayın ve One Column Layout seçeneğini seçin:

Şimdi Project panelinde Create-Folder yolunu izleyerek Sprites adında yeni bir klasör oluşturun ve Winrar arşivindeki sprite’leri bu klasöre atın. Eğer sürükle-bırak işe yaramıyorsa Assets-Import New Asset… yolunu izleyerek tüm sprite’leri tek tek import edin.

Sonra flappy1 spritesini seçip Inspector panelinde yer alan Compression kısmını None olarak değiştirin ve alttan Apply butonuna basın. Bu işlemi flappy2 ve flappy3 spriteleri için de yapın. Eğer bunu yapmazsak kuş biraz eğim aldığında etrafında istenmeyen siyah çizgiler oluşuyor ama artık böyle bir sorun yaşamayacağız.

Kuşu Oluşturmak ve Kanat Çırpmasını Sağlamak

Projenin ilk aşamasında planım kuş objemizi oluşturmak ve ona animasyon vermek. Kuşumuzun kanat çırpma animasyonu üç kareden oluşuyor. İlk karede kanat yukarı kalkmış, ikinci karede kanat ortada ve son karede kanat aşağı inmiş vaziyette. Eğer animasyonumuzu 1-2-3-1-2-3-… diye oynatırsak kuşun kanadı yukarıdan aşağıya iner ve ardından direkt yukarıya geri zıplar. ama eğer 1-2-3-2-1-2-3-… diye zikzak yaptırarak oynatırsak kanat önce aşağı iner, sonra yukarı çıkar ve sonra yine aşağı iner ve bu böyle devam eder. Fark edeceğiniz üzere ikinci yol daha sağlıklı. Bu yüzden bu yolu izleyeceğiz.

Kuşa animasyonunu vermek için script yazacağız. Scriptin başlıca avantajı, kuşun animasyon hızını istediğimiz gibi değiştirebilmek ve animasyonun oynama sırasına karar verebilmek (1-2-3-2-1-… diye). O halde önce kuşumuzu oluşturalım. GameObject-2D Object-Sprite yolunu izleyin. Ardından “flappy1” sprite’sini Assets klasöründen tutup Sprite Renderer‘daki Sprite kısmına sürükleyin:

Bu aşamada kuş ekranınızda belirecektir. Eğer belirmemişse Scene panelinde biraz dışarı doğru zoom yapın. Ya da Hierarchy panelindeki New Sprite objesini seçip fareyi Scene paneline getirin ve klavyeden F tuşuna basın. Kamera kuşa odaklanacaktır. Şimdi Inspector panelinden New Sprite‘ın adını FlappyBird olarak değiştirin. Hemen sonrasında ise Transform componentinin sağında yer alan dişli çarka tıklayıp Reset‘e dokunarak kuşu 3 boyutlu uzayın tam merkezine (origin) yerleştirin:

Bu işlemin ardından Scene panelinde F tuşuna basarak kuşa tekrar odaklanmanız gerekebilir.

Şimdi sıra geldi kuşa animasyon vermeye. Bunun için yeni bir C# script oluşturun (Assets-Create-C# Script) ve adını KusAnimasyon koyun. Bu scripti Project panelinden tutup sürükleyerek Hierarchy‘deki FlappyBird objesine atayın. Artık scripti düzenlemeye hazırız. Scripte çift tıklayarak onu açın ve içini şöyle değiştirin:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

using UnityEngine; public class KusAnimasyon : MonoBehaviour {     public int saniyedeKareSayisi = 10;     public Sprite[] animasyonKareleri;     private SpriteRenderer spriteRenderer;     private float sonrakiAnimasyonDegismeAni;     private bool animasyonYonu = true;     private int mevcutAnimasyonKaresi = 0;     void Start()     {         if( animasyonKareleri.Length < 2 )             Destroy( this );         spriteRenderer = GetComponent<SpriteRenderer>();         sonrakiAnimasyonDegismeAni = Time.time + 1f / saniyedeKareSayisi;     }     void Update()     {         if( Time.time >= sonrakiAnimasyonDegismeAni )         {             if( animasyonYonu )             {                 if( mevcutAnimasyonKaresi == animasyonKareleri.Length - 1 )                 {                     mevcutAnimasyonKaresi--;                     animasyonYonu = false;                 }                 else                 {                     mevcutAnimasyonKaresi++;                 }             }             else             {                 if( mevcutAnimasyonKaresi == 0 )                 {                     mevcutAnimasyonKaresi++;                     animasyonYonu = true;                 }                 else                 {                     mevcutAnimasyonKaresi--;                 }             }             spriteRenderer.sprite = animasyonKareleri[mevcutAnimasyonKaresi];             sonrakiAnimasyonDegismeAni = Time.time + 1f / saniyedeKareSayisi;         }     } }

Bu scripti hızlıca açıklamaya çalışayım. En başta 6 adet değişken tanımlıyoruz:

saniyedeKareSayisi: Bu değişkenin varsayılan değeri 10. Bunun anlamı, bir saniyede kuş animasyonundaki kareler arasında toplam 10 kere geçiş olacak. Bu değeri artırırsanız kuş daha hızlı kanat çırpar. Kendisi public bir değişken olduğu için Inspector’dan değerini değiştirerek en uygun değeri kolayca bulabilirsiniz.