Unity ile Dairesel Yükleniyor Bar (Radial/ Circular Progress Bar) Yapımı

Dairesel görünen yükleniyor 2D nesnesini Unity’de bulunan UI nesneleri ile yapacağız. Ben bu yapıyı “circle loading” olarak değil oyun içinde zaman döngüsü gibi başka bir amaçla kullandım.

1- Projeye bir canvas ekleyip sağ tıklayıp Create Empty’e tıklayarak tuvalin alt nesnesi olarak boş bir GameObject ekliyorum. Ben isimlendirmesini Dairesel_Dolgu_go olarak yaptım.

2- Oluşturulan Game Object (Dairesel_Dolgu_go) nesnesin altına Image ekledim (UI -> Image) ve adını Arkaplan_img olarak değiştirdim. Aşağıdaki özelliklerini değiştirdim:

Unity ile Dairesel Yükleniyor Bar (Radial/ Circular Progress Bar) Yapımı
Unity ile Dairesel Yükleniyor Bar (Radial/ Circular Progress Bar) Yapımı
  • Source Image = Background.png
  • Color = Grey
  • Anchor min x ve y = 0, max x ve y = 1

3- Arkaplan_img’ı sağ tıklayıp kopyalayıp \”Resmi_Doldur_img\” adında isimlendirdim Kopyaladığım için source image ve anchors değerleri de geldi. Üzerinde şu değişiklikleri yapacağız:

  • Color = Green
  • Image Type = Filled
  • Fill Method = Radial 360

* 0 ila 1 arası değer alan \”Fill Amount\” değeri 360 derce hareket eden şekli oluşturur.

4- Arkaplan_img yeniden kopyalanır ve Center_image ismiyle oluşturulur:

  • Color = White
  • Rect Transform’s Left/Right/Top/Bottom = 12

5- Center_image\’a sağ tıklayıp UI > Text eklenir ve adı \”YuzdeText\” olarak isimlendirilir. Aşağıdaki özellikler eklenir:

  • Anchor min x ve y = 0, max x ve y = 1
  • Rect Transform Left/Right = 10, Top/Bottom = 15
  • Text = “0%” // Burası kod ile değiştirilecek
  • Font Style = Bold
  • Alignment = Middle & Center

6- Ve son kısım yeşil resmin değerini değiştirecek script:

public float CurrentValue
{
   get { return currentValue; }
   set
   {
       currentValue = Mathf.Clamp(value, minValue, maxValue);

       float fillPercentage = currentValue / maxValue;
       fillImage.fillAmount = fillPercentage;
       displayText.text = (fillPercentage * 100).ToString(\"0\") + \"%\";
   }
}

void Start()
{
   CurrentValue = 0f;
}

void Update()
{
   CurrentValue += Time.deltaTime;
}