간단한 게임만들기#4(UI 구축)

저번 게시글에 이어 UI(User Interface)를 구축해보자

 

1. Hierachy 에서 마우스 우클릭 - UI - Canvas 클릭

   2. Canvas 와 EventSystem이 생기게 된다. Canvas의 Inspector에서 UI Scale Mode를 Scale With Screen Size 로 설정해주고 Reference Resolution X 1920 Y 1080 로 지정해 준다. 그 아래 Match 는 너비기준으로 할것인지 높이 기준으로 할것인지 지정해주는 너비 기준으로 해주는것이 깨지지 않는다.

Canvas 마우스 우클릭 - UI - Image를 선택해 준다.

 4. 화면 비율 및 해상도가 달라지더라도 깨지지 않게 앵커 기능을 이용한다.

요 부분을 클릭한뒤 Alt +Shift 를 클릭하고 좌상단을 선택한다. 이후 PosX 는 50, PosY는 -50으로 지정해준다. 그러면 좌상단에 흰색 이미지가 조금씩 띄어서 표시가 되는걸 확인할 수 있다.

 

5. 이후 이미지 우클릭 - UI - Text(TextMeshPro)를 선택해준다. TMP Importer 창이 나타나면 Import TMP Essentials 버튼을 클릭하고 계속 한다.

 6. 폰트를 사용하기위해 Assets폴더 내부에 Fonts 라는 폴더를 생성한다 이후 내가 사용할 폰트(ttf 파일)를 해당 폴더 안에 넣어준다. 이후 해당 폰트를 클릭 한 후 Window - TextMeshPro - Font Asset Creator를 클릭해서 열어준다.

 7. 내가 가져온 폰트로 Source Font File 에서 설정해 준뒤 Save를 해줘서 폰트 에셋을 생성한다.

 8. 생성된 폰트에셋은 그대로 사용하면 한글을 못쓰기 때문에 폰트에셋 클릭 후 Generation Settings 에서 Atlas Population Mode를 Dynamic, Sampling Point Size 를 60 으로 설정 해 준뒤 Apply를 클릭해준다.

 9. 다시 아까 만든 Text로 돌아아와 Font Asset 을 우리가 조금 손본 Font Asset으로 지정해준다(드래그해도되고 설정해줘도 된다.) 그리고 Vertex Color색상을 검정으로 만들어 좀더 잘보이게 해준다. 이미지 크기가 작으니 이미지를 클릭해서 Width를 300으로 늘려준다. 여기까지 했다면 다음과 같이 보일것이다.

 10. 다시 Text로 돌아와 Text Input에서 Score : 00/80 이렇게 작성해주고 Width도 250 정도로 늘려준다. 그리고 Auto Size를 한번 클릭해보면 적당한 사이즈로 변한다. 점수를 표시했으니 남은 아이템 갯수도 표시하면되는데 Image를 복사 한뒤 아까처럼 앵커를 우측 상단으로 보내고 모서리에서 -50씩 여유를 둔뒤 Left_Item : 8 이런식으로 텍스트를 작성해준다.

11. 이제 점수가 연동되는 코드를 작성하면되는데 Player스크립트로 돌아와 맨위에 using 선언 두줄을 해준다.

using UnityEngine.UI;
using TMPro;

그리고

public TextMeshProUGUI score_text;
public TextMeshProUGUI left_item_text;

이렇게 두개의 text 변수를 추가해주고 OnTriggerEnter 함수에 Debug.Log로 Score를 보았던 부분을 지우고 내용을 넣어준다.

private void OnTriggerEnter(Collider other)
{

    if (other.tag == "Item")
    {
        other.gameObject.SetActive(false);
        item_sound.Play();
        Score = Score + 10;
        left_item--;
    }

    if (other.tag == "JumpItem")
    {
        other.gameObject.SetActive(false);
        item_sound.Play();
        Score = Score + 20;
        left_item--;
    }
    if (Score >= 100)
    {
        Debug.Log("GameEnd!!");
    }
    score_text.text = "Score : " + Score + "/100";
    left_item_text.text = "Left_Item : " + left_item;
}

 

 12. 다시 유니티 창으로 돌아오면 Player Inspector에서 아까 만든 두개의 변수를 지정해줄수 있는데 각각 Score와 Left Item 의 Text로 지정해준다.(드래그 앤 드롭)

 13. 이후 다시 실행해서 정상적으로 UI 가 업데이트 되는지를 확인한다. 실수를 하나 했는데 점수의 최대치는 100이니 소스를 다시 100으로 수정한다. 이제 게임이 끝나면 게임이 종료됬다는것을 알리기 위한 UI를 만들어 보겠다.

아까처럼 Canvas - 우클릭 - UI - Image를 선택해 이미지를 생성한다. 그리고 이름을 End_Image로 지정해준다.

 

 14. 앵커설정에서 Alt + Shift 우측하단에 있는 화면 전체를 선택한다. 그리고 반투명 상태를 위해서 Color - A 부분을 255에서 100정도로 재조정한다.

 

 15. 방금만든 이미지에 아까처럼 텍스트를 추가 해준뒤 Width를 1000, Height 를 400, 폰트도 아까 만든 폰트에셋으로 설정하고 중앙정렬로 설정해주고 Game Clear!!라고 텍스트 인풋에 지정해준다.

 

 16. 이후 End_Image의 Active를 체크해제 해 주고 게임이 종료됬을때 띄워줘야 하니까 Player Script에서

public GameObject end_image; 를 선언해 준뒤 OnTriggerEnter 함수내부에서 점수가 100점이 됬을때 end_image.SetActive(true);가 되게 한다. 저장후 다시 유니티 창으로 돌아와서 Player의 Inspector에서 End_Image를 아까만든 UI Image인 End_Image 로 지정해준다.

 

 17. 이제 로비 UI 를만들어 볼껀데 새로운 씬을 만들어준뒤 아까처럼 Canvas생성, Image 생성, Text를 생성해 준뒤 각각 게임제목, 적절한 색생 등을 만들어서 배치해 준다. 그리고 Image 안에 UI-button을 생성해주고 버튼 내부에 Text 를 Game Start! 라고 지정해준다. 나는 아래와 같이 만들었다.

 18. 이제 버튼을 누르면 게임이 시작되게 할건데 이것도 C# Script를 이용할 것이다. C# 스크립트를 생성 후 이름을 Lobby라고 지정해 준다.

 

 19. 스크립트를 열어준뒤 상단에 using UnityEngine.SceneManagement; 를 추가해 준다. 그리고 아래와 같이 작성한다

public class Lobby : MonoBehaviour
{
    public void Game_start_button_on()
    {
        SceneManager.LoadScene("MyGame");
    }
}

• 이때 Update 및 Start 함수를 지우는 이유는 쓸데없는 사용량을 줄이기 위해서다. 매 프레임마다 할 동작도 없고 Start 버튼만 눌린것을 확인하면 되기때문이다.

 

 20. Lobby 스크립트를 MainCamera에 드래그 앤 드롭해준다. 이후 버튼의 Inspector에서 OnClick - +버튼을 추가해주고 Main Camera를 Object에 드래그 앤 드롭 해준다. 그리고 No Function - Lobby - Game_start_button_on 으로 지정해준다.

 

 21. 추가로 File - Build Settings로 들어간다음 Lobby 신과 MyGame신을 Scenes In Build 칸에 넣어준다.

 

 23. 창을 닫고 실행해 보고 이상이 없이 작동하는지 확인한다.