학습 매체 : 책
책이름 : 레트로의 유니티 게임 프로그래밍 에센스
저자 : 이제민
본 내용은 해당 강의 내용을 공부하면서 정리한 글입니다.
8.2 게임 UI 제작
-
유니티의 UI 시스템은 UI 요소를 게임 월드 속의 게임 오브젝트로 취급한다. 즉, 하나의 UI 요소는 씬 속의 하나의 게임 오브젝트가 된다. 그래서 UI 게임 오브젝트를 씬 내부에서 편집할 수 있다.
-
그러므로 일반 게임 오브젝트를 다루는 방법과 같은 방법으로 UI 게임 오브젝트를 다룰 수 있다는 강력한 장점이 있다.
유니티의 UI 시스템은 UGUI라고 부르기도 한다.
8.2.1 생존 시간 텍스트 제작
-
닷지 게임에서 생존한 시간이 점수와 같은 의미를 가진다. 게임이 시작된 지 몇 초가 지났는지 표시할 UI가 필요하다.
-
씬 편집 모드를 2D 모드로 바꿔 UI를 편집하기 쉽게 하고, 시간을 표시하는 UI 텍스트(Text) 게임 오브젝트를 만들어보자.
-
씬 창에서 2D 버튼 클릭
- 하이어라키 창에서 Canvas 더블 클릭 -> 씬 창에서 Canvas가 포커스됨
- Text 게임 오브젝트를 만드는 순간 총 세 개의 게임 오브젝트가 생성되는 것에 주목하자. 텍스트(Text) 뿐만 아니라 캔버스(Canvas)와 이벤트 시스템(EventSystem) 게임 오브젝트가 함께 생성된다.
캔버스와 이벤트 시스템
-
Text 게임 오브젝트는 Canvas 게임 오브젝트의 자식 오브젝트로 설정되어 있다.
-
UI 요소들은 캔버스의 2차원 평면에 배치되기 때문이다.
-
UI 게임 오브젝트는 일반 게임 오브젝트와 달리 트랜스폼 컴포넌트를 확장한 사각 트랜스폼(Rect Transform) 컴포넌트를 가진다.
-
즉, UI 요소는 자신이 배치될 2차원의 액자가 필요하고 Canvas 게임 오브젝트는 UI 요소가 배치될 수 있는 액자 역할을 한다.
-
따라서 UI 게임 오브젝트를 만들 때 Canvas 게임 오브젝트가 씬에 없다면 자동으로 하나 생성된다.
-
모든 UI 게임 오브젝트는 Canvas 게임 오브젝트의 자식이 되어야 한다.
-
EventSystem 게임 오브젝트는 별다른 설정을 요구하지 않고 스스로 동작한다. 우리가 직접 수정할 일은 거의 없다.
8.2.2 텍스트 배치
-
인스펙터 창에서 앵커 프리셋 클릭 -> 앵커 프리셋 창이 열림
-
[Alt] 키를 누른 상태에서 top - center 클릭
( 본 이미지는 Alt 키를 누르지 않은 상태에서 촬영한 것임 )
- Time Text가 Top Center로 정렬된 모습을 볼 수 있다.
앵커 프리셋
-
UI 요소를 잘 배치하기 위해서는 앵커(Anchor), 피벗(Pivot), 포지션(Position) 값을 조정해야 한다.
-
앵커 프리셋은 자주 사용되는 앵커, 피벗, 포지션값을 제공하여 UI 배치를 편하게 해주는 설정 모음 창이다.
-
Alt 키를 누르지 않았을 때 앵커 프리셋
- Alt 키를 누르고 있는 동안 앵커 프리셋
- 앵커 프리셋을 연 상태에서 [Alt] 키를 누르면 스냅핑(Snapping)이 활성화된다. 이 상태에서는 앵커값 뿐만 아니라 포지션값도 변경되며, UI 게임 오브젝트가 해당 방향의 모서리에 달라붙는 형태로 정렬된다.
8.2.3 텍스트 꾸미기
-
텍스트의 내용과 폰트 색깔을 변경하자.
-
Time Text 게임 오브젝트의 Text 컴포넌트의 Text 필드 내용을 Time : 0으로 변경
- Text 컴포넌트의 Alignment를 Center, Middle로 변경
- Color 필드 클릭 > 폰트 컬러를 하얀색(255, 255, 255)으로 변경
-
이것으로 Time : 0이라는 글자가 게임 화면에 하얀색으로 표시된다. 이외에도 텍스트 컴포넌트의 정렬(Alignment) 필드를 Center와 Middle로 변경하여 텍스트 컴포넌트의 글상자 정중앙에 텍스트가 표시되게 하였다.
-
이제 텍스트 위치를 조금 내리고, 폰트 크기를 키우고, 그림자 효과를 추가하여 글상자가 더욱 잘보이게 만들자.
- Rect Transform 컴포넌트의 Pos Y를 -30으로 변경
- Font Size를 42로 변경
- Horizontal Overflow와 Vertical Overflow를 Overflow로 변경
Horizontal Overflow와 Vertical Overflow
-
과정 02에서 폰트 크기(Font Size)를 42로 증가시키면 글자가 글상자를 넘쳐서 잘리기 때문에 텍스트가 보이지 않게 된다.
-
이와 같이 표시할 글자 크기가 너무 크거나 표시할 글자 수가 너무 많으면 글이 글상자를 넘치게(오버플로) 된다.
-
텍스트 컴포넌트의 수평 오버플로(Horizontal Overflow)와 수직 오버플로(Vertical Overflow)는 글이 글상자를 넘칠 경우 해당 방향으로의 글자를 잘라낼 것인지 혹은 그대로 넘치게 표시할 것인지 결정한다.
-
수평 오버플로의 기본값인 랩핑(Wrap)은 글자가 수평 방향으로 글상자를 넘칠 때 강제로 줄바꿈을 적용한다. 랩핑 대신 오버플로를 선택하면 수평 방향으로 글상자를 벗어난 글자들이 줄바꿈하지 않고 그대로 표시된다.
-
수직 오버플로의 기본값인 자르기(Truncate)는 글자가 수직 방향으로 글상자를 넘칠 때 넘친 글자들을 잘라낸다. 자르기 대신 오버플로를 선택하면 수직 방향으로 글상자를 벗어난 글자들을 잘라내지 않고 그대로 표시한다.
- 마지막으로 텍스트가 잘 보이도록 그림자 효과를 추가하자.
-
그림자(Shadow) 컴포넌트는 자신이 추가된 UI 게임 오브젝트에 그림자 효과를 추가한다.
-
이것으로 시간을 표시하기 위한 UI 텍스트 게임 오브젝트인 Time Text를 완성했다.
8.2.4 게임오버 텍스트와 최고 기록 텍스트
-
이번에는 게임오버되었을 때 활성화할 UI 텍스트를 만들자. 게임 재시작 방법을 안내하는 텍스트와 최고 기록을 표시하는 텍스트를 제작하겠다.
-
이들은 직전에 완성한 Time Text 게임 오브젝트를 복제해서 재활용하여 만들겠다.
- 이어서 Gameover Text 게임 오브젝트의 텍스트를 화면 정중앙에 배치하자.
-
이제 게임 창을 확인해보면 화면 중앙에 게임오버 시 표시할 Press R to Restart 텍스트가 보인다.
-
이번에는 최고 기록 텍스트를 만들어보자.
-
최고 기록 텍스트는 게임 오버되었을 때 게임오버 텍스트와 함께 출력되어야 한다. 자식 게임 오브젝트는 부모 게임 오브젝트와 함께 비활성화/활성화된다.
-
따라서 Gameover Text 게임 오브젝트가 활성화/비활성화될 때 Record Text 게임 오브젝트를 게임 오브젝트가 함께 활성화/비활성화될 수 있도록 Record Text 게임 오브젝트를 Gameover Text 게임 오브젝트의 자식으로 만들어야 한다.
-
Time Text 게임 오브젝트는 항상 게임 화면에 출력되어야 한다. 하지만 게임오버 시 활성화 되는 Gameover Text 게임 오브젝트와 Record Text 게임 오브젝트는 평상시에는 비활성화 되어 있어야 한다.
-
Gameover Text 선택 > 인스펙터 창에서 왼쪽 체크 박스 체크 해제
- 나중에 지금까지 완성한 UI 게임 오브젝트를 스크립트로 제어할 것이다.
다음 강의에서 계속~
