[클론코딩_유니티_골드메탈] 뱀서라이크 따라만들기 10 (HUD📐제작하기)

https://www.youtube.com/watch?v=ip0xffLSWlk&list=PLO-mt5Iu5TeZF8xMHqtT_DhAPKmjF6i3x&index=13 

---

1. UI 캔버스

하이어라이키 UI > Canvas 메뉴로 캔버스 생성

RectTransform : 스크린 전용 Transform 역할 컴포넌트

Screen-Overlay : 스크린에 그대로 얹는 형태

Screen-Camera : 스크린을 카메라에 맞추는 형태

- 메인카메라를 드래그하면 크기가 메인 카메라로 된다.

World Space : 월드 공간에 배치하는 형태

 

테스트를 위한 Text 오브젝트 추가

- Canvas > UI > Legacy > Text

- width/hight = 400 100 , bold, white, scale : 70

 

문제점, 해상도에 따라 크기가 바뀜

UI Scale Mode를 Scale with Screen size로 변경

References Resolution을 픽셀 퍼펙트 카메라와 동일하게 적용

Match와 Pixel Per Unit도 적절하게 조절

- Match 0.5, Reference Pixel Per Unit 18(스프라이트가 대부분 18이기 때문에)

---

2. 스크립트 준비

HUD 스크립트 파일 생성(HeadUpDisplay)

 

다루게 될 데이터를 미리 열거형 enum으로 선언, 선언한 열거형을 타입으로 추가 선언

using UnityEngine.UI;

public class HUD : MonoBehaviour
{
    public enum InfoType { Exp, Level, Kill, Time, Health}
    public InfoType type;

    Text myText;
    Slider mySlider;

    void Awake()
    {
        myText = GetComponent<Text>();
        mySlider = GetComponent<Slider>();
    }
}

 

UI 컴포넌트를 사용할 때는 UnityEngine.UI 네임스페이스 사용(Text)(using UnityEngine.UI)

 

Text와 Slider 변수 선언 및 초기화

Text

void Awake()

 

LateUpdate()에서 switch ~ case문으로 로직 나누기

    private void LateUpdate()
    {
        switch (type)
        {
            case InfoType.Exp:

                break;
            case InfoType.Level:

                break;
            case InfoType.Kill:

                break;
            case InfoType.Time:

                break;
            case InfoType.Health:

                break;
        }
    }

 

---

3. 경험치 게이지

canvas > UI > Slider 메뉴로 슬라이더 추가하기

Rect Transform은 길이와 높이, 위치, 앵커로 구성

앵커 : UI 오브젝트의 기준점 설정, 변경시 오른쪽 속성이 달라짐

- Shift : 기준점 변경

- Alt : 위치(크기) 변경

우상단 클릭

Height 7로 설정

플레이어가 게이지를 임의로 수정하면 안되니, Slider의 Interactible 해제

Transition : 변환(None)

Navigation : UI의 Tab 포커싱 순서(None)

Handle Rect 항목을 선택하고 Delete 혹은 Backspace 눌러 비우기

 

자식 오브젝트로 있는 핸들 오브젝트를 과감히 삭제

자식 오브젝트(Background,Fill Area)들의 앵커를 전체 확장 늘리기로 선택

Fill 자식 오브젝트의 여백을 0으로 초기화(핸들 크기)

 

Sprite의 UI에서 Back0를 드래그

자식 오브젝트의 image 컴포넌트에서 스프라이트 변경

- FillArea에서 Back 0

- Fill 에서 Front 0  //적용이 되지 않아 임의의 Color 삽입

 

데이터 연동을 위해 HUD.cs로 이동

슬라이더에 적용할 값 : 현재 경험치 / 최대 경험치

    private void LateUpdate()
    {
        switch (type)
        {
            case InfoType.Exp:
                float curExp = GameManager.instance.exp;
                float maxExp = GameManager.instance.nextExp[GameManager.instance.level];
                mySlider.value = curExp / maxExp;
                break;

 

Slider에 HUD스크립트 추가

열거형을 변수로 활용하면 일고 사용하기 편해요.

EXP로 Slider이름 변경

---

4. 레벨, 킬수 텍스트

TextMesh Pro의 텍스트는 한글로 사용하기에 살짝 번거로워요

UI > Legacy > Text

앵커를 사용하여 오른쪽 상단에 고정

Text 컴포넌트의 Alignment에서 오른쪽 정렬 설정

X, Y 축 위치를 조절하여 정리된 UI 배치하기(X:-2 Y:-8)

미리 준비된 네오둥근모꼴 폰트를 Font에 적용

Font Size 6으로 수정

Text와 이름 변경

UI > Image 메뉴로 이미지 생성 후, 아이콘 스프라이트 적용

- UI에서 Icon 0 Scource Image에 할당

Set Native Size : 오브젝트 크기를 스프라이트의 원래 크기로 변경

이미지는 레벨 텍스트의 반대편으로 배치(X:-2 Y:-8)

레벨 텍스트를 한번 복사해서 킬수 이미지의 자식으로 넣기

Image의 Hight 8로 조정

Alignment의 세로 정렬을 중앙으로 설정

이름 변경(Kill, Kill Text)

 

HUD 스크립트

            case InfoType.Level:
                myText.text = string.Format("Lv.{0:F0}", GameManager.instance.level);
                break;
            case InfoType.Kill:
                myText.text = string.Format("{0:F0}", GameManager.instance.kill);
                break;

◆Format : 각 숫자 인자값을 지정된 형태의 문자열로 만들어주는 함수

●string.Format("Lv.{0:F0}",GameManager.instance.level);

▶인자 값의 문자열이 들어갈 자리를 {순번} 형태로 작성

▶F0,F1,F2 : 소수점 자리를 지정

 

스크립트 저장 후, 각 텍스트 오브젝트에 스크립트 추가 및 타입 설정

---

5. 타이머 텍스트

레벨 텍스트 복사하여 중앙으로 배치(앵커:ctrl+alt+위클릭, y:-8,size:9, 색상:white)

HUD 스크립트의 타입을 Timer로 설정

 

HUD에서 흐르는 시간이 아닌 남은 시간부터 구하기

            case InfoType.Time:
                float remainTime = GameManager.instance.maxGameTime - GameManager.instance.gameTime;
                int min = Mathf.FloorToInt(remainTime / 60);
                int sec = Mathf.FloorToInt(remainTime % 60);
                myText.text = string.Format("{0:D2}:{1:D2}", min,sec);

- 분과 초로 구분

- 60으로 나누어 분을 구하되 Mathf.FloorToInt()로 소수점 버리기

- A % B  : A를 B로 나누고 남은 나머지

▶D0,D1,D2 : 자리 수를 지정

---

6. 체력 게이지

게임 매니저에서 체력, 최대 체력 변수 선언

Canvas > Create Empty

캔버스에서 오브젝트 생성을 하면 RectTransform이 들어있어요.

이름을 Health로 넓이를 가로 12, 세로 4로 설정

Exp복사해서 Health의 자식으로 Health Slider 생성

슬라이드가 부모 오브젝트 넓이와 같도록 앵커 설정(shift+alt+클릭)

Height 4로, Pos Y -12로 설정 //문제발생으로 -8로 설정하였다.

슬라이드의 각 스프라이트를 변경

- UI > Back1를 Health Slider의 Background로 설정

- UI > Front1를 Fill Areas의 Background로 설정

 

HUD 스크립트로 와서 체력 로직은 경험치 코드를 재활용하여 작성

            case InfoType.Health:
                float curHealth = GameManager.instance.health;
                float maxHealth = GameManager.instance.maxHealth;
                mySlider.value = curHealth / maxHealth;
                break;
        }

HUD 스크립트의 타입을 Health로 설정

문제점

1. 비어있는 체력창

2. 시네머신에 따라 플레이어가 체력바와 유격이 발생함

 

시작할 때 현재 체력과 최대 체력이 같도록 로직 추가

public class GameManager : MonoBehaviour
{
	//...

    void Start()
    {
        maxHealth = 100;
        health = maxHealth;
        Debug.Log(maxHealth);
    }

 

플레어어 따라가는 Follow 스크립트 생성

RectTransform 변수 선언 및 초기화(UI는 RectTransform)

public class Follow : MonoBehaviour
{
    RectTransform rect;
    private void Awake()
    {
        rect = GetComponent<RectTransform>();

    }

    private void FixedUpdate()
    {
        rect.position = Camera.main.WorldToScreenPoint(GameManager.instance.player.transform.position);
    }

}

FixedUpdate단위로 플레이어가 움직여서 같게 구현

월드 좌표와 스크린 좌표는 서로 달라요

- Camera.main.WorldToScreenPoint() : 월드 상의 오브젝트 위치를 스크린 좌표로 변환

완성된 스크립트를 체력 UI 오브젝트에 추가

 

---

깃허브 올리기

Commit : ver 1.10
Description : HUD //It's a bit of a mess.

 

https://github.com/mekain80/CloneCode_Undead_Survivor

GitHub - mekain80/CloneCode_Undead_Survivor: https://www.youtube.com/watch?v=MmW166cHj54&list=PLO-mt5Iu5TeZF8xMHqtT_DhAPKmjF6i3x