유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법1 - 배경 이미지, 캔버스 설정, Game 뷰 해상도

유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법1 - 배경 이미지, 캔버스 설정, Game 뷰 해상도

아래 유니티 튜토리얼(Introduction to Unity UI, By Ben MacKinnon)을 참고하였습니다.
https://www.kodeco.com/6570-introduction-to-unity-ui-part-1

Introduction to Unity UI – Part 1

 

1)UI의 Image를 생성합니다.

 

2)Canvas, 하위 Image, 이벤트 시스템(event system) 오브젝트가 생성된것을 확인할수있습니다.

 

3) Image 오브젝트의 Rect Transform 를 확인합니다. Rect Transform은 일반 Transform 컴포넌트 대신 모든 UI 요소에 사용되는 새로운 Transform 컴포넌트입니다. Rect Transform의 위치를 초기화합니다(0, 0, 0)

 

4)캔버스(canvas) 영역과 이미지의 크기 및 위치를 확인합니다.

 

5)배경 이미지로 사용할 텍스처를 준비합니다(텍스처 해상도 1136 x 640)

텍스처 유형(texture type)을 스프라이트(Sprite)로 변경하고 적용합니다(apply)

 

6)Image 오브젝트의 Image 컴포넌트에서 소스 이미지(source image)에 배경 이미지 스프라이트를 참조합니다.

 

7)Image 컴포넌트의 set native size를 클릭합니다.

 

8)이미지가 원본 해상도로 설정된것을 확인할수있습니다(Rect Transform width, height)

 

9)Game 뷰에서 이미지의 일부 영역만 표시하는것을 확인할수있습니다.

 

 

10)캔버스(canvas)의 canvas scaler에서 UI Scale Mode를 확인합니다(constant pixel size)

 

11)UI Scale Mode를 scale with screen size로 변경하고 reference resolution을 입력합니다. reference resolution는 UI 레이아웃이 설계 및 디자인된 해상도를 의미합니다. 예에서 배경 이미지와 동일한 해상도(1136, 640)를 입력합니다.

 

12)Screen Match Mode에서 match width or height을 선택합니다.

Screen Match Mode - 현재 해상도의 종횡비가 참조 해상도와 맞지 않을 경우 캔버스 영역의 크기를 조절하는 방법입니다.

match width or height - 캔버스 영역의 크기를 너비(width) 또는 높이(height)를 기준으로 조절합니다(또는 그 중간 값을 기준으로 조절합니다)

 

13)match의 슬라이더를 조절하여 너비(width) 또는 높이(height)를 기준으로 설정할때 차이를 확인합니다.

 

14)Game 뷰에서 새로운 게임 뷰 해상도를 추가합니다.

 

15)예에서 해상도 960 x 640 를 추가합니다.

 

16)게임 뷰 해상도의 종횡비(960/640, 1.5)가 캔버스 reference 해상도의 종횡비(1136/640, 1.78) 보다 작기 때문에 캔버스 영역의 크기를 너비(width) 기준으로 설정하면 높이에 여백이 발생합니다.

 

17)캔버스 영역의 크기를 높이(height) 기준으로 설정하면 너비 또는 높이에 여백이 발생하지않습니다.