Image ve Button

Image ve Button ile tıklanabilir UI öğeleri yapmayı öğrenirsin.

Image bileşeni

Image bileşeni, Canvas üzerinde 2D Sprite görsellerini (paneller, can barları, simgeler) çizmek için kullanılır. 3D dünyadaki SpriteRenderer yerine Canvas hiyerarşisinde Image bileşeni tercih edilir.

// Image doluluk oranını değiştirerek can barı yapma
using UnityEngine.UI;
Image healthBar = GetComponent<Image>();
healthBar.fillAmount = 0.75f;

Image Type ayarı Filled yapıldığında fillAmount özelliğiyle dairesel veya yatay dolan göstergeler kolayca üretilir.

Button ve onClick olayı

Button bileşeni, kullanıcının fare tıklamalarını veya ekran dokunmalarını yakalayan etkileşimli bir UI elemanıdır. Bir butona tıklandığında ne olacağını belirlemek için onClick olayına fonksiyon bağlanır.

// Buton tıklamasına kod üzerinden fonksiyon bağlama
Button playButton = GetComponent<Button>();
playButton.onClick.AddListener(StartGame);

Bu mekanizma oyun başlatma, menü geçişleri ve diyalog ilerletme gibi tüm buton eylemlerinin temelidir.

Uygulama Buton etkileşimini yazdır

uiType değişkenine "Button", action değişkenine "StartGame" ata. Ekrana UI: Button | Triggered: StartGame yazdır.

Örnek çözümü göster

using System;

class Program
{
    static void Main()
    {
        string uiType = "Button";
        string action = "StartGame";
        Console.WriteLine("UI: " + uiType + " | Triggered: " + action);
    }
}

Kendini test et

Kullanıcının bir UI Button bileşenine tıkladığı anı dinlemek için hangi olay (event) kullanılır?
- onHover
- onTrigger
- onRelease
- onClick
Cevabı göster

onClick — onClick, Button bileşeni tıklandığında tetiklenen standart UnityEvent dinleyicisidir.

Tıklama dinleyicisi bağla

playButton.onClick.____(OnPlayClicked);

Cevabı göster

playButton.onClick.AddListener(OnPlayClicked);

Image ve Button alanları

Image

Canvas'ta 2D sprite gösteren bileşen
Button

Tıklama etkileşimini alan UI bileşeni
onClick

Butona tıklandığında tetiklenen olay
fillAmount

Image doluluk oranı (0-1) alanı

Sıradaki ders: Rect Transform

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler