HUD, TextMeshPro 사용하여 텍스트 UI 설정하기

문제 1 - 시작하기

참고: 이 연습의 구조 중 일부는 연습 7에서 수행한 것과 일치합니다. 이 연습의 시작점으로 그 솔루션을 사용하고 싶다면 제가 한 것처럼 계속 진행하세요!

새 Unity 프로젝트를 생성하고 현재 씬을 저장합니다. 화면의 네 면 모두에 카메라에 에지 콜라이더 2D 컴포넌트를 추가합니다. (게임에서) 중력을 끕니다. 모든 에지 콜리더와 바운서의 콜리더에 탄력 있고 마찰이 없는 피직스 머티리얼 2D를 추가합니다.

문제 2 - HUD 추가

계층 구조 창에 캔버스를 추가하고 캔버스 HUD의 이름을 바꿉니다. 캔버스의 캔버스 스케일러 구성 요소에서 UI 스케일 모드를 1280 x 720 참조 해상도를 사용하여 화면 크기에 따라 스케일링으로 변경합니다. HUD 캔버스에 HUD 태그를 추가합니다.

캔버스에 Text - TextMeshPro 컴포넌트를 추가하고 이름을 BounceText로 바꿉니다. Text - TextMeshPro 컴포넌트의 특성을 변경하여 화면 상단 근처의 가로 중앙에 적당히 큰 흰색 텍스트가 표시되도록 합니다.

새 HUD 스크립트를 생성하고 HUD 캔버스에 첨부합니다. IDE에서 스크립트를 엽니다.

스크립트 상단에 문서 주석을 추가합니다. 인스펙터에서 필드를 채울 수 있도록 TextMeshProUGUI 컴포넌트를 담을 필드를 선언하고 [SerializeField]로 표시합니다. TextMeshProUGUI 클래스는 TMPro 네임스페이스에 있다는 것을 기억하세요. 인스펙터에서 필드를 채웁니다.

게임에서 발생한 바운스 횟수를 저장하는 다른 필드를 추가하고 해당 필드를 0으로 초기화합니다.

Start 메서드에서 TextMeshProUGUI 필드의 텍스트 프로퍼티를 게임에서 발생한 바운스 수로 설정합니다. 이를 컴파일하려면 ToString 메서드를 사용해야 합니다.

게임을 실행하면 화면 상단 중앙 근처에 0이 표시되어야 합니다. 물론 이 시점에서는 변경되지 않습니다!

게임에서 발생한 바운스 횟수를 증가시키는 공용 AddBounce 메서드를 추가하고 TextMeshProUGUI 필드의 텍스트 속성을 적절하게 업데이트하세요.

문제 3 - 바운스 카운팅

무언가와 충돌한 시점을 감지하는 Bouncer라는 Unity 클래스(스크립트)를 구현합니다. 충돌이 발생하면 HUD 스크립트에서 AddBounce 메서드를 호출해야 합니다. 태그를 통해 HUD를 찾을 수 있고 GetComponent 메서드를 사용하여 HUD에 첨부된 HUD 스크립트에 대한 참조를 가져올 수 있다는 점을 기억하세요. 필드를 추가하고 Start 메서드에서 이 작업을 수행하여 충돌 시 AddBounce 메서드를 쉽게 호출할 수 있도록 했습니다. 또한 Start 메서드에 힘을 추가하여 오브젝트를 움직여야 합니다.

프로젝트에 바운서 게임 오브젝트의 스프라이트를 추가하고, 게임에 바운서 게임 오브젝트를 추가한 다음 Rigidbody2D, 일부 콜리더 2D 및 바운서 스크립트를 게임 오브젝트의 컴포넌트로 첨부합니다.

게임을 실행하면 바운서가 화면 가장자리에 부딪힐 때마다 바운스 카운터가 1씩 증가해야 합니다.

연습 솔루션

참고: 제공된 Unity 프로젝트를 열면 제목 없음 씬에서 시작될 것입니다. 프로젝트 창의 Scenes 폴더에서 Scene0을 더블클릭하여 올바른 씬을 엽니다.

---

코드 작성 (오류 발생)

HUD 스크립트 (HUD 오브젝트에 부착)

public class HUD : MonoBehaviour
{
    [SerializeField]
    TextMeshProUGUI countText;
    int bouncCount = 0;
    const string BouncePreFix = "Bounce Count: ";

    // Start is called before the first frame update
    void Start()
    {
        countText.text = BouncePreFix + bouncCount;
    }

    /// <summary>
    /// Adds the count 
    /// </summary>
    public void AddBounce(int  counts)
    {
        bouncCount += counts;
        countText.text = BouncePreFix + bouncCount;
    }
}

- HUD 스크립트 부착 후 인스펙터 창에서 Count Text 설정을 해야 적용이 됨

- Bounce 스크립트에서도 접근할 수 있는 AddBounce 메서드 (바운스 후 텍스트 내용을 업데이트하는 기능)

 

Bouncer 스크립트 (Bouncer 오브젝트에 부착)

public class Bouncer : MonoBehaviour
{
    // 변수 저장
    int healty = 100;
    const int countPoint = 1;
    SpriteRenderer spriteRenderer;
    AudioSource audioSource;
    HUD hud;

    // Start is called before the first frame update
    void Start()
    {
        // 컴포넌트 저장
        spriteRenderer = GetComponent<SpriteRenderer>();
        audioSource = GetComponent<AudioSource>();
        hud = GetComponent<HUD>();


        // rigidBody 컴포넌트 저장 후  속도의 방향 및 크기 설정
        Rigidbody2D rb2d = GetComponent<Rigidbody2D>();
        rb2d.AddForce(new Vector2(2, 3), ForceMode2D.Impulse);
    } 

    private void OnCollisionEnter2D(Collision2D collision)
    {
        // 충돌 시 오디오 재생
        audioSource.Play();

        // 투명도 감소시키기
        Color color = spriteRenderer.color;
        color.a -= 0.1f;
        spriteRenderer.color = color;

        // 충돌 시 체력 10 감소
        healty -= 10;

        // 충돌 시 텍스트 업데이트
        hud.AddBounce(countPoint);

        // 체력이 0이 되면 오브젝트 파괴
        if (healty <= 0)
        {
            Destroy(gameObject);
        }

        // 체력 확인용 출력
        Debug.Log(healty);
    }

- 추가할 바운스 횟수와 AddBounce 메서드 호출, 메서드 호출을 위한 컴포넌트 가져오기

- null reference 오류가 발생함

 

오류의 원인

HUD hud = GetComponent<HUD>();

- HUD 스크립트는 다른 컴포넌트와는 다르게 Bounce 오브젝트에 부착되어 있지 않음

- 그래서 위와 같은 코드로는 컴포넌트를 가져올 수 없다

 

 수정한 코드

hud = GameObject.FindGameObjectWithTag("HUD").GetComponent<HUD>();

>>> 태그로 HUD 스크립트를 찾아와서 컴포넌트를 저장한다

 

- 인스펙터 창에서 미리 설정한 텍스트도 게임을 실행하면 스크립트에서 작성한 대로 텍스트가 업데이트된다