24-03-21
기본적인 UI 요소들을 사용해보며, 아직 사용해보지 못한 UI 기능에 대해 찾아보았다.
앵커 프리셋이나 캔버스의 Render Mode 기능은 다양한 프로젝트를 통해 상황에 맞게 설정하는 감각을 익혀야할 것 같다.
Transform
게임 오브젝트의 Position, Rotation, Scale 그리고 부모 지정 상태를 저장한다.
- 모든 게임 오브젝트에는 트랜스폼이 존재한다.
- 게임 오브젝트를 부모-자식 계층 구조로 그룹화할 수 있다.
- 부모 게임 오브젝트에는 해당 Transform 속성을 사용하는 다른 게임 오브젝트가 연결되어 있다.
- 자식 게임 오브젝트는 다른 게임 오브젝트에 연결되고 해당 게임 오브젝트의 Transform 속성을 사용한다.
| Transform | 부모-자식 계층 구조 |
|---|---|
 |  |
Rect Transform
일반 Transform 컴포넌트 대신 모든 UI 요소에 사용되는 새로운 Transform 컴포넌트이다.
- Transform 은 포인트 하나를 나타내지만, Rect Transform 은 UI 요소 안에 넣을 수 있는 사각형을 나타낸다.
Resizing vs Scaling
오브젝트의 크기를 변경하기 위해 일반적으로는 Local Scale 을 변경한다.
RectTransform 이 있는 오브젝트의 경우, width 와 height 를 대신 변경한다.
- Resizing 의 경우, 글꼴 크기나 분할된 이미지의 테두리 크기에 영향을 미치지 않는다.
Pivot
Position, Rotation, Scale 수정은 피벗을 중심으로 일어나 그 결과에 영향을 미친다.
- Pivot - x ( 0 ~ 1 ) : 0일 때 오브젝트의 가장 좌측, 1일 때 오브젝트의 가장 우측으로 설정
- Pivot - y ( 0 ~ 1 ) : 0일 때 오브젝트의 가장 하단, 1일 때 오브젝트의 가장 상단으로 설정
Anchors
씬뷰에서 네개의 삼각형 손잡이 모습으로 표시된다.
스크린이 Resizing 될 때 앵커를 기준으로 UI의 위치, 크기가 변경됩니다.
- Anchor - x ( 0 ~ 1 ) : 0일 때 부모의 가장 좌측, 1일 때 부모의 가장 우측으로 설정
- Anchor - y ( 0 ~ 1 ) : 0일 때 부모의 가장 하단, 1일 때 부모의 가장 상단으로 설정
Anchor Preset
자주 사용되는 앵커를 미리 정의해둔 것이다.
- Shift + 앵커 프리셋 선택 : 앵커와 피벗을 함께 해당 프리셋으로 설정
- Alt + 앵커 프리셋 선택 : 앵커와 오브젝트를 함께 해당 프리셋으로 설정
- Shift + Alt + 앵커 프리셋 선택 : 앵커와 피벗, 오브젝트를 모두 해당 프리셋으로 설정
UI
User Interface - 텍스트, 버튼, 이미지 등의 화면을 구성하는 사용자 환경
Canvas
모든 UI 요소는 Canvas 컴포넌트가 부착된 게임 오브젝트의 자식이어야 한다.
- UI 요소 오브젝트를 생성할 경우, 그 씬에 캔버스가 없다면 자동으로 생성
Render Mode
1) Screen Space - Overlay
캔버스가 화면에 맞게 스케일된 후, 씬이나 카메라의 레퍼런스 없이 직접 렌더링 된다.
- 스크린의 크기나 해상도가 변경되면, UI 는 자동으로 맞춤 스케일
2) Screen Space - Camera
카메라를 지정해 해당 카메라에 일정 거리에 위치한 평면 오브젝트 위에 드로우되는 것처럼 렌더링 된다.
- UI 의 화면 크기는 카메라 절두체 내에 정확히 맞도록 항상 다시 스케일되기 때문에 거리에 따라 크기가 달라지진 않음
- 스크린의 크기나 해상도, 카메라 절두체가 변경되면 UI 는 자동으로 맞춤 스케일
3) World Space
UI 가 씬 안에 있는 평면 오브젝트인 것처럼 렌더링된다.
- 캔버스의 크기는 Rect Transform 을 통해 설정
- 화면에서의 캔버스 크기는 카메라 뷰 각도와 거리에 따라 달라짐
| Screen Space-Overlay | Screen Space-Camera | World Space |
|---|---|---|
 |  |  |
Unity - 카메라 절두체 , Unity - Render Mode
Pixel Perfect
다양한 해상도에서 픽셀 아트를 선명하고 또렷하게 유지하고 안정적인 모션을 제공한다.
Pixel Perfect Camera 컴포넌트와 함께 사용된다.
- 픽셀 단위와 이미지 크기를 맞춰주는 작업이라고 생각하면 될 것 같음.
Canvas Scaler
Canvas Scaler 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다.
- 글꼴 크기와 이미지 경계 등 캔버스의 모든 요소에 영향을 미침.
UI Scale Mode
| 모드 | 기능 |
|---|---|
| Constant Pixel Size | UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다. |
| Scale With Screen Size | 화면에 따라 UI 요소도 변경된다. |
| Constant Physical Size | 화면 크기와 해상도에 관계 없이 UI 요소가 동일한 물리적인 크기로 유지된다. |
Image
장식, 아이콘 등을 표시할 때 사용하는 오브젝트.
( 표시할 이미지는 Sprite 형식으로 가져와야 한다. )
Sprite = 2D 그래픽 오브젝트
Standard Texture = 3D 그래픽 오브젝트
Text
제목이나 내용, 설명 등을 표시할 때 사용하는 오브젝트.
RawImage
장식, 아이콘 등을 표시할 때 사용하는 오브젝트.
( Image 와는 달리, 모든 텍스쳐를 사용할 수 있다. )
웹에서 이미지를 받아오는 스크립트를 사용할 수도 있다.
Panel
다양한 UI 를 그룹화하기 위해 사용하는 오브젝트.
Toggle
사용자가 옵션을 켜거나 끌 수 있도록 하는 체크 박스.
Silder
사용자가 마우스를 드래그하여 정해진 범위상 숫자 값을 선택할 수 있도록 하는 컨트롤.
( 이미지 에디터 밝기, 볼륨 설정 등으로 활용된다. )
Scrollbar
사용자가 한 번에 볼 수 없는 이미지나 다른 보기 화면을 스크롤하여 보도록 하는 컨트롤.
( 텍스트 편집기 측면에 있는 수직 스크롤바 등으로 활용된다. )
Scroll View
공간을 많이 차지하는 콘텐츠를 작은 영역에 표시해야할 때 활용하는 컨트롤.
( 한 두개의 스크롤바와 함께 사용하여 수직, 수평으로 드래그하여 활용한다. )
| Slider | Scrollbar | Scroll View |
|---|---|---|
 |  |  |
Button
사용자의 클릭에 반응하고, 액션을 시작하거나 확인하는 데 사용하는 오브젝트.
( On Click () : 사용자가 버튼을 클릭한 뒤 놓으면 호출되는 이벤트 함수 )
스크립트와 연결하여 원하는 동작을 구현할 수 있다.
Dropdown
사용자가 리스트에서 옵션을 선택할 수 해주는 컨트롤.
Input Field
텍스트 컨트롤의 텍스트를 수정할 수 있는 컨트롤.
| Dropdown | Input Field |
|---|---|
 |  |
TextMeshPro (TMP)
기존의 Text 보다 향상된 기능을 제공하는 UI Text 오브젝트
( Text - TMP , Button - TMP , Dropdown - TMP , Input Field - TMP )
- 시각적 품질을 크게 향상할 뿐 아니라 Tag , 다중 폰트, 커스텀 스타일 등의 기능을 제공
Event System
게임 내 오브젝트에 이벤트를 보내는 시스템.
- Canvas 를 생성할 때 같이 생성되며, 한 씬에 하나만 생성
- 어떤 게임 오브젝트를 선택할지 관리
- 어떤 입력 모듈을 사용할지 관리
Scripts
Shield.cs - 실드의 움직임을 구현할 스크립트
- 유저가 조작하는 마우스 커서를 따라다니는 실드
- 마우스 커서의 좌표를 카메라가 찍고 있는 월드 좌표로 변환 필요
Square.cs - 위에서 떨어지는 square 을 구현할 스크립트
- Square 에게 랜덤한 위치에서 생성
- Square 의 크기를 랜덤으로 설정
- 무수히 생성되는 Square 처리 필요
- Square 가 화면 밖으로 벗어나면 제거
- Square 과 충돌하는 상황 처리
1) Player 와 충돌하였을 때 -> 게임 종료
2) Shield 와 충돌하였을 때 -> Rigidbody 2D 와 Collider 2D 컴포넌트로 처리
GameManager.cs - 게임 전체를 조율하는 오브젝트
- 싱글톤 패턴
- 시간 관리
1) 게임이 진행 중이라면, 시간이 계속 흐름
2-1) 게임이 끝났다면, 풍선이 터지는 애니메이션을 실행
2-2) 풍선이 터지는 동안, (실제 시간은 흐르지만) 타이머가 멈춤
2-3) 풍선이 터진 뒤, 실제 시간을 멈춰 게임 종료
3) 시간 표시 - Square 프리팹을 복제 생성
- 최고 점수 구현하기
1) 데이터를 보관
2) 보관해둔 데이터가 있는지 확인
3) 보관한 데이터를 불러오기
4) 현재 점수와 최고 점수를 비교하여 업데이트 해주거나 유지
RetryBtn.cs - 게임 재시작을 위한 스크립트
- SceneManager 를 통해 MainScene 호출
2주차 - 풍선을 지켜라
결과물
