본문 바로가기
Unity 공부/Unity_2D

[Day 8] HUD 제작

S_O_O_N 2023. 7. 14. 23:00

[ HUD 제작 ] --> 인게임에서 표현되지 않는 수치를 보여주는 인터페이스 제작

  • Hierachy에 우클릭 후 Canvas 생성
  • C# 스크립트 생성(HUD)
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HUD : MonoBehaviour
{
    public enum InforType { Exp, Level, Kill, Time, Health} // 화면에 표시 될 요소
    public InforType type;

    Text myText; // 사용 될 오브젝트
    Slider mySlider; // 사용 될 오브젝트

    void Awake() // 오브젝트 초기화
    {
        myText = GetComponent<Text>();
        mySlider = GetComponent<Slider>();
    }

    private void LateUpdate()
    {
        switch (type) // 요소 별로 나누어 코드 작성
        {
            case InforType.Exp:
                break;

            case InforType.Level:
                break;
            
            case InforType.Kill:
                break;
            
            case InforType.Time:
                break;
            
            case InforType.Health:
                break;
        }
    }

}
  • Hierachy의 Canvas 우클릭 --> UI --> Slider 생성
        - 앵커(UI 오브젝트의 기준점 설정) 클릭 후 Shift(기준점 변경) + Alt(위치 변경) 입력 중 화면 상단 꽉 찬 이미지 클릭
        - Height = 7 설정
        - Slider\Interactable 체크 해제
        - Slider\Transition = None 설정
        - Slider\Navigation = None 설정
        - Slider\Handle Rect 항목 선택 후 Delete로 삭제
        - Hierachy의 Handle Slide Area 삭제
        - Hierachy의 Background의 앵커 클릭 후 Shift + Alt하여 오른쪽 하단 가장자리의 전체 확장 늘리기로 선택
        - Hierachy의 Fill Area의 앵커 클릭 후 Shift + Alt하여 오른쪽 하단 가장자리의 전체 확장 늘리기로 선택
        - Hierachy\Fill Area\Fill의 Left와 Right을 0으로 설정
  • Sprite\UI폴더의 Back 0를 Background 이미지로 설정(드래그&드랍)
  • Sprite\UI폴더의 Front 0를 Fill 이미지로 설정(드래그&드랍)
  • 기존의 HUD 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

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

    Text myText;
    Slider mySlider;

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

    private void LateUpdate()
    {
        switch (type)
        {
            case InforType.Exp:
                float curExp = GameManager.instance.exp; // 현재 Exp를 
                float maxExp = GameManager.instance.nextExp[GameManager.instance.level]; // 최대 Exp
                mySlider.value = curExp/maxExp; // 현재 Exp를 전체 비율로 나누어 화면에 표시
                break;

            case InforType.Level:

                break;
            
            case InforType.Kill:

                break;
            
            case InforType.Time:

                break;
            
            case InforType.Health:

                break;
        }
    }

}
  • Hierachy의 Slider에 Add Component
        - HUD (Script) // 우리가 작성한 코드
  • HUD의 Type를 Exp로 변경
  • Hierachy의 Canvas에 우클릭 후 UI --> Legacy --> Text 생성
        - 앵커 선택 후 Shift + Alt 입력 후 우측상단 선택
        - 텍스트 우측 정렬
        - Pos X = -2 | Pos Y = -8 설정 (자신이 보기에 알맞은 정도)
  • Font 폴더의 폰트 Text에 적용(드래그&드랍)
  • Text의 이름을 Level로 변경, Text = Lv.999로 변경 (텍스트 내용은 아무거나 상관X)
  • Hierachy 우클릭 후 UI --> Image 생성
        - 이름을 Kill로 변경
        - Icon 0 적용(드래그&드랍)
        - 앵커 선택 후 Shift + Alt 입력 후 좌측 상단 선택
        - Pos X = 2 | Pos Y = -8 설정 (자신이 보기에 알맞은 정도)
  • Level을 Ctrl + D로 복사 --> Image로 집어넣기(드래그&드랍)
        - 앵커 선택 후 Shift + Alt 입력 후 좌측 선택
        - Pos X = 9 | Pos Y = -8 설정 (자신이 보기에 알맞은 정도)
        - 이름을 Kill Text로 변경, Text = 9999로 변경 (텍스트 내용은 아무거나 상관X)
  • 기존의 HUD 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

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

    Text myText;
    Slider mySlider;

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

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

            case InforType.Level:
                myText.text = string.Format("Lv.{0:F0}", GameManager.instance.level); // Level Text를 현재 킬수로 업데이트
                break;
            
            case InforType.Kill:
                myText.text = string.Format("{0:F0}", GameManager.instance.kill); // Kill Text를 현재 킬수로 업데이트
                break;
            
            case InforType.Time:

                break;
            
            case InforType.Health:

                break;
        }
    }

}
  • Text 오브젝트에 Add Component --> HUD Type 알맞게 설정
  • Level을 Ctrl + D로 복사
        - 앵커 선택 후 Shift + Alt 입력 후 상단 중앙으로 배치
        - Text 중앙정렬
        - Pos Y = -8로 설정
        - 이름을 Timer로 변경, Text = 00:00으로 변경
        - 눈에 잘 띄는 색상으로 변경 ex) 흰색
        - Font Size를 다른 Text들 보다 크게 설정
        - HUD Type를 Time으로 변경
  • 기존의 HUD 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

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

    Text myText;
    Slider mySlider;

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

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

            case InforType.Level:
                myText.text = string.Format("Lv.{0:F0}", GameManager.instance.level);
                break;
            
            case InforType.Kill:
                myText.text = string.Format("{0:F0}", GameManager.instance.kill);
                break;
            
            case InforType.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);
                break;
            
            case InforType.Health:

                break;
        }
    }

}
  • 기존의 GameManager 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    public static GameManager instance;
    [Header("# Game Conrol")]
    public float gameTime;
    public float maxGameTime = 2 * 10f;
    [Header("# Player Info")]
    public int hp; // 체력 변수
    public int maxHp = 100; // 최대 체력 변수
    public int level;
    public int kill;
    public int exp;
    public int[] nextExp = { 3, 5, 10, 100, 150, 210, 280, 360, 450, 600 };
    [Header("# Game Object")]
    public PoolManager pool;
    public Player player;

    private void Awake()
    {
        instance = this; 
    }

    void Update()
    {
        gameTime += Time.deltaTime;

        if (gameTime > maxGameTime){
            gameTime = maxGameTime;
        }
    }


    public void GetExp()
    {
        exp++;
        if (exp == nextExp[level])
        {
            level++;
            exp = 0;
        }
    }
    
}
  • Hierachy의 Canvas에 우클릭 후 Create Empty
        - 이름을 Hp로 변경
        - Width = 12 | Height = 4로 설정
  • Canvas의 Exp를 Ctrl + D로 복사 후 Hp에 넣어주기(드래그&드랍)
        - 이름을 Hp Slider로 변경
        - Slider의 앵커 선택 후 Shift + Alt 입력 후 하단 꽉 찬 이미지 선택
        - Height = 4로 설정
        - Pos Y = -10으로 설정
  • Sprite\UI폴더에 Back 1을 Background 오브젝트에, Front 1을 Fill 오브젝트에 넣어주기(드래그&드랍)
  • 기존의 HUD 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

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

    Text myText;
    Slider mySlider;

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

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

            case InforType.Level:
                myText.text = string.Format("Lv.{0:F0}", GameManager.instance.level);
                break;
            
            case InforType.Kill:
                myText.text = string.Format("{0:F0}", GameManager.instance.kill);
                break;
            
            case InforType.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);
                break;
            
            case InforType.Health:
                float curHp = GameManager.instance.hp; // 현재 Hp
                float maxHp = GameManager.instance.maxHp; // 최대 Hp
                mySlider.value = curHp / maxHp; // 현재 Hp를 최대 Hp 비율로 나누어 화면에 표현
                break;
        }
    }

}
  • Hp Slider의 HUD Type를 Hp로 설정
  • 기존의 GameManager 스크립트에 코드 추가
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    public static GameManager instance;
    [Header("# Game Conrol")]
    public float gameTime;
    public float maxGameTime = 2 * 10f;
    [Header("# Player Info")]
    public int hp;
    public int maxHp = 100;
    public int level;
    public int kill;
    public int exp;
    public int[] nextExp = { 3, 5, 10, 100, 150, 210, 280, 360, 450, 600 };
    [Header("# Game Object")]
    public PoolManager pool;
    public Player player;

    private void Awake()
    {
        instance = this; 
    }

    void Start()
    {
        hp = maxHp; // 현재 체력과 최대 체력이 같도록 설정
    }

    void Update()
    {
        gameTime += Time.deltaTime;

        if (gameTime > maxGameTime){
            gameTime = maxGameTime;
        }
    }


    public void GetExp()
    {
        exp++;
        if (exp == nextExp[level])
        {
            level++;
            exp = 0;
        }
    }
    
}
  • C# 스크립트 생성(Follow)
    ㅡ아래는 완성된 코드ㅡ
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Follow : MonoBehaviour
{
    RectTransform rect; // RectTransform 변수

    void Awake()
    {
        rect = GetComponent<RectTransform>(); // 오브젝트 변수 초기화
    }

    private void FixedUpdate()
    {
        rect.position = Camera.main.WorldToScreenPoint(GameManager.instance.player.transform.position); 
        // 스크린과 월드의 좌표가 다르기 때문에, 월드 상의 오브젝트 위치를 스크린 좌표로 변환
    }
}
  • Follow 스크립트를 Hp 오브젝트에 추가(드래그&드랍)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

★Slow and Steady★

'Unity 공부 > Unity_2D' 카테고리의 다른 글

[Day 10] 무기 장착 표현  (0) 2023.07.16
[Day 9] 능력 업그레이드 구현  (0) 2023.07.15
[Day 7] 타격감 있는 몬스터 처치 구현  (0) 2023.07.13
[Day 6] 자동 원거리 공격 구현  (0) 2023.07.12
[Day 5] 회전하는 근접무기 구현  (0) 2023.07.11

'Unity 공부/Unity_2D' Related Articles

티스토리툴바