[Unity] 인트로 로딩 씬 만들기 + 프로그레스 바(진행표시줄)

지난 포스팅에 이어서 이번에는 로딩 진행상황을 나타내는 프로그레스 바(진행표시줄)을 추가해보자.

실제 로딩 진행상황을 나타내는 것은 아니고, 원하는 시간 동안 프로그레스 바가 채워지는..

눈속임이다.

 

1. Panel에 Slider를 올린 후 Slider에 포함되는 오브젝트 중 Handle Slide Area의 Handle은 삭제한다.

 

2. 로딩이 몇 퍼센트 진행되었는지 표시하기 위한 Text(TMP)를 추가한다.

 

3. Fill Area 의 Fill을 선택한 후 Inspector에서 Image의 컬러를 원하는 색으로 설정한다.

  - 이후 로딩이 진행될 때 이 색으로 프로그레스 바가 채워진다.

 

여기까지 진행한 결과는 다음과 같다.

 

 

4. 지난 포스팅에서 사용한 스크립트를 살짝만 수정하여 프로그레스 바 관련 코드를 추가해준다.

---

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using System.Collections;
using UnityEngine.SceneManagement;

public class IntroManager : MonoBehaviour
{
    // can ignore the update, it's just to make the coroutines get called for example

    [SerializeField] Image image = null;
    [SerializeField] TextMeshProUGUI text = null;
    [SerializeField] Slider slider = null;
    [SerializeField] TextMeshProUGUI text_percentage = null;

    private float time_loading = 6;
    private float time_current;
    private float time_start;

    void Start()
    {
        time_current = time_loading;
        time_start = Time.time;
        Set_FillAmount(0);
        StartCoroutine(FadeTextToFullAlpha(1.5f, image, text));
    }

    void Update()
    {
        Check_Loading();
    }

    public IEnumerator FadeTextToFullAlpha(float t, Image i, TextMeshProUGUI j)
    {
        i.color = new Color(i.color.r, i.color.g, i.color.b, 0);
        j.color = new Color(j.color.r, j.color.g, j.color.b, 0);

        while (i.color.a < 1.0f)
        {
            i.color = new Color(i.color.r, i.color.g, i.color.b, i.color.a + (Time.deltaTime / t));
            yield return null;
        }
        i.color = new Color(i.color.r, i.color.g, i.color.b, 1);
        while (i.color.a > 0.0f)
        {
            i.color = new Color(i.color.r, i.color.g, i.color.b, i.color.a - (Time.deltaTime / t));
            yield return null;
        }
        
        while (j.color.a < 1.0f)
        {
            j.color = new Color(j.color.r, j.color.g, j.color.b, j.color.a + (Time.deltaTime / t));
            yield return null;
        }
        j.color = new Color(j.color.r, j.color.g, j.color.b, 1);
        while (j.color.a > 0.0f)
        {
            j.color = new Color(j.color.r, j.color.g, j.color.b, j.color.a - (Time.deltaTime / t));
            yield return null;
        }
       
    }

    private void Check_Loading()
    {
        time_current = Time.time - time_start;
        if (time_current < time_loading)
        {
            Set_FillAmount(time_current / time_loading);
        }
        else
        {
            End_Loading();
        }
    }

    private void End_Loading()
    {
        Set_FillAmount(1);
        SceneManager.LoadScene("Main");
    }

    private void Set_FillAmount(float _value)
    {
        slider.value = _value;
        string txt = (_value.Equals(1) ? "Finished.. " : "Loading.. ") + (_value).ToString("P");
        text_percentage.text = txt;
    }

}

---

5. IntroManager의 Inspector에서 Slider 칸과 Text_percentage 칸에 아까 Panel에 올려두었던 Slider와 Text(TMP)를 적용한다.

 

6. 실행한다!

 

그런데 프로그레스 바가 끝까지 채워지지 않고 로딩이 끝나버린다!!

 

아마 Handle을 삭제하면서 Handle에 가려져 있던 부분이 보여서 그런게 아닐까..

하지만.. 완벽주의자는 용납할 수 없다..

 

7. Fill Area의 길이를 조금씩 조정하며 딱 맞아 떨어질때까지 실행 > 확인 과정을 반복한다..ㅎ

 

이 선택된 Fill Area의 왼쪽은 그대로 두고 오른쪽부분을 조금씩 조정한다.

 

8. 실행한다!

 

프로그레스 바의 길이가 감쪽같이 맞아떨어지는 것을 확인할 수 있다!

 

 

 

끝!!