[UNITY] FillAmount를 사용하여 체력바(HP/MP) 만들기

유니티에서 체력바를 만들어보자!

 

우선 UI에서 이미지파일을 생성한다.

하이라어키에서 우클릭으로 UI-Image를 누르면 캔버스와 함께 생성된다.

 

생성된 이미지의 Source Image에 이미지 스프라이트를 넣어주자.

스프라이트를 넣어야 FillAmount가 활성화된다!

적당한 스프라이트를 추가해주고 이미지타입을 Filled로 바꿔준다.

Image Type - Filled

기본 설정은 원형으로 없어지는데 HP는 옆으로? 없어지니까 설정을 Horizontal로 바꿔주면 된다.

 

Fill Method - Horizontal

horizontal로 변경해주면 Fill Amount값에 따라서 이미지가 변하는 모습을 볼 수 있다.

0부터 1까지의 값으로 조절할 수 있다.

<<0.6 0.8 >>

체력바를 관리해줄 스크립트를 하나 만들어준다.

이미지에 접근하기 때문에 UnityEngine.UI를 추가해준다.

스크립트를 이미지파일에 넣을 것이기 때문에 GetComponent로 바로 넣어주었다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //추가

public class HealthBar : MonoBehaviour
{
    Image HPBar; //이미지 파일
    int HP;
    int MaxHP;
    void Start()
    {
        HPBar = GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
        HPBar.fillAmount = (float)HP / (float)MaxHP;

    }
}

 상태를 숫자로 표시하고 싶으면 Text파일을 넣어준다.

Image - Text

HPText를 생성하여 text값을 변경해준다.

HP값이 MaxHP보다 커지는 경우를 대비하여 if도 추가해줬다.

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

public class HealthBar : MonoBehaviour
{
    public Image HPBar;
    public Text HPText;
    int HP;
    int MaxHP;
    void Start()
    {
        HPBar = HPBar.GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
    
        if (HP > MaxHP)
            HP = MaxHP;
        HPBar.fillAmount = (float)HP / (float)MaxHP;
        HPText.text = string.Format("{0}/{1}", HP, MaxHP); //추가


    }
}

여기까지 하면 기본적으로 필요한 HP가 감소할 때 UI가 감소하고, 그 상태가 UI에 Text로 표시되는 상태까지 될 수 있다!