[UNITY] HP 바 구현 - #1

3D 공간 상에 위치하는 HP 바를 만드는 방법에 대해서 소개하겠다.

 

#1

HP 바의 대상이 되는 오브젝트 하위에 Canvas 와 Slider 를 추가해서 만드는 방법.

 

우선, Hierarchy 에 3D 오브젝트인 캡슐을 하나 추가하고, 이름을 MyCharacter 라 하였다.

그리고, MyCharacacter.cs 를 추가해서 MyCharacter 오브젝트에 AddComponent로 추가해 주었다.

이렇게 추가된 MyCharacter 가 HP 바 대상이 될 것이다.

 

MyCharacter 에 다음 순서대로 HP 바가 될 Slider 를 추가한다.

아래 그림에서 보듯이, Slider 를 추가하면, Canvas 도 추가된 것을 볼 수 있는데, Canvas 를 선택하고 Render Mode 를 World Space 로 바꿔 준다. 추가로, Canvas Scalar 와 Graphic Raycaster 컴포넌트 비활성화 해 준다.(Remove Component 를 해도 된다.)

이렇게 하면 추가된 Slider 가 아래 그림과 같이 MyCharacter 와 비교했을 때 너무 크게 출력이 될 것이다. 이는 UI  객체와 3D 공간상의 스케일이 맞지 않기 때문에 발생하는 현상이다.

아래 순서대로 Canvas 와 Slider 의 RectTransform 을 수정한다.

위 그림에서 Handle Slide Area 는 삭제한다. 필요없다.

위 그림에서  Canvas 의 Pos Y 값을 변경하였다. MyCharacter 위에 HP 바를 출력하기 위해서이다.

지금까지 그림 순서대로 설정하였다면 아래 그림과 같이 보일 것이다.

나오긴 하는데 약간 이상하다. 이유는 기본 UI 객체보다 너무 작기 때문이다. 이는 다음 각 이미지의 Pixels Per Unit Multiplier 값을 30으로 변경하면 이쁘게(?) 출력될 것이다. Pixels Per Unit Multiplier 의 의미는 Unit 당 차지하는 Pixel 수를 지정하는 것으로 숫자가 클 수록 더 세밀하게 이미지를 그려지게 된다. 

잘 나오게 되었다.

하지만 여기에도 아직 문제가 있다. HP바가 카메라가 바뀜에 따라서 보일 때가 있고, 안보일 때가 있다. 이는 HP바 자체도 3D 오브젝트 처럼 처리되기 때문이다.

이는 HP바를 항상 카메라쪽으로 향하도록 스크립트에서 처리해 줘야 한다.

MyCharacter.cs 를 열어서 아래와 같이 수정한다.

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

public class MyCharacter : MonoBehaviour
{	
    [SerializeField] Canvas HpBar = null;

    // Update is called once per frame
    void Update()
    {
    	// 수정
    	// HP바를 항상 메인카메라를 바라보도록 하게 한다.
        //HpBar.transform.LookAt(Camera.main.transform.position);
        
        // 카메라가 바라보고 있는 방향으로 설정하면 좀 더 간결하게 할 수 있다.
        transform.rotation = Camera.main.transform.rotation;
	}
}

코드를 수정하고, 아래와 같이  HP바를 연결해 준다.

추가로 Slider 를 아래 그림과 같이 y축 기준 180도를  돌려 준다. 안그러면 HP바가 반대로 보일 것이다. 이는 Canvas 의 정면을 카메라로 향하도록 수정한 것이다. 그렇게 하다 보니, Slider 가 반대로 보이게 되었다.

코드 수정으로 y축으로 회전을 하지 않아도 된다.

 

 

아래는 최종 결과이다.