2D Pacman Oyunu Yapımı

Gereksinimler

Bu oyun Unity 5.0.0f4. sürümü ve C# programlama dili kullanılarak yapılmıştır. İleri sürümlerde oyunu yapmak için kullanılabilir.

Proje Kurulum Ayarları

Unity Ekranını açıyoruz. "New project" butonuna tıklıyoruz.

Proje adını "pacman" yaptıktan sonra projeyi kaydetmek için istediğimiz bir klasörü seçiyoruz. Ardından oyununun boyutunu 2D olarak seçiyoruz.

Şimdi kamera ayarlarını yapmaya başlayabiliriz. İlk olarak Hiyerarşi bölümündeki Main Camera'yı seçiyoruz. Background rengini siyah yapıyoruz ve size ayarını ve position ayarını aşağıda görüldüğü gibi yapıyoruz.

Labirent Arkaplanın oluşturulması

Labirent Resmi

Not: Yukarıdaki resme sağ tıklayıp, Save As'e tıkladıktan sonra, projenin Assets klasörünü seçiyoruz.Klasörün içine Sprites isimli yeni bir klasör ekledikten sonra resmi buraya kaydediyoruz.

Project kısmından maze dosyasına tıklıyoruz.

Ve Import Settings ayarlarını yapıyoruz.

Not: Bu kısım  Unity'e resmi yükleme ayarlarını gösteren kısımdır. 

Şimdi maze dosyasını Hiyerarşiye bölümüne sürüklüyoruz. Artık resmimiz oyunun bir parçası.

 Inspector kısmından maze'i position ayarını (0,0,0) yaptık.

Labirent Fizik Ayarları

Şu anda sınırlarımız sadece bir resimden ibaret. Onları fiziksel oyun parçaları yapmamız gerekiyor(Pacman karakteri labirentin duvarları bir resimmiş gibi  üstünden geçmemeli).Öncelikle hepsini Hierarchy kısmından seçiyoruz.

Inspector kısmından Add Component->Physics 2D->Box Collider 2D'ı seçiyoruz.

Scene ekranına bakığımızda, Box Collider'ın labirentin etrafında bir kare oluşturduğunu görüyoruz.Bu bizim tam olarak istediğimiz şey değil.

İstediğimiz şey, Box Collider'ın her bir duvarın tek tek etrafını sarması. Bunu yapmak için iki yol var. Bunu kod ekleyerek yapabiliriz veya  Box Collider'ları kendimiz ekleriz.

Aşağıda görüldüğü gibi, Inspector'daki Edit Collider  butonuna tıklayalım.

Bu buton sayesinde, Scene ekranında Box Collider'ları elimizle ayarlayabiliyoruz.

Bu işlemi her bi duvar için tekrar ediyoruz. Yapmamız gereken şey, Add Component->Physics 2D->Box Collider 2D yolunu takip ederek, Edit Collider butonuna basmak ve Scene ekranında duvara uyarlamak.

Her bir Box Collider'ın duvarı tam olarak kaplaması çok önemli . Zoomlayarak bu işlemi daha rahat yapabiliriz.Hiza ayarları için zorlandığımızda, Inspector bölümünde position ayarını kullanabiliriz.

Box Collider'ların bitmiş hali bu şekilde olacaktır.

Pacman'in Eklenmesi

Pacman Resmi

Pacman'in her bir yöndeki hareketi için, bir animasyon yapmalıyız.

Aşağıdaki resimdeki her bir satırla, bir animasyon oluşturacağız.

Not: Yukarıdaki resme sağ tıklayıp, Save As'e tıkladıktan sonra, projenin Assets klasörünü seçiyoruz.Klasörün içine Sprites isimli yeni bir klasör ekledikten sonra resmi buraya kaydediyoruz.

Ve Import Settings ayarlarını yapıyoruz.

İndirdiğimiz Pacman Görüntüsünün Kesilmesi

Burada, Sprite Mode'un Multiple olarak seçilmesi çok önemli. Sprite Editor butonuna tıklıyoruz.

 Slice sekmesini seçiyoruz. 16 x 16  ve Grid ayarlarını seçtikten sonra aşağıdaki Slice butonuna basıyoruz.

Sprite'ı kestikten sonra, Sprite Editor'u kapatabiliriz.Eğer Unity  Unapplied Import Settings uyarısı verirse, Apply'a tıklıyoruz.

Artık Project kısmında, pacman dosyasının altında 12 dilimimiz var.  

Pacman Animasyonunun Oluşturulması

Hareket animasyonlarında kullanacağımız dilimler aşağıdaki gibidir.

• right (0, 1 ve 2)
• left (3, 4 ve 5)
• up (6, 7 ve 8)
• down (9, 10 ve 11)

Şimdi  right animasyonunu oluşturuyoruz.Bunun için 0, 1 ve 2. dilimleri seçiyoruz.

Ve Scene ekranına sürüklüyoruz.

ÇOklu resimler gönderdiğimizde,Unity bir animasyon yapmak istediğimizi anlıyor ve bu yüzden animasyonu nereye kaydetmek istediğimizi soruyor. Animasyonu right.anim olarak isimlendirip, Sprites'ın içinde yeni oluşturacağımız PacmanAnimation dosyasının içine kaydediyoruz. Unity pacman_0 adlı GameObject'i  Scene ekranına ve iki tane dosyayı da Project kısmına ekliyor.

İlk dosya  animation state machine dosyasıdır,iİkincisi ise, animasyonun kendi dosyasıdır.

Bu işlemi her bir hareket animasyonu için tekrar ediyoruz. (Sol için:(3, 4, 5) , Yukarı için: (6, 7, 8) ve           Aşağı için ise: (9, 10, 11) ).

Bu işlemlerden sonra, Hierarchy kısmımız aşağıdaki gibi gözükür.

Hiyerarşinin Kısmının Temizlenmesi

Unity her bir animasyon için yeni bir Game Object oluşturdu ama şimdilik sadece ilkine ihtiyacımız var. Diğer üçünü aşağıda görüldüğü gibi temizliyoruz.

 Project alanındada aynı durum olduğu görünüyor.

Birinci animation state machine'i bırakıp, kalan üçünü siliyoruz.

Pacman Animation State Machine

4 animasyon  klasörümüz var ama Unity hangi animasyonu ne zaman oynatması gerektiğini daha bilmiyor.Bunun çözümü Unity'nin içinde hazır olarak gelen Mecanim animasyon sistemidir. 4 state'i olan bir animation state machine kuruyoruz.

• right
• left
• up
• down

Ayrıca animasyonların arasında geçiş için Transitions ekliyoruz.

Not: Unity  right animasyonunu right state'te (durumunda) kalmışsa sonsuza kadar defalarca oynatır. Başka bir duruma(state'e) geçmek için Transitions kullanırız. 

Şimdi Project kısmındaki pacman_0 dosyasına iki kere tıklıyoruz.

Şimdi yeni açılmış Animator sekmesinden animation state machine'i görebiliyoruz.

Diğer state'lerin oluşturulması

right state Animator'un içinde bulunuyor. Şimdi Project sekmesindeki PacmanAnimation  dosyasının içinde bulunan left.anim dosyasını bu ekrana sürükleyerek,  left state'i ekleyebiliriz.  

Aynı işlemi, up ve down state'leri için de yapıyoruz.

Parametrelerin Oluşturulması

Pacman'in 4 hareket yönü vardır.(yukarı,aşağı, sağ,sol). Bu durumda, animation state machine'de 4 

transition (geçiş) olmalıdır.

• Eğer  Y > 0 ise: yukarı
• Eğer  Y < 0 ise: aşağı
• Eğer  X > 0 ise: sağ
• Eğer  X < 0 ise: sol

Animator'ın sol tarafında, Parameters tabını seçiyoruz.

Şimdi sağ kısımda bulunan "+" sembolüne tıklıyoruz ve DirX isimli Float tipinde bir parametre ekliyoruz.Ardından DirY isimli Float tipinde bir parametre daha ekliyoruz.

Daha sonra aşağıdaki kodu bir scripte ekleyip bu parametrelere değer verebileceğiz. 

GetComponent<Animator>().SetFloat("DirX", 0);
GetComponent<Animator>().SetFloat("DirY", 0);

Transition'ların Oluşturulması 

Transition'lar animation stateler arasında otomatik geçiş oluşturmak için kullanılırlar. 

Any State karakterin hiç bir state'e sahip olmaması durumunda olmadığımızda kullanılan statetir.

 Any State'e sağ tıklıyoruz ve Make Transition'ı seçiyoruz.Bundan sonra ise, beyaz okla onu şekildeki gibi right state'e bağlıyoruz.

Ardından beyaz oka tıklayarak ekranın Inspector kısmına bakıyoruz. Transition's Condition  ayarını DirX > 0.1 olarak değiştiriyoruz.

Not:  + işaretine tıklayarak yeni conditionı (şart) ekliyoruz

Settings ayarlarından Can Transition To Self seçeneğini ise seçilmemiş(disable) hale getiriyoruz.

Bu şekilde, Pacman sağa gittiğinde (DirX > 0.1), animator right state'e geçecektir ve doğru animasyonu oynatacaktır.

3 transition daha ekliyoruz:

• Any State'ten left state'e geçmesi (DirX < -0.1)
• Any State'ten up state'e geçmesi (DirY > 0.1)
• Any State'ten down state'e geçmesi (DirY < -0.1)

Animator aşağıdaki gibi görünecektir.

Animator ayarlarında yapılması gereken son bir adım kaldı. Tüm state'leri seçiyoruz ve  Inspector sekmesinde hepsinin Speed ayarını 0.8 yapmış oluyoruz.

Eğer play tuşuna basarak oyunu çalıştırırsak, right state animasyonunun çalıştığını görürüz.

Pacman'in isimlendirilmesi ve Position Ayarının Yapılması

Hierarchy kısmındaki pacman_0'ın adını pacman olarak değiştiriyoruz. 

Ve pozisyonunu da  (14, 14) olarak değiştiriyoruz.

Pacman Fizik Ayarları

Şu anda pacman sadece bir resim. Hareket edebilmesi ve duvarlara çarpabilmesi için  bazı ayarlar yapmalıyız. Çarpışma için Collider ekleyeceğiz.

Hareket edebilmesi içinde bir rigidbody ekleyeceğiz.

Hierarchy kısmında pacman'i seçiyoruz, daha sonra Add Component->Physics 2D->Circle Collider 2D ve Add Component->Physics 2D->Rigidbody 2D yolunu takip ederek circle collider ve rigidbody ekliyoruz. . Aşağıdaki ayarları uyguluyoruz.

Hareket Scriptinin Eklenmesi

Pacman'i hareket ettirmenin en kolay yolu bir script eklenmesi.Bu script sayesinde kullanıcı ne zaman bir ok tuşuna basarsa, pacman o yönde bir birim yol gidecektir. PacDot'larda birer birim arayla konulacaktır. 

 Hierarchy kısımından pacman'e tıklıyoruz ve Add Component->New Script yolunu takip ederek PacmanMove isimli csharp dilinin kullanılacağı bir script dosyası ekliyoruz. Daha sonra bu script dosyasını  Project bölümünde  Assets klasörünün altında açtığımız yeni bir Scripts  klasörünün içine yerleştiriyoruz.

Scripte çift tıklayarak açıyoruz.

using UnityEngine;
using System.Collections;

public class PacmanMove : MonoBehaviour {

    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {

    }
}

Start fonksiyonu oyun başladığında Unity tarafından otomatik olarak çağırılan fonksiyondur. Update fonksiyonu ise saniyede 60 kere çağırılan bir fonksiyondur.

 Update fonksiyonun, FixedUpdate isimli özel bir tipi vardır.B fonksiyoun sadece belirli bir süre için, Update fonksiyonu gibi ardarda defalarca çağırılan bir fonksiyondur.Oyunda fizik ayarları yapılırken FixedUpdate fonksiyonunu çağırmak mantıklıdır.

Aşağıdaki kodu scripte ekliyoruz.

using UnityEngine;
using System.Collections;

public class PacmanMove : MonoBehaviour {
    public float speed = 0.4f;
    Vector2 dest = Vector2.zero;

    void Start() {
        dest = transform.position;
    }

    void FixedUpdate() {
        // Move closer to Destination
        Vector2 p = Vector2.MoveTowards(transform.position, dest, speed);
        GetComponent<Rigidbody2D>().MovePosition(p);
    }

    bool valid(Vector2 dir) {
        // Cast Line from 'next to Pac-Man' to 'Pac-Man'
        Vector2 pos = transform.position;
        RaycastHit2D hit = Physics2D.Linecast(pos + dir, pos);
        return (hit.collider == GetComponent<Collider2D>());
    }
}

FixedUpdate() fonksiyonunu aşağıdaki gibi güncelliyoruz.

void FixedUpdate() {
    // Move closer to Destination
    Vector2 p = Vector2.MoveTowards(transform.position, dest, speed);
    GetComponent<Rigidbody2D>().MovePosition(p);

    // Check for Input if not moving
    if ((Vector2)transform.position == dest) {
        if (Input.GetKey(KeyCode.UpArrow) && valid(Vector2.up))
            dest = (Vector2)transform.position + Vector2.up;
        if (Input.GetKey(KeyCode.RightArrow) && valid(Vector2.right))
            dest = (Vector2)transform.position + Vector2.right;
        if (Input.GetKey(KeyCode.DownArrow) && valid(-Vector2.up))
            dest = (Vector2)transform.position - Vector2.up;
        if (Input.GetKey(KeyCode.LeftArrow) && valid(-Vector2.right))
            dest = (Vector2)transform.position - Vector2.right;
    }
}

Scripti kaydedip oyunumuzu çalıştırırsak, pacmanin yön tuşlarıyla hareket ettiğini görebiliriz.

Animasyon Parametrelerinin Ayarlanması

Şu anda pacman karakterimiz yön tuşlarıyla hareket edebiliyor, ama animator animasyonları oynatmıyor.Bunun için az önceki kodumuza devam ediyoruz.


void FixedUpdate() {
    // Move closer to Destination
    Vector2 p = Vector2.MoveTowards(transform.position, dest, speed);
    GetComponent<Rigidbody2D>().MovePosition(p);

    // Check for Input if not moving
    if ((Vector2)transform.position == dest) {
        if (Input.GetKey(KeyCode.UpArrow) && valid(Vector2.up))
            dest = (Vector2)transform.position + Vector2.up;
        if (Input.GetKey(KeyCode.RightArrow) && valid(Vector2.right))
            dest = (Vector2)transform.position + Vector2.right;
        if (Input.GetKey(KeyCode.DownArrow) && valid(-Vector2.up))
            dest = (Vector2)transform.position - Vector2.up;
        if (Input.GetKey(KeyCode.LeftArrow) && valid(-Vector2.right))
            dest = (Vector2)transform.position - Vector2.right;
    }

    // Animation Parameters
    Vector2 dir = dest - (Vector2)transform.position;
    GetComponent<Animator>().SetFloat("DirX", dir.x);
    GetComponent<Animator>().SetFloat("DirY", dir.y);
}

Fixed Update fonksiyonunu güncelledikten sonra, oyunumuzu çalıştırıyoruz.Artık animasyonlarımızın devrede olduğunu görüyoruz.

Pacman'in En Üstteki Katmana Yerleştirilmesi  (Layer Ayarının Yapılması)

Pacman karakteri sahnedeki bacground, pac-dotlar gibi objelerin hepsinin en önünde görünmelidir, yani en üst layer'da olmalıdır.

Bunun için  Order in Layer ayarını aşağıdaki gibi 1 olarak değiştiriyoruz.

PacDot'ların eklenmesi

 Pacdot'lar, pacman'in yediği küçük noktalardır.

- pacdot.png
Not: Yukarıdaki resme sağ tıklayıp, Save As'e tıkladıktan sonra, projenin Assets klasörünü seçiyoruz.Klasörün içine Sprites isimli yeni bir klasör ekledikten sonra resmi buraya kaydediyoruz.

Ve Import Settings ayarlarını yapıyoruz.

Şimdi pacdot dosyasını Hiyerarşiye bölümüne sürüklüyoruz. Pacman 'in pacdotların üst katmanında olmasını istiyoruz. AAdd Component->Physics 2D->Box Collider 2D yolunu takip ederek  Is Trigger seçeneğini aktif hale getiriyoruz.

Add Component->New Script yolunu takip ederek Pacdot isimli  csharp,  dilli bir script açıyoruz ve bu scripti Scripts klasörünün içine taşıyoruz.

using UnityEngine;
using System.Collections;

public class Pacdot : MonoBehaviour {

    void OnTriggerEnter2D(Collider2D co) {
        if (co.name == "pacman")
            Destroy(gameObject);
    }
}

Hierarchy, bölümünün içinde Pac-Dotu seçiyoruz ve defalarca kopyala yapıştır yaparak, yeni pacdotlarımızı oluşuruyoruz.

Pacdotları yerleştirdikten sonra, oyun ekranını son hali aşağıdaki gibi olacaktır.

Play tuşuna bastığımızda, pacmanin pacdotları yiyebildiğini görürüz.

Tüm pacdot dosyalarını aşağıdaki gibi maze klasörünün içine atarız.

Hayaletler

Kırmızı Hayaletin Eklenmesi

Hayaletin her bir yöndeki hareketi için, bir animasyon yapmalıyız.

• right
• left
• up
• down

İlk hayaletimizin adı Blinky.

Not: Yukarıdaki resme sağ tıklayıp, Save As'e tıkladıktan sonra, projenin Assets klasörünü seçiyoruz.Klasörün içine Sprites isimli klasöre kaydediyoruz.

Ve Import Settings ayarlarını yapıyoruz.

Animasyonların Oluşturulması

Sprite Mode'un Multiple olarak seçilmesi çok önemli. Sprite Editor butonuna tıklıyoruz.
 Slice sekmesini seçiyoruz. 16 x 16  ve Grid ayarlarını seçtikten sonra aşağıdaki Slice butonuna basıyoruz.

Sprite'ı kestikten sonra, Sprite Editor'u kapatabiliriz.Eğer Unity  Unapplied Import Settings uyarısı verirse, Apply'a tıklıyoruz.

İlk başta 1 ve 2. dilimi Scene'e ekliyoruz ve BlinkyAnimation isimli yeni bir klasörde right.anim olarak kaydediyoruz.

Bu işlemi diğer yönler için de tekrar ediyoruz:

• Sol için: 2 ve 3
• Yukarı için: 4 and 5 
• Aşağı için: 6 ve 7

Hiyerarşinin Kısmının Temizlenmesi

 blinky_2, blinky_4 ve blinky_6 objelerini  hiyerarşiden siliyoruz.

Project alanındanda bu dosyaları siliyoruz.

Animation State Machine

 blinky_0 dosyasına çift tıklayarak animatoru açıyoruz.

Pacman için kullandığımız  animation state machine'in aynısını oluşturacağız . Animasyonları sürükleyip,parametreleri ekleyip transitionlar kuracağız.

• Any State'ten right state'e geçmesi DirX > 0.1
• Any State'ten left state'e geçmesi (DirX < -0.1)
• Any State'ten up state'e geçmesi (DirY > 0.1)
• Any State'ten down state'e geçmesi (DirY < -0.1)

Animator ekranının son hali aşağıdaki gibi olacaktır.

Blinky'nin isimlendirilmesi ve Position Ayarının Yapılması

Hierarchy kısmındaki blinky_0'ın adını blinky olarak değiştiriyoruz. 

Ve pozisyonunu aşağıdaki gibi değiştiriyoruz.

Ghost Fizik Ayarları

Hierarchy kısmında blinky'i seçiyoruz, daha sonra Add Component->Physics 2D->Circle Collider 2D ve Add Component->Physics 2D->Rigidbody 2D yolunu takip ederek circle collider ve rigidbody ekliyoruz.Aşağıdaki ayarları uyguluyoruz.

Ayrıca Sprite Renderer bölümünde Order in Layer ayarını 1  olarak değiştiriyoruz.

Hareket Scriptinin Eklenmesi

Hierarchy kısımından blinky'e tıklıyoruz ve Add Component->New Script yolunu takip ederek GhostMove isimli csharp dilinin kullanılacağı bir script dosyası ekliyoruz. Daha sonra bu script dosyasını  Project bölümünde  Assets klasörünün altında açtığımız Scripts  klasörünün içine yerleştiriyoruz.

using UnityEngine;
using System.Collections;

public class GhostMove : MonoBehaviour {
    public Transform[] waypoints;
    int cur = 0;

    public float speed = 0.3f;

    void FixedUpdate () {

    }
}

FixedUpdate() fonksiyonunu aşağıdaki gibi güncelliyoruz.

void FixedUpdate () {
    // Waypoint not reached yet? then move closer
    if (transform.position != waypoints[cur].position) {
        Vector2 p = Vector2.MoveTowards(transform.position,
                                        waypoints[cur].position,
                                        speed);
        GetComponent<Rigidbody2D>().MovePosition(p);
    }
    // Waypoint reached, select next one
    else cur = (cur + 1) % waypoints.Length;

    // Animation
    Vector2 dir = waypoints[cur].position - transform.position;
    GetComponent<Animator>().SetFloat("DirX", dir.x);
    GetComponent<Animator>().SetFloat("DirY", dir.y);
}

Ve son olarak aşağıdaki fonksiyonu ekliyoruz.

void OnTriggerEnter2D(Collider2D co) {
    if (co.name == "pacman")
        Destroy(co.gameObject);
}

Waypoint Eklenmesi

Unity ekranında yukarıdaki ana menüden GameObject->Create Empty sekmesini seçiyoruz.  Blinky_Waypoint0 olarak isimlendirdikten sonra  onu Scene ekranında daha rahat görebilmek için bir Gizmo ekliyoruz.

Not: Gizmo oyun oynanırken görünmeyen, görsel bir yardımcıdır.

Pozisyonunu (15, 20) olarak ayarlıyoruz.

Waypointi kopyala yapıştır yapıyoruz ve adını Blinky_Waypoint1, pozisyonunu ise (10, 20) yapıyoruz.

 Blinky_Waypoint2'yi oluşturup onun konumu (10, 14) yapıyoruz.

Blinky_Waypoint3'ün konumunu  (19, 14), 

Ve son olarak Blinky_Waypoint4'ün konumunu (19, 20) yapıyoruz.

Hierarchy sekmesinde blinky'i seçiyoruz ve GhostMove Scriptini içindeki Waypoints bölümlerini aşağıdaki gibi dolduruyoruz.

Play tuşuna basarak, Blinkynin hareketini görebiliriz.

Aşağıdaki gibi daha kompleks waypointlerde oluşturulabilir.

Pinky, Inky ve Clyde

Blinky için yaptığımız adımları Pinky, Inky ve Clyde için de tekrarlıyoruz.

Not:Her bir hayalet için farklı waypointler ve hız ayarları yapılmalıdır.

 Play tuşuna basarak oyunumuzu oynayabiliriz.