유니티 RPG - 5. UI_1

Intro

이번포스팅에서는 플레이어 체력 및 마나와 그것을 표시하는 UI를 만들어보려합니다.

     

UI 만들기

• 하이어라키에서 Canvas를 하나 만들어준 뒤, 플레이어 체력을 표시할 슬라이더를 만들어줍니다.

• 색상도 빨강, 파랑으로 맞춰줍니다.

   

 

• 그룹으로 묶어서 관리하는것이 좋을것같아 PlayerUI라는 빈 오브젝트안에 넣어주었습니다.

• 체력과 마나를 표시할 텍스트도 있으면 좋겠죠.

 

     

슬라이더 게이지 조절

• 슬라이더에는 Value 라는것이 있습니다. 이 Value 값에 따라서 슬라이더 안에있는 Fill 가 채워지게됩니다.

• 따라서 Hp와 Mp가 깎이거나 차오르는것은 이 Value를 조절하여 만들면됩니다.

• Slider를 만들면 기본적으로 Value값은 0 ~ 1 입니다. 이 값은 인스펙터창에서 조절할 수 있습니다.

   

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

public class UIPlayerStats : MonoBehaviour
{
    [SerializeField] private Slider hpBar;
    [SerializeField] private Slider mpBar;

    [SerializeField] private Text hpText;
    [SerializeField] private Text mpText;

    [SerializeField] private PlayerInfo playerInfo;

    private void Start()
    {
        SetHMpText();
        SetHMpAmount();
    }

    private void Update()
    {
        SetHMpText();
        SetHMpAmount();
    }

    // Hp, Mp 텍스트 표기 형식
    private void SetHMpText()
    {
        hpText.text = playerInfo.curHp + " / " + playerInfo.maxHp;
        mpText.text = playerInfo.curMp + " / " + playerInfo.maxMp;
    }

    // 슬라이더 Value 조절
    private void SetHMpAmount()
    {

        float hpFillAmount = (float)playerInfo.curHp / playerInfo.maxHp;
        hpBar.value = hpFillAmount;
        float mpFillAmount = (float)playerInfo.curMp / playerInfo.maxMp;
        mpBar.value = mpFillAmount;
    }
}

   

• Hp, Mp 텍스트의 표기형식을 “9999(현재)/9999(최대)” 로 지정했습니다.

• value에 따라 게이지가 표시되도록 설정했습니다.

• 생각대로 동작되는지 확인하기위해 Space바를 누르면 현재체력이 깎이도록 해보았습니다.