5-4 유니티로 화살 피하기 게임 만들기

5.8  UI 표시하기

5.8.1 UI를 표시하고 갱신하는 감독 만들기

1. UI 부품을 Scene 뷰에 배치한다
2. UI를 갱신하는 감독 스크립트를 작성한다.
3. 빈 오브젝트를 만들고 작성한 스크립트를 적용한다.

 

5.8.2 HP 게이지 배치하기

Image를 사용해 HP 게이지를 만든다.

image에 resource를 배치

※ 앵커 포인트 설정

• 화면의 크기가 바뀌어도 화면 오른쪽 위에 HP게이지가 표시되도록 앵커 포인트를 변경
• 앵커 포인트 : 화면 크기가 바뀔 때 어디를 원점으로 해서 UI 부품 좌표를 다시 계산하는가?
• 앵커 포인트를 적절히 설정하면 실행하는 기기의 화면 크기에 의존하지 않는 UI를 만들 수 있음

오른쪽 상단 기준으로 앵커 포인트를 잡아준다.

 

position과 scale 값을 설정해준다.

 

※ HP 게이지 줄여 나가기

• HP 게이지를 줄이려면 UI 오브젝트의 Image에서 제공하는 Fill 기능을 사용한다.
• Fill Amount 변수 값을 바꾸면 이미지 표시 영역을 줄이거나 늘릴 수 있다.
• 게이지를 표시하는 방법에는 원형으로 이미지를 잘라 내는 방법 말고도 상하 방향, 좌우 방향, 선형으로 게이지를 만드는 방법 등 여러가지가 있다.

Image의 타입을 Filled 로 설정, Fill Origin을 Radial 360으로 설정

다음과 같이 설정한다.

 

예제 말고, 직접 해보니까, 화면이 좀 떠서, 비율에 맞게 맞춰봤다.

 

5.9 UI를 갱신하는 감독 만들기

5.9.1 UI를 갱신하는 흐름 생각하기

1. 화살 컨트롤러는 감독에게 HP가 감소되었다고 알린다.
2. 감독은 HP 게이지의 UI를 갱신한다.

 

5.9.2 UI를 갱신하는 감독 만들기

※ 감독 스크립트 작성하기 -> 빈 오브젝트 만들기 -> 빈 오브젝트에 감독 스크립트 적용하기

gameDirector

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

public class GameDirector : MonoBehaviour
{
    GameObject hpGauge;
    void Start()
    {
        this.hpGauge = GameObject.Find("HPGauge"); 
        // Find() 를 사용해서 Scene에서 HPGauge 오브젝트를 찾는다.
    }

    public void DecreaseHp()
    {
        this.hpGauge.GetComponent<Image>().fillAmount -= 0.1f; 
        // image의 옵션값 fillAmount의 값을 변경시킨다.
    }
}

빈 오브젝트를 만들어 GameDirector을 적용시킨다.

 

 

5.9.3 HP가 줄었다고 감독에게 알리기

ArrowController

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

public class ArrowController : MonoBehaviour
{

    GameObject player;

    void Start()
    {
        this.player = GameObject.Find("player");
    }

    void Update()
    {
        // 프레임 마다 등속으로 낙하시킨다.
        transform.Translate(0, -0.1f, 0);

        // 화면 밖으로 나오면 오브젝트를 소멸시킨다.
        if (transform.position.y < -5.0f)
        {
            Destroy(gameObject);
        }

        // 충돌 판정
        Vector2 dir = transform.position - this.player.transform.position;
        float d = dir.magnitude;
        float arrowRange = 0.5f;
        float playerRange = 1.0f;

        if (d < arrowRange + playerRange)
        {
            // 추가**
            
            // 감독 스크립트에 플레이어와 화살이 충돌했다고 전달한다.
            GameObject director = GameObject.Find("GameDirector");
            director.GetComponent<GameDirector>().DecreaseHp(); 
            // GameDirector에 public으로 선언한 DecreaseHP() 메서드를 호출한다.
            
            // **추가

            // 충돌한 경우는 화살을 지운다.
            Destroy(gameObject);
        }
    }
}

HP가 0이 되어도 게임이 끝나지 않는다.

 

 

※ PC에서는 화살표 키로 작동하지만, 모바일에서는 버튼의 기능을 넣거나, 화면을 반으로 쪼개서 좌우 터치를 확인 할 수 있게끔 작업을 해야 할 필요성이 보인다.