개요

마지막 기사 프로젝트를 기반으로 라이프 게이지 UI를 추가합니다.
본 기사는 Tanks! (대전형의 전차 게임)의 내용을 일부 발췌해 간략화한 것이 됩니다.

절차

플레이어의 발에 라이프 게이지 표시

Hierarchy 뷰에서 슬라이더 추가
Create > UI > Slider

플레이어를 추종하기 위해 Canvas를 LowMan (Player) 아래로 이동합니다.

Canvas에 대해 다음과 같이 변경

Canvas의 크기 조정 가능
Inspector > Canvas Scaler(Script) > Render Mode > World Space로 변경

Canvas의 표시 위치, 크기를 Player의 발밑이 되도록 변경
Inspector > Rect Transform > Position (0, 0.1, 0)으로 변경
Inspector > Rect Transform > Width와 Height를 2로 변경
Inspector > Rect Transform > Rotation (90, 0, 0)으로 변경

슬라이더에 대해 다음과 같이 변경

Slider를 Canvas 전체로 늘려 표시
Hierarchy 뷰에서 Slider와 부하의 Background, Fill Area, Fill을 동시에 선택한 상태에서 Anchor 변경
Inspector > Anchor Presets > Alt 키를 누른 상태에서 오른쪽 하단의 stretch를 선택합니다.

슬라이더의 노브 부분의 UI 삭제
Hierarchy 뷰에서 Handle Slide Area 삭제

사용자 조작으로 변경사항 사용 안함
Inspector > Slider(Script) > Intractable 확인란 선택 취소
Inspector > Slider(Script) > Transition None으로 변경

최대값 설정
Inspector > Slider(Script) > Max Value를 100으로 변경

초기값 설정
Inspector > Slider(Script) > Value를 100으로 변경

슬라이더의 색상을 임의의 색상으로 변경
슬라이더 아래의 Fill을 선택한 상태에서
Inspector > Image(Script) > Color 를 임의의 색으로 변경

데미지를 입을 경우 Slider의 값을 스크립트에서 뺍니다.
나중에 설명하는 LifeGaugeController.cs를 만들고 Slider에 연결

라이프 게이지를 원형 표시로 변경

Wheel.png 로컬로 저장

Project 보기 > Sprites 폴더 생성

Sprites 폴더를 선택한 상태에서 마우스 오른쪽 버튼을 클릭하고 Import New Assets ...을 선택하여 Wheel.png를 Import합니다.

Wheel에 대한 다음 변경 사항을 추가합니다

Inspector > Texture type > Sprite(2D and UI)로 변경
Unapplied import settings 대화 상자가 표시되므로 Apply를 선택합니다.

소스 코드

Player.cs

public class Player : MonoBehaviour
{
    // 変更がない箇所は省略

    LifeGaugeController m_Life;

    void Awake ()
    {
        m_Life = GetComponentInChildren<LifeGaugeController>();
    }

    public void TakeDamage (int damage)
    {
        // ライフゲージに反映
        m_Life.OnGaugeUpdate(hp);
    }
}

LifeGaugeController.cs

public class LifeGaugeController : MonoBehaviour {

    private Slider m_Slider;                // 現在のライフを示すスライダー
    private Quaternion m_RelativeRotation;  // シーンの開始時のローカル空間のローテーション

    private void Awake()
    {
        m_Slider = GetComponent<Slider>();
    }

    private void Start()
    {
        m_RelativeRotation = transform.parent.localRotation;
    }

    private void Update()
    {   
        // スライダーがプレイヤーの方向に追従して回転してしまうのを防ぐため
        // 初期値を設定し直す
        transform.rotation = m_RelativeRotation;
    }

    public void OnGaugeUpdate(float life)
    {
        m_Slider.value = life;
    }
}

요약

소스 코드는 GitHub에 업로드 중입니다.