[2D Game] #6. 게임 UI 만들기

게임 UI 만들기

점수와 게임 오버 메시지를 표시하는 UI를 만들어보자. UI를 구성하기 위해서는 먼저 캔버스 게임 오브젝트를 만들어야 한다.

캔버스 오브젝트: 모든 UI 요소를 다루는 루트 게임 오브젝트

고정 픽셀 크기

레트로의 유니티 게임 프로그래밍 에센스 2, 484 p 참조

캔버스는 UI를 잡아주는 틀이기 때문에 캔버스의 크기나 가로세로 비율이 달라지면 캔버스에 배치된 UI의 모습도 다르게 보인다.

 

캔버스의 크기는 게임을 실행 중인 화면의 해상도로 결정된다.

그런데 캔버스 컴포넌트의 UI 스케일 모드의 기본 설정인 고정 픽셀 크기는 캔버스 크기가 변해도 배치된 UI 요소의 크기를 변경하지 않는다. 이 경우 화면 크기가 달라지면 UI 요소의 크기나 UI 요소의 간격이 의도와 다르게 크거나 작아지는 경우가 생긴다.

 

다시 말해 캔버스의 크기는 화면의 해상도로 결정되고 이 화면의 해상도는 모니터마다 다르다. 이때 고정 픽셀 크기는 캔버스와는 무관하므로 해상도가 달라지면 UI 요소가 상대적으로 작게 혹은 크게 보이는 문제가 생긴다.

화면 크기에 따라 스케일 변경

게임은 다양한 크기와 비율의 화면에도 UI의 크기와 배치를 일정하게 유지해야 한다. 이때 기준 화면 크기를 정하고, 실행 화면 기준 화면보다 크거나 작을 때는 자동으로 확대/ 축소하는 '화면 크기에 따라 스케일' 모드를 UI 스케일 모드로 사용할 수 있다.

Scale With Scene Size :실행 화면의 기준 화면에 따른 변경

예를 들어 640x360 해상도에서 UI를 배치했다고 가정했을 때, '화면 크기에 따라 스케일' 모드를 사용하면  640x360 해상도보다 크거나 작아도 무조건 캔버스의 크기를 640x360으로 취급한다. 다른 크기의 화면에 캔버스가 그려질 때는 캔버스 자체를 확대/축소한다.

 

또한  '화면 크기에 따라 스케일' 모드는 작은 픽셀 크기로 그려진 최종 화면을 강제로 잡아 늘리는 방식이 아니기 때문에 깨지는 현상은 존재하지 않는다.

방향 매치

 '화면 크기에 따라 스케일' 모드는 실제 화면과 기준 해상도 사이의 화면 비율이 다른 경우 캔버스 스케일러 컴포넌트의 일치 필드 값이 높은 방향의 길이를 유지하고 다른 방향의 길이를 조절한다.

 

하지만 일치 값을 결정하는 데는 기준이 없다. 이 경우는 UI 요소가 많이 나열된 방향의 일치 값을 높여주는 것이 좋다.

예를 들어, 세로 방향으로 버튼이 많이 나열되어 있다면 화면 비율이 변했을 깨 가로 방향보다 세로 방향의 레이아웃이 망가지기 쉽다. 이때는 세로 일치 값을 높이는 것이 좋다.

캔버스 스케일러 설정

 '화면 크기에 따라 스케일' 모드를 사용해 640x360을 기준 해상도로 사용하여 UI를 배치한다. 캔버스 스케일 모드는 캔버스 스케일러 컴포넌트에서 설정한다.

1. Canvas 컴포넌트 생성 (하이어 라키 > Create > UI > Canvas)
2. Canvas Scaler 컴포넌트의 UI Scale Mode를 Scale With Screen Size로 변경
3. Reference Resolution을 (640,360)으로 변경

Canvas Scale

이제 실제 화면 크기와 상관없이 640x360 해상도에서의 UI 배치만 신경 쓰면 된다.

점수 UI 텍스트 생성

점수 UI 텍스트 만들기

1. Create > UI > Text
2. Text 게임 오브젝트의 이름을 Score Text로 변경
3. Width를 300, Height를 80으로 변경
4. Anchor Presset > [Alt + Shift]를 누른채로 bottom-center 클릭

score text

Score Text의 텍스트 컴포넌트 설정

1. Text 필드의 Score : 0으로 변경
2. Font 필드 옆에 선택 버튼 > Kenny Mini Square 폰트 더블 클릭
3. Font 사이즈 50 변경, Aligenment를 Center,Middle로 변경
4. Color를 (255,255,255)로 변경

Rect Transform	Text

Score Text의 텍스트 컴포넌트에 shadow 컴포넌트를 추가하여 마무리한다.

게임 오버 텍스트 만들기

게임 오버 메시지를 표시할 Gameover Text 게임 오브젝트를 만든다.

Gameover Text 오브젝트 생성

1. Create > UI > Text
2. Text 게임 오브젝트의 이름을 Gameover Text로 변경
3. Width를 300, Height를 80으로 변경
4. Anchor Presset > [Alt + Shift]를 누른태로 top-center 클릭

Gameover Text의 텍스트 컴포넌트 설정

1. Text 필드의 GAMEOVER!으로 변경
2. Color를 (255,66,85)로 변경

Rect Transform	Text

게임 재시작 안내 텍스트 만들기

1. 하이어 라키 창에서 Gameover Text 선택 > [cmd + c]로 복제
2. 이름을 Restart Text로 변경
3. Pos Y 값을 -100으로 변경
4. Font 사이즈를 33으로 변경

Rect Transform	Text

Restart Text를 Gameover Text의 자식으로 만들고 게임 오버 텍스트를 비활성화하여 UI 정리를 마친다.