슬라이더 이용하여 막대 및 원형 체력바 구현

2018.12.24.

제가 지금 공부하고 있는 UNITY를 이용한 게임프로그래밍에서 유니티 엔진이 지원하는 UI중 slider를 활용하여 막대와 원형 체력바를 만들어 보았습니다

위가 완성된 사진

[막대 체력바]

hierarchy창에서 UI에서 Slider를 원하는 캐릭터에 Canvas를 만들어 준후 Slider를 만들어줍니다.

slider안의 Handle부분의 필요없다고 생각되어 비활성화 시켰습니다.

Fill 오브젝트의 색을 조정하여 체력의 색을 정합니다.

Background의 알파값을 으로 맞춰서 체력이 떨어지면 안보이게 합니다.

내 소스코드:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class UnitHP : MonoBehaviour
{
    [SerializeField]
    private Slider hpValue;
    [SerializeField]
    private HitPointSystemModule hitpointSystemModule;
  
 
    private void Update()
    {
        hpValue.value = hitpointSystemModule.CurrentHP / hitpointSystemModule.MaxHp;
       
        var newRotation = Quaternion.LookRotation(Camera.main.transform.position - transform.position).eulerAngles;
        newRotation.x = 0;
        newRotation.z = 0;
 
        transform.rotation = Quaternion.Euler(newRotation);
 
    }
 
}

저같은 경우에는 설정한 체력을 HitPointSystemModule에 설정해놨기 때문에 그쪽과 연결해 줬고

아래의 코드는 막대 체력바의 경우 카메라를 계속 쳐다보게 해줘서 편이성을 올려줬습니다. Quaternion부분의 이해가 부족하여(http://acecome.tistory.com/entry/02-Unity3D-%ED%9A%8C%EC%A0%84-%EC%A0%95%EB%A6%AC-Quaternion) 다음의 글을 참고

위의 코드를 Slider오브젝트 안에 넣어주면 됩니다.

[원형 체력바]

막대 체력바와 똑같이 하되 sourceimage를 준비해놓은 원형 체력바로 바꿔줍니다.

다른 부분도 역시 동일하게

그리고 simple로 설정되있는 imagetype을 filled로 바꿔주고 커스터마이징 합니다.

그리고 나머지는 크기 조절하고 넣어주고 캐릭터에 맞게 만들어줍니다.

내 소스코드:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class UnitHP : MonoBehaviour
{
    [SerializeField]
    private Slider hpValue;
    [SerializeField]
    private HitPointSystemModule hitpointSystemModule;
  
 
    private void Update()
    {
        hpValue.value = hitpointSystemModule.CurrentHP / hitpointSystemModule.MaxHp;
     
    }
 
}

체력만 넣어주고 카메라 회전부분은 빼줬습니다.

다시보는 완성본

고찰:

원형 체력의 경우 체력이 50% 남았거나 체력이 매우 적을 경우 방향에 따라 보이지 않는 경우가 빈번하여 막대 체력을 선택하게 되었다.

막대체력이 카메라를 보게하는 코드에서 카메라와 물체간의 방향벡터와 Quaternion을 이용하는 부분의 이해가 미비하여 다음에 더 자세히 공부해야겠다.