Yeni Başlayanlar İçin Unity Arayüzü (UI) Tasarımı: Canvas, Text ve Button

Merhaba Unity geliştiricileri! Bu yazıda, Unity oyun motorunda arayüz (UI) tasarımı için temel bileşenler olan Canvas, Text ve Button öğelerini ele alacağız. Yeni başlayanlar için adım adım, örneklerle ve açıklamalarla dolu bir rehber hazırladık. Hazırsanız başlayalım!

1. Canvas: Arayüzün Temeli

Canvas, Unity'deki tüm UI öğelerinin yer aldığı temel bir tuvaldir. Tüm UI elemanları, hiyerarşik olarak Canvas'ın altına yerleştirilir. Yeni bir proje oluşturduğunuzda, varsayılan olarak bir Canvas bulunmaz, bu yüzden ilk adımımız bir Canvas oluşturmak olmalı.

Canvas Oluşturma

Hiyerarşi penceresinde sağ tıklayın ve UI > Canvas seçeneğini seçin. Bu, sahnenize bir Canvas ekleyecektir. Canvas'ın özellikleri Inspector penceresinde düzenlenebilir. Önemli özellikler şunlardır:

• Render Mode: Canvas'ın nasıl render edileceğini belirler. Screen Space - Overlay, ekranın en üstünde render edilir ve kameranın konumundan etkilenmez. Screen Space - Camera, belirtilen bir kameranın görünüm alanına göre render edilir. World Space, 3D dünyanın içinde konumlandırılır.


• UI Scale Mode: UI ölçekleme modunu belirler. Scale With Screen Size, ekran boyutuna göre ölçekleme sağlar.


• Reference Pixels Per Unit: UI öğelerinin piksel boyutunu belirler.

2. Text: Metin Gösterimi

Text, Unity'de metin görüntülemek için kullanılan bir UI öğesidir. Canvas'a bir Text öğesi eklemek için, Hiyerarşi penceresinde Canvas'ı seçin, sağ tıklayın ve UI > Text seçeneğini seçin. Inspector penceresinde Text öğesinin özelliklerini düzenleyebilirsiniz.

Text Özellikleri

• Text: Gösterilecek metni yazın.


• Font: Kullanılacak yazı tipini seçin.


• Font Size: Yazı boyutunu ayarlayın.


• Alignment: Metnin hizalamasını ayarlayın.

Örnek Kod (C#):

using UnityEngine;

using UnityEngine.UI;
public class TextExample : MonoBehaviour

{

    public Text myText;
void Start()

    {

        myText.text = "Merhaba Dünya!";

    }

}

3. Button: Etkileşimli Düğmeler

Button, kullanıcı etkileşimini sağlayan bir UI öğesidir. Canvas'a bir Button öğesi eklemek için, Hiyerarşi penceresinde Canvas'ı seçin, sağ tıklayın ve UI > Button seçeneğini seçin. Button'a tıklandığında bir fonksiyon çalıştırmak için, Inspector penceresinde On Click() bölümüne bir event ekleyin ve ilgili fonksiyonu atayın.

Button Özellikleri

• Text: Düğmenin üzerindeki metni yazın.


• Image: Düğmenin görünümünü özelleştirmek için bir resim atayın.


• On Click(): Düğmeye tıklandığında çalışacak fonksiyonu atayın.

Örnek Kod (C#):

using UnityEngine;

using UnityEngine.UI;
public class ButtonExample : MonoBehaviour

{

    public Button myButton;
void Start()

    {

        myButton.onClick.AddListener(TaskOnClick);

    }
void TaskOnClick()

    {

        Debug.Log("Düğmeye tıklandı!");

    }

}

4. Arayüz Öğelerini Düzenleme

UI öğelerini düzenlemek için Rect Transform kullanılır. Rect Transform, UI öğelerinin konumunu, boyutunu ve döndürülmesini kontrol etmenizi sağlar. Inspector penceresinde Rect Transform bileşenini kullanarak öğelerinizi istediğiniz gibi konumlandırabilir ve boyutlandırabilirsiniz.

Bu temel öğelerle başlayarak, daha karmaşık ve etkileşimli arayüzler oluşturabilirsiniz. [YOUTUBE_VIDEO_BURAYA] Daha fazla bilgi için Unity'nin resmi dökümanlarına ve çevrimiçi kaynaklara göz atabilirsiniz.