A Steps-Based Progress Slider for Unity

A Steps-Based Progress Slider for Unity

Steve Mcilwain's photo
Steve Mcilwain
·May 1, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Problem:

I want a loading canvas that will display a loading progress bar that updates based on loading activities within the scene. I always forget the little details about how to make the slider look like a progress bar.

Solution:

Add a Slider to a UI Canvas: image.png

Uncheck Interactable and set Transition to None: image.png

Delete the "Handle Slide Area" GameObject from the hierarchy: image.png

Select the "Fill" GameObject and set the Width of the Rect Transform to "20" (or use whatever value you like). Also change the Color of the Image to a value you prefer: image.png

Select the "Fill Area" GameObject and set the Right value of the Rect Transform to "10" (or use half of the value you set for the Fill): image.png

Select the "Background" GameObject and set the Alpha value of the Image to "1" (or whatever you prefer): image.png

Adjust the size of the "Slider" Rect Transform to meet your preferences and play with the Value to get a feel for how it will look at runtime. image.png

Scripting

Attach the script below to the slider and set the number of steps in the scene that have to be completed for loading to be completed.

For example, let's say I have a SaveManager object that is loading state from a file, an ItemSpawner that is placing prefabs and a MusicManager that is loading level music then that would be 3 steps to complete.

  using UnityEngine;
  using UnityEngine.UI;

    public class Loading : MonoBehaviour
    {

        [Tooltip("Set this value to the number of loading steps")]
        [SerializeField] private int steps;

        // Private state

        private Slider _slider;
        private int _completed;

        private void Awake()
        {
            _slider = GetComponent<Slider>();
            _slider.value = 0f;
        }

        public void Reset()
        {
            _completed = 0;
            _slider.value = 0f;
        }

        public void OnStepCompleted()
        {
            _completed++;
            _slider.value = (_completed / steps);
        }

    }

Now you can have other scripts in the scene call the OnStepCompleted method when each has completed its own loading activities.

You can expand on this solution with events and callbacks, but it's a simple start to displaying progress within a scene.

Did you find this article valuable?

Support Steve Mcilwain by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this