Lag en radial/sirkulær fremdriftslinje i Unity

I denne opplæringen vil jeg vise hvordan du lager en sirkulær/radial fremdriftslinje (som også kan brukes som en HP-linje osv.) i Unity.

Så la oss begynne!

Trinn

Vi trenger et sirkulært bilde med en gjennomsiktig bakgrunn.

• Importer bildet til prosjektet ditt og endre dets teksturtype til "Sprite (2D and UI)"

• Opprett et nytt lerret (GameObject -> UI -> Canvas)
• Høyreklikk på Canvas-objektet -> UI -> Bilde
• Tilordne en sirkelsprite til kildebildet og endre fargen til rød
• Endre bildetype til "Filled" og fyllmetode til "Radial 360" (Dette vil vise en annen variabel kalt Fyllmengde som kontrollerer hvor mye av bildet som er synlig langs sirkelen)

• Dupliser bildet, endre fargen til hvit, og bildetype til "Simple"
• Flytt det dupliserte bildet inn i det første bildet
• Endre den første bildestørrelsen (den med typen fylt bilde) til noe større (f.eks. bredde: 135 høyde: 135)

• Lag ny tekst (høyreklikk på Canvas -> UI -> Tekst)
• Endre justeringen til midten-senteret

• Endre teksthøyden til 60 for å kunne passe innlastingsteksten

Til slutt vil vi lage et skript som vil bruke fremdriftsverdien på bildet

• Lag et nytt skript, kall det "SC_CircularLoading" og lim inn koden nedenfor i det:

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.";
        }
    }
}

• Fest SC_CircularLoading-skriptet til ethvert objekt og tilordne dets variabler (Loading Image skal være bildet med Radial Fill-type og Loading Text skal være en tekst som viser fremdriftsverdien)

• Trykk Play og flytt glidebryteren Loading Progress. Observer at lastebildet fylles gradvis: