How to make a LEVEL BAR progress in Unity - Tutorial

SF Games
September 05, 2022

 How to make a LEVEL BAR in Unity - Tutorial

how to make a level bar easely for your 3D Game?




To make the level bar process follow the below Steps : 

  1. create two Sprites ,name them "StartLine" and "EndLine" , Change the rotation to (x = 90) , place StartLine in the start Position and place EndLine in the end position.


  2. Select the Player gameObject ,drag the Camera gameObject inside The Player .
  3. add a new Player  movement script to our Player  gameObgect , copy and past the below script :     

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

public class Player : MonoBehaviour
{
    [SerializeField] private float speed = 10f;   

    // Update is called once per frame
    void Update()
    {
        float x = Input.GetAxis("Horizontal");
        float z = Input.GetAxis("Vertical");
        transform.position += new Vector3(x, 0, z) * speed * Time.deltaTime;
    }
}
  • 4. Create Empty and name it "UI" then create insite new Canve ( create > UI > Canva ) . In the canva set Canva Scale to "Scale with screen size" and set Match to 1.
  • 5. Select " EventSystem " , drag it insite "UI" .
  • 6. In " Canva " add Image (create >UI > Image ) , name it " Level Progress UI " . 




  • 7. inside Level Progress UI bar add a new image name it " Fill " :  

  • 8. Add 2 text to this Bar like that :






  • 9. and make the following changements to the "Fill" sprite :





  • 10. Select " Level Progress UI " and add a new Script , name it " LevelProgressUI  " , copy and past the C# code :

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

public class LevelProgressUI : MonoBehaviour
{
    [Header("UI")]
    [SerializeField] private Image uiFillImage;
    [SerializeField] private Text uiStartText;
    [SerializeField] private Text uiEndText;

    [Header("Player")]
    [SerializeField] private Transform playerTransform;

    [Header("EndLine")]
    [SerializeField] private Transform endLineTransform;


    private Vector3 endLinePosition;
    private float fullDistance;
    
    private void Start()
    {
        endLinePosition = endLineTransform.position;
        fullDistance = GetDistance();
    }
    
    public void SetLevelTexts(int level)
    {
        uiStartText.text = level.ToString();
        uiEndText.text = (level + 1).ToString();
    }
    private float GetDistance()
    {
        return (endLinePosition - playerTransform.position).sqrMagnitude;
    }
    private void UpdateProgressFill(float value)
    {
        uiFillImage.fillAmount = value;
    }
    
    private void Update()
    {
        if ((playerTransform.position.z <= endLinePosition.z))
        {
            if (playerTransform.position.z <= endLinePosition.z)
            {
                float newDistance = GetDistance();
                float progressValue = Mathf.InverseLerp(fullDistance, 0f,  newDistance);
                UpdateProgressFill(progressValue);
            }
            
        }
        
    }
}



  • 11 . Last Step :
  1. Put your  player GameObject in "Player Transform"
  2. Put End Line GameObject in " End Line Transform"
tag : progress bar unity unity progress bar animation unity circular progress bar unity fill bar unity ui slider health bar unity timer progress bar slider unity unity scene loading screen