[Unity Project] Progress bar(진행바) 만들어서 채우기

플레이어가 재료를 썰면 진행바가 만들어 지면서 바가 착착착 쌓이는 UI를 만들어보도록 하겠습니다.

 

이번엔 대장님 도움 없이 만들었습니다. 적극 칭찬!!

---

🕹️ 조건

1. 플레이어가 재료를 썰면 진행바가 찬다.

    1.1. 재료는 총 5회 썬다.

    1.2. 진행바는 초록색이다.

2. 진행바가 가득 차면 사라진다.

    2.1. 플레이어가 인지 가능한 시간동안 UI 노출이 되다가 사라진다.

 

🕹️ UI 생성하기

1. Progress bar UI 만들기

UI > Slider로 만들어주고, Handle Side Area를 Awake(false)로 해준다.

 

왜냐하면 사용 안할거니깐!

 

 

🕹️ 스크립트 작성하기

1. Progress bar.cs 작성하기

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

// progress bar
// 재료 썰기가 시작되면
// 재료 위에 위치한다.

// 재료를 다지는 횟수만큼
// 재료 바를 올려준다.

// 재료가 다 썰리면
// 재료바가 사라진다.
public class ProgressBar : MonoBehaviour
{
    Ingredient ing;

    public GameObject progressBarGroup;
    public GameObject progressBar;
    Slider slider;

    private void Awake()
    {
        progressBar.SetActive(false);
        progressBarGroup.SetActive(false);
    }

    // Start is called before the first frame update
    void Start()
    {
        ing = GetComponent<Ingredient>();

        slider = progressBar.GetComponent<Slider>();
    }

    // Update is called once per frame
    void Update()
    {
        // 재료가 다 썰리면 재료바 작동 메서드 실행
        if (ing.SLICE_PROCESS > 0)
        {
            FillProgressBar();
        }

        if (Input.GetKeyDown(KeyCode.X))
        {
            ing.SLICE_PROCESS += 20;
        }
 
    }

    // 재료 바 생성 및 작동
    void FillProgressBar()
    {
        progressBar.SetActive(true);
        progressBarGroup.SetActive(true);
        slider.value = ing.SLICE_PROCESS / 100;


        if (slider.value >= 1)
        {
            progressBar.SetActive(false);
            progressBarGroup.SetActive(false);
            slider.value = 0;
        }
    }
    
}

테스트를 위한 코드를 제외하고 기능을 구현한 코드만 잘라서 보면

    Ingredient ing;

    public GameObject progressBarGroup;
    public GameObject progressBar;
    Slider slider;

같은 오브젝트에 삽입된 컴포넌트는 asign없이 사용 가능하다. 나는 Ingredient.cs를 사용 할 거라서 GameObejct나asign없이 바로 Ingredient ing;를 선언했다.

 

나머지는 UI 작업에 필요한 게임 오브젝트와 해당 게임 오브젝트에서 가져 올 컴포넌트를 담을 Slider형의 slider 변수를 선언했다.

    private void Awake()
    {
        progressBar.SetActive(false);
        progressBarGroup.SetActive(false);
    }

Awake로 유니티 시작과 동시에 bar, bar group을 꺼준다. (Awake는 유니티 생명주기 참고)

   void Start()
    {
        ing = GetComponent<Ingredient>();

        slider = progressBar.GetComponent<Slider>();
    }

그리고 Start 메서드에서 ing, slider에 각각 필요한 컴포넌트를 넣어준다.

 

ing는 Ingredient를

slider에는 progressBar UI에 존재하는 Slider라는 컴포넌트를 가져왔다.

   void Update()
    {
        // 재료가 다 썰리면 재료바 작동 메서드 실행
        if (ing.SLICE_PROCESS > 0)
        {
            FillProgressBar();
        }
    }

ing 변수를 만들어준 이유는 ing에 SLICE_PROGESS라는 프로퍼티를 사용하기 위해서다.

 

나는 '재료가 썰리는 만큼 progess bar 채우기'라는 조건이 있었으므로 해당 프로퍼티를 사용하여 '재료가 썰어지는 과정이 0 이상이면 == 재료가 썰리기 시작하면) FillProgressBar 메서드를 실행시켰다.

   void FillProgressBar()
    {
        progressBar.SetActive(true);
        progressBarGroup.SetActive(true);
        slider.value = ing.SLICE_PROCESS / 100;


        if (slider.value >= 1)
        {
            progressBar.SetActive(false);
            progressBarGroup.SetActive(false);
            slider.value = 0;
        }
    }

재료가 썰어지는 동시에 progress bar, bar group을 활성화하고 slider value값을 slice progess / 100으로 해줬다. 

 

그리고 만약 slider.value가 1이 된다면? 즉, 슬라이더가 꽉 찬다면? bar, bar group을 비활성화하고 slider.value를 초기화했다.

 

 

2. Assign 진행시켜

해당 UI를 재료 프리팹에 부착해서 사용해야 하지만, 아직 병합 전이므로 다른 사람의 작업물을 건들면 안 된다.

 

그래서 Empty GameObject를 생성하여 내가 만든 스크립트와 해당 스크립트에 필요한 스크립트(대장님이 작업하심)를 GameObject에 Assign하여 스크립트끼리 서로 GetComponent를 사용할 수 있게 만들었다.

 

🕹️ 결과물

해당 바가 다 채워진 후 바로 사라지는 모습을 수정하면 progress bar의 기능은 다 구현한거다!!