צור סרגל התקדמות רדיאלי/מעגלי ב-Unity

במדריך זה, אני אראה כיצד ליצור סרגל התקדמות עגול/רדיאלי (שיכול לשמש גם כפס HP וכו') ב-Unity.

אז בואו נתחיל!

שלבים

נצטרך תמונה עגולה תמונה עם רקע שקוף.

• ייבא את התמונה לפרויקט שלך ושנה את סוג הטקסטורה שלה ל "Sprite (2D and UI)"

• צור קנבס חדש (GameObject -> ממשק משתמש -> קנבס)
• לחץ לחיצה ימנית על אובייקט ה-Canvas -> ממשק משתמש -> תמונה
• הקצה ספרייט עיגול לתמונת המקור ושנו את צבעו לאדום
• שנה את סוג התמונה ל-"Filled" ואת שיטת המילוי ל-"Radial 360" (זה יציג משתנה נוסף בשם Fill Amount השולט כמה מהתמונה נראה לאורך המעגל)

• שכפל את התמונה, שנה את הצבע שלה ללבן ואת סוג התמונה ל "Simple"
• הזז את התמונה המשוכפלת לתוך התמונה הראשונה
• שנה את גודל התמונה הראשונה (זה עם סוג תמונה מלאה) למשהו גדול יותר (לדוגמה, רוחב: 135 גובה: 135)

• צור טקסט חדש (קליק ימני על קנבס -> ממשק משתמש -> טקסט)
• שנה את היישור שלו למרכז-אמצע

• שנה את גובה הטקסט ל-60 כדי להתאים לטקסט הטעינה

לבסוף, ניצור סקריפט שיחיל את ערך ההתקדמות על התמונה

• צור סקריפט חדש, קרא לו "SC_CircularLoading" והדבק בתוכו את הקוד למטה:

SC_CircularLoading.cs

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

public class SC_CircularLoading : MonoBehaviour
{
    public Image loadingImage;
    public Text loadingText;
    [Range(0, 1)]
    public float loadingProgress = 0;

    // Update is called once per frame
    void Update()
    {
        loadingImage.fillAmount = loadingProgress;
        if(loadingProgress < 1)
        {
            loadingText.text = Mathf.RoundToInt(loadingProgress * 100) + "%\nLoading...";
        }
        else
        {
            loadingText.text = "Done.";
        }
    }
}

• צרף את הסקריפט SC_CircularLoading לכל אובייקט והקצה את המשתנים שלו (Loading Image צריך להיות התמונה עם סוג מילוי רדיאלי ו-Loading Text צריך להיות טקסט שיציג את ערך ההתקדמות)

• הקש על Play והזז את המחוון Loading Progress. ראה את תמונת הטעינה מילוי בהדרגה: