Crear una barra de progreso radial/circular en Unity

En este tutorial, mostraré cómo hacer una barra de progreso circular/radial (que también puede usarse como barra de HP, etc.) en Unity.

¡Vamos a empezar!

Pasos

Necesitaremos una imagen circular con un fondo transparente.

• Importe la imagen a su proyecto y cambie su tipo de textura a "Sprite (2D and UI)"

• Crea un nuevo lienzo (GameObject -> UI -> Canvas)
• Haga clic derecho en el objeto Canvas -> UI -> Imagen
• Asigne un objeto circular a la imagen de origen y cambie su color a rojo
• Cambie el tipo de imagen a "Filled" y el método de relleno a "Radial 360" (esto mostrará otra variable llamada Cantidad de relleno que controla qué parte de la imagen es visible a lo largo del círculo)

• Duplica la imagen, cambia su color a blanco y el tipo de imagen a "Simple"
• Mueve la imagen duplicada dentro de la primera imagen.
• Cambie el tamaño de la primera imagen (la que tiene el tipo Imagen rellena) a algo más grande (por ejemplo, ancho: 135 alto: 135)

• Crear nuevo texto (haga clic derecho en Lienzo -> UI -> Texto)
• Cambiar su alineación al centro-medio.

• Cambie la altura del texto a 60 para poder ajustarse al texto de carga

Por último, crearemos un script que aplicará el valor de progreso a la Imagen.

• Crea un nuevo script, llámalo "SC_CircularLoading" y pega el siguiente código dentro de él:

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

• Adjunte el script SC_CircularLoading a cualquier objeto y asigne sus variables (Loading Image debe ser la imagen con tipo de relleno radial y Loading Text debe ser un texto que mostrará el valor de progreso)

• Presione Reproducir y mueva el control deslizante Progreso de carga. Observe cómo la imagen de carga se llena gradualmente: