Unity UI를 게임의 HUD에 사용

본고는 Unity UI를 사용하여 유저에게 정보를 표시하고 Unity에서 기본적인 사용자 인터페이스를 실현하는 방법을 소개한다.

요구 사항

통일된 기본지식

완료“ Unity Physics 2D Using Collider2D and Kinematic Rigidbody2D ” 또는 Genoma Invaders’ Github repository, branch tutorial/03 에서 코드 체크 아웃

소개

마지막으로, 우리는 유니티의 물리 엔진이 처리하는 모든 운동 논리를 업데이트하고, 그 충돌 시스템을 이용하여 유저의 총알과 파괴할 적의 충돌을 측정한다.
이번에 우리는 게임 화면에 점수를 표시할 것이다.

Unity 사용자 인터페이스

Unity has three types of “UI Toolkits” 사용자 인터페이스 표시:

UIELements: 적극적으로 개발 중인 새로운 UI 키트입니다.

Unity UI: 지금까지 Unity에서 가장 많이 사용한 UI 키트입니다.

IMGUI: 일반적으로 개발 UI를 표시하는 데 사용하기 쉬운 UI 도구 패키지입니다.

우리는 Unity UI를 우리의 게임 인터페이스로 사용하여 점수 표시부터 시작할 것이다.
선수의 득점을 나타내기 위해서는 Text Visual Component 을 사용해야 한다.우리 먼저 게임 장면에 하나를 추가합시다.

캔버스와 레이아웃

보시다시피, 이것은 우리의 차원 창에 세 개의 게임 대상, 텍스트를 포함하는 캔버스와 이벤트 시스템이라고 불리는 것을 만들 것입니다.

Canvas는 UI 구성 요소를 나타내는 영역을 정의하는 데 사용됩니다.그것은 우리의 게임 세계에 UI 구성 요소를 배치하는 데 도움을 주는 다양한 렌더링 옵션이 있습니다(문서를 체크 아웃합니다!).우리가 사용할 렌더링 모드는 기본적으로 설정된 스크린 공간 - 덮어쓰기입니다.

텍스트 대상은 우리의 텍스트를 표시하는 대상입니다.

EventSystem은 UI 이벤트 및 입력을 제어하는 서브시스템입니다.탐색, 입력 활성화 및 선택을 처리합니다.

텍스트 객체를 선택하고 이름을 Score Text 로 변경한 다음 텍스트 구성 요소로 이동하여 텍스트 입력에 자리 표시자 분수(예: 1978를 배치하여 모양을 참조합니다.

현재 장면 창에 텍스트가 표시되지 않은 것을 알 수 있습니다.이것은 캔버스가 우리가 말한 바와 같이 우리 카메라의 스티커처럼 게임 세계의 일부분이 아니기 때문이다.캔버스 게임 대상의 가운데에 게임 창을 놓으려면 차원 창에서 선택한 다음 커서를 게임 창에 놓고 F 키를 누르면 게임 창 보기를 이동해서 선택한 게임 대상에 적합하게 합니다. 이 예에서 캔버스입니다.

현재 화포는 sign에서 분수 텍스트를 위치를 정하고 선택한 다음 검사기 창의 Rect Transform 부분에서 빨간색 십자선과 유사한 아이콘을 누르십시오. 이것은 닻점 사전 설정 선택기입니다.이제 Shift + Alt를 누르면 앵커 사전 설정 선택기가 열리고 선택 아이콘이 변경됩니다. Shift + Alt를 누르는 동시에 "top"탭이 있는 줄과 "right"탭이 있는 열 중 하나를 선택하십시오.이것은 분수 텍스트 대상을 화포의 오른쪽 상단에 놓고 고정시킨다.

참고: 직사각형 변환 구성 요소에 대한 자세한 내용은 Unity UI Documentation - Basic Layout section 에서 확인할 수 있습니다.
만약 네가 지금 게임 창으로 전환한다면, 이런 내용을 볼 수 있을 것이다.

Unity UI 텍스트 스타일

현재, 우리의 텍스트는 캔버스에 위치하고, 우리는 그것에게 게임의 시각적 효과와 유사한 양식과 외관을 줄 것이다.
우선, 우리는 텍스트에 사용되는 글꼴을 변경해야 한다.Press Start 2P를 사용하여 codeman38’s webpage (작성자) 에서 다운로드할 수 있습니다.글꼴을 /Assets/Genoma Invaders/Fonts/Press Start P2/ 아래에 두어 프로젝트 파일을 구성합니다.
분수 텍스트 객체의 글꼴을 변경하려면 다음과 같이 하십시오.

텍스트 구성 요소 아래의 글꼴 속성을 선택하고 변경합니다.

글꼴 크기 속성을 8 (이 글꼴의 권장 크기),

오른쪽으로 노선을 업데이트하고 수직으로 가운데에 있습니다.

색상 속성을 흰색으로 업데이트합니다(FFFFFF.

요소의 크기와 위치를 조정하는 마지막 조정으로 Score Text 객체의 Rect Transform 구성 요소로 이동하여 다음 속성을 설정합니다.

위치 X:-8

위치 Y:-8

위치 Z:0

폭: 64

높이: 8

참고: 게임 창에 적용된 변경 사항을 보십시오. first lesson 에 설정된 Taito 8080 해상도를 로 설정하십시오.

Unity UI 텍스트 업데이트

점수 텍스트 대상은 우리의 게임 점수를 표시할 준비가 되어 있습니다. 현재 우리는 텍스트 값을 업데이트하기 위해 논리가 필요합니다.
프로젝트 창에 Score.cs 라는 새 C 스크립트를 만들고 /Assets/Genoma Invaders/UI/ (새 폴더) 아래에 놓습니다.우리는 이 구성 요소를 사용하여 게임의 점수를 유지할 것이다.Score.cs

using UnityEngine;
using UnityEngine.UI;

public class Score : MonoBehaviour
{
    private int score = 0;
    // https://docs.unity3d.com/Packages/[email protected]/manual/script-Text.html
    private Text text;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Awake.html
    private void Awake()
    {
        text = GetComponent<Text>();
    }

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Start.html
    private void Start()
    {
        text.text = score.ToString();
    }

    public void AddScore (int points)
    {
        score += points;

        text.text = score.ToString();
    }
}

앞의 코드는 게임이 시작될 때 텍스트 값을 초기 점수(0로 설정하고 누군가가 이 방법AddScore을 호출할 때 업데이트합니다.점수 텍스트 대상에 추가하고 게임을 하면 점수 0 를 볼 수 있습니다.
이 새 구성 요소를 텍스트 점수 대상에 추가하면 Score.AddScore 방법으로 게임 점수를 증가시킬 수 있습니다.Score 텍스트 객체의 Score 구성 요소와 통신하려면 Enemy.cs 을 업데이트합니다.플레이어가 적을 죽일 때 AddScore 방법을 사용할 수 있도록 분수 분량에 대한 인용을 찾고 저장해야 합니다.Enemy.cs

// ...
public class Enemy : MonoBehaviour
{
    // ...

    private Score score;

    private void Awake()
    {
        // ...

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Object.FindObjectOfType.html
        score = FindObjectOfType<Score>();
    }

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.OnDestroy.html
    private void OnDestroy()
    {
        score.AddScore(100); // Increment game score by 100
    }
}

이렇게 하면 적의 구성 요소를 포함하는 게임 대상 호출 Destroy 방법을 사용할 때마다 (총알 구성 요소가 적의 대상에게 이 방법을 호출하고 있다는 것을 기억해라) 장면에서 제거하기 전에 점수를 업데이트합니다.
한번 해볼게요.

결론

우리는 한 게임으로 끝났다. 이 게임은 적들이 죽을 때마다 업데이트되고 Unity UI 시스템에 대한 지식을 배웠다.
이 강좌에 따라 생성된 코드는 Genoma Invaders’ Github repository, branch tutorial/04 에서 얻을 수 있습니다.
게임 개발 즐거움!👾