[Unity3D] UI - HP, MP 에너바 조절하기. [Part 1]

※ 주의 

이 글은 아마추어가 개인적으로 생각하여 작성하는 것으로, 이곳에 나오는 내용을 맹신하지 않는것을 당부드립니다.

Menu

0. 미리보기

1. HP,MP껍데기 및 기능 만들기.

2. HP,MP 조절을 위한 데미지, 리커버리 만들기.

1. HP, MP껍데기 및 기능 만들기.

- 배칭(드로우콜)을 줄이기 위해 유니티에서 제공하는 아틀라스 사용.

텍스쳐 타입 : sprite (2D and UI)
스프라이트 모드 : Multiple

패킹 태그 : UI

위의 셋팅이 끝난 뒤 스프라이트 에디터를 누른다.

Slice를 누면 밑에 창이 나오는데, 그 창에서 Slice를 누르면 이미지들이 자신의 크기에 맞게 잘린다.

이미지가 알맞게 잘렸으면 Apply를 눌러 빠져나온다.

메인 이미지에 붙어있는 ◀단추를 누르면 잘린 이미지들이 자식으로 들어가 있는것을 확인 할 수 있다.

 

※ 다른 이미지가 필요해졌을 때 패킹 태그를 똑같은 이름으로 지정하면 똑같은 스프라이트 팩에 들어가게 된다.

이러한 설정(아틀라스)을 하지 않으면, 캔버스에 이미지를 하나 만들어 쓸때마다 배치(Batches)가 증가하게 된다.

모바일 게임에 경우 이러한 배치수를 100개를 상한선으로 두고 있다.

※ 배치수가 너무 많다면 게임을 원할하게 돌아가게 할 수 없다.

스프라이트 팩에들어있는 이미지는 몇개를 꺼내쓰든 1개의 배치만을 소모한다.

게임창에 Stats를 누르면 배치수를 확인 할수 있는데, SkyBox 배치 1개, 이미지 배치수가 1개가 들어간 것을 볼 수 있다.

※ 사용한 이미지는 총 5개다.

여기서 아틀라스화 하지 않은 이미지를 쓰면 배치는 바로 증가하게 된다.

-------------------------------------------------------------------------------------------------------------------

- HP 및 MP를 눌러 이미지 타입을 Simple에서 Filled로 전환한다.

그 후 

Fill Method : Horizontal

Fill Origin : Left

으로 전환한 뒤

Fill Amount를 마우스로 수동으로 조절해보면 밑의 그림처럼 변환되는것을 확인 할 수 있다.

Fill Amount의 값은 0 ~ 1의 값만을 가지고 있다.

실시간으로 변하는 체력을 표시하고 싶다면 Fill Amount = (현재체력 / 체력의 최대치)로 처리하여 넣으면 된다.

이제 코드로 플레이어의 체력을 변화시켜보도록 하자.

PlayerInfo스크립트를 만들어 플레이어 컴포넌트에 추가한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 이걸 using시켜줘야 Image의 자료형을 쓸수 있다.
 
public class PlayerInfo : MonoBehaviour
{
    // 공개
    public GameObject[] Effect;
    public Image[] Img;          // HP,MP이미지.
 
    public float MAX_HP;         // HP 최대치.
    public float MAX_MP;         // MP 최대치.
    public float p_HP;           // 현재 HP.
    public float p_MP;           // 현재 MP.
 
    // 플레이어 UI정보 갱신.
    // 인자 : (HP냐? MP냐?, 데미지냐? 체력회복이냐?, 데미지 혹은 체력회복의 수치는 얼마만큼이냐?)
    public void UIUpdate(string _Type, string _InfoType, float _Value)
    {
        float Type    = 0;   // HP또는 MP의 현재 수치.
        float MAXType = 0;   // HP또는 MP의 최대치.
        int Index     = 0;   // HP또는 MP의 이미지 인덱스.
 
        switch (_InfoType)
        {
            case "HP":
            {
                Index   = 0;
                Type    = p_HP;
                MAXType = MAX_HP;
 
                // 리커버리면 회복
                if (_Type == "Recover")
                    p_HP += _Value;
                // 리커버리가 아니면 데미지.
                else
                    p_HP -= _Value;
 
                break;
            }
            case "MP":
            {
                Index   = 1;
                Type    = p_MP;
                MAXType = MAX_MP;
 
                if (_Type == "Recover")
                    p_MP += _Value;
                else
                    p_MP -= _Value;
 
                break;
            }
        }
 
        // 인덱스 번째의 이미지를 갱신시킨다.
        // 만약, 변화시켜야 되는 이미지가 HP이고, 체력의 최대치가 100이라고 하자.
        // 20의 데미지를 받아 체력이 80남았다고 하자, 그러면 체력이 80이 남은것을 보여줘야 한다.
        // fillAmount의 값은 0 ~ 1가 끝이기 때문에 체력을 소수점으로 변환해줘야 표현이 가능해진다.
        // 80 / 100 = 0.8 요컨데 퍼센트로 바꿔서 표현한다 생각하면 된다.
        Img[Index].fillAmount = Type / MAXType;
    }
}
 

플레이어의 인스펙터창 정보.