유니티 progress 바 설정하기

 

유니티 progress 바 설정하기

플레이어 또는 적의 체력 설정에 활용할 수 있는 이미지 bar를 세팅하는 코드를 작성했다. 마우스 왼쪽 클릭을 하면 bar 왼쪽부터 줄어들도록 만들었다. 씬 뷰에서 UI - Image를 생성해주고 2D SPRITE 이미지를 매핑해주었다. 

하이라키 창에서 다음과 같이 세팅값을 설정해주었다. Image Type을 Filled로 변경 후 , Fill Method를 Horizontal로 바꿔주었다. 이는 이미지를 가로 기준으로 맞춰준다고 보면 된다. 옵션들 중 Vertical은 세로 Radial 360은 360도를 기준으로 이미지 변화를 줄 수 있음을 의미한다. Fill origin은 이미지 변경 시작점을 왼쪽부터/오른쪽부터 줄 지를 설정하는 것이다. 마지막으로 Fill Amout 설정을 통해 이미지를 0~100% 크기로 조정할 수 있다.

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

public class ProgTest : MonoBehaviour
{
    Image ProImg;
    void Start()
    {
        ProImg = GetComponent<Image>();
    }
    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            ProImg.fillAmount -= 0.1f;
        }
    }
}

 해당 코드를 이미지 오브젝트에 연결해주고 플레이를 해보면 마우스 왼쪽 클릭 시 오른쪽에서 왼쪽으로 이미지가 0.1f 만큼 줄어드는 것을 확인할 수 있다. ProImg의 fillAmount 변수를 -0.1f 만큼 줄이도록 설정했기 때문이다.

비슷하게 이런 이미지는 Radial 360으로 맞춰주고 Fill origin을 Top으로 설정해주면 시계방향/시계반대방향으로 이미지가 줄어들게 응용할 수 있겠다.