Unity için Ana Menü Eğitimi

Kullanıcı Arayüzü (UI) grafikleri, metni ve düğmeleri birleştirir ve keyifli bir oyun deneyimi sağlamada önemli bir rol oynar.

Ana Menü, oyuncuların oyunu yüklerken genellikle ilk gördükleri şey olduğundan kullanıcı arayüzünün en belirgin kısımlarından biridir.

Bu derste UI Canvas'ı kullanarak Unity'de nasıl Ana Menü oluşturulacağını göstereceğim.

Adım 1: Ana Menüyü Tasarlayın

• Yeni bir Kanvas oluşturun (GameObject -> Kullanıcı Arayüzü -> Kanvas)

• Kanvas -> Kullanıcı Arayüzü -> Resim'e sağ tıklayarak yeni bir Resim oluşturun (Bu, Menü Arka Planı olacaktır)

• Dokuyu yeni oluşturulan bir Görüntüye atayın. Aşağıdaki görseli kullanabilir (Sağ Tık -> Farklı Kaydet...) ve İçe Aktarma Ayarlarında Doku Türü'nün 'Sprite (2D and UI)' olarak ayarlandığından emin olabilirsiniz:

• yeni bir komut dosyası oluşturun, onu SC_BackgroundScaler olarak adlandırın ve içine aşağıdaki kodu yapıştırın:

SC_BackgroundScaler.cs

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class SC_BackgroundScaler : MonoBehaviour
{
    Image backgroundImage;
    RectTransform rt;
    float ratio;

    // Start is called before the first frame update
    void Start()
    {
        backgroundImage = GetComponent<Image>();
        rt = backgroundImage.rectTransform;
        ratio = backgroundImage.sprite.bounds.size.x / backgroundImage.sprite.bounds.size.y;
    }

    // Update is called once per frame
    void Update()
    {
        if (!rt)
            return;

        //Scale image proportionally to fit the screen dimensions, while preserving aspect ratio
        if(Screen.height * ratio >= Screen.width)
        {
            rt.sizeDelta = new Vector2(Screen.height * ratio, Screen.height);
        }
        else
        {
            rt.sizeDelta = new Vector2(Screen.width, Screen.width / ratio);
        }
    }
}

• SC_BackgroundScaler komut dosyasını yeni oluşturulan bir görüntüye ekleyin. (Eklendikten sonra komut dosyası, arka plan resmini ekrana sığacak şekilde otomatik olarak ölçeklendirir):

Menü Düğmeleri Oluşturun:

• Canvas'a sağ tıklayın -> Boş Oluştur ardından "MainMenu" olarak yeniden adlandırın. Bu Nesne Ana Menü için kullanıcı arayüzü öğelerini içerecektir.
• "MainMenu" nesnesine -> Kullanıcı Arayüzü -> Metin'e Sağ Tıklayarak yeni Metin oluşturun. Bu bir başlık metni olacak.
• Metni oyun adınızla değiştirin (Benim durumumda "Game Title" olacaktır):

• Paragraf hizalamasını orta merkeze ve Rengi beyaza değiştirin:

• Son olarak Yazı Tipi Boyutunu daha büyük bir değere (örneğin 30) ve Yazı Tipi Stilini Kalın olarak değiştirin.

Ancak metnin kaybolduğunu fark edeceksiniz, bunun nedeni Dikdörtgen Dönüşüm boyutlarının çok küçük olmasıdır. Bunları daha büyük bir şeyle değiştirin (ör. Genişlik: 400 Yükseklik: 100), ayrıca Y Konumunu 50 olarak değiştirerek biraz yukarı taşıyın:

• 3 düğme oluşturun ("MainMenu" nesnesine sağ tıklayın -> Kullanıcı Arayüzü -> Düğme 3 kez) ve her düğmeyi 30 piksel aşağı taşıyın.
• Her düğmenin Metnini sırasıyla "Play Now", "Credits" ve "Quit" olarak değiştirin:

• "MainMenu" nesnesini kopyalayın ve "CreditsMenu" olarak yeniden adlandırın, içindeki "Quit" düğmesi dışındaki tüm düğmeleri kaldırın ve Metnini "Back" olarak değiştirin.
• "CreditsMenu"'daki Metin başlığının yazı tipi boyutunu daha küçük bir şeyle (örneğin 14) değiştirin, Y Konumunu 0 olarak değiştirin ve jenerik metnini yazın.

Adım 2: Menü Düğmelerini Programlayın

Şimdi bir script oluşturarak Button’ları işlevsel hale getirmemiz gerekiyor.

• Yeni bir komut dosyası oluşturun, onu SC_MainMenu olarak adlandırın ve içine aşağıdaki kodu yapıştırın:

SC_MainMenu.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SC_MainMenu : MonoBehaviour
{
    public GameObject MainMenu;
    public GameObject CreditsMenu;

    // Start is called before the first frame update
    void Start()
    {
        MainMenuButton();
    }

    public void PlayNowButton()
    {
        // Play Now Button has been pressed, here you can initialize your game (For example Load a Scene called GameLevel etc.)
        UnityEngine.SceneManagement.SceneManager.LoadScene("GameLevel");
    }

    public void CreditsButton()
    {
        // Show Credits Menu
        MainMenu.SetActive(false);
        CreditsMenu.SetActive(true);
    }

    public void MainMenuButton()
    {
        // Show Main Menu
        MainMenu.SetActive(true);
        CreditsMenu.SetActive(false);
    }

    public void QuitButton()
    {
        // Quit Game
        Application.Quit();
    }
}

• SC_MainMenu'yu Canvas nesnesine ekleyin
• "MainMenu" Nesnesini Ana Menü değişkenine atayın
• "CreditsMenu" Nesnesini Kredi Menüsü değişkenine atayın

Son adım, SC_MainMenu işlevlerini her Düğmeye bağlamaktır.

• Yeni bir öğe değişkeni eklemek için Düğmeyi seçin ve "On Click ()"'te (+) öğesine tıklayın:

• SC_MainMenu komut dosyasını (Canvas) içeren Nesneyi "On Click ()" Düğmesine atayın ve düğmeye karşılık gelen işlevi seçin (Şimdi Oyna Düğmesi için "PlayNowButton()", Kredi Düğmesi için "CreditsButton()", Çıkış Düğmesi için "QuitButton()" ve "MainMenuButton()" Kredi Menüsünde Geri Düğmesine).

Ana Menü artık hazır.

NOT: SC_MainMenu.cs'deki PlayNowButton() işlevi "GameLevel" adlı bir Sahneyi yüklemeye çalışacaktır. Bu nedenle, Oluşturma ayarlarına da eklenen "GameLevel" adında bir sahneniz olduğundan emin olun (alternatif olarak bu satırdaki adı, yüklemek istediğiniz Sahnenin adına karşılık gelecek şekilde değiştirebilirsiniz).

Kullanıcı arayüzü oluşturma hakkında daha fazla bilgi edinmek ister misiniz? Mobil Dokunmatik Kontrollerin Nasıl Yapılacağı ile ilgili Unity eğitimimize göz atın.