유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법 2 - 타이틀 이미지, 앵커 프리셋, 스프라이트 9-slicing

유니티(Unity)에서 사용자 인터페이스 UI 기초 사용법 2 - 타이틀 이미지, 앵커 프리셋, 스프라이트 9-slicing

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

1)캔버스에 새로운 이미지 오브젝트를 생성하고 타이틀로 사용할 이미지 스프라이트를 참조합니다.

 

2)Rect Transform에서 앵커 프리셋(anchor presets)이 기본값 middle, center로 설정되어있는것을 확인할수있습니다.
posX, posY에 값0을 입력하여 위치를 초기화합니다.

 

3)앵커 프리셋을 top, center로 변경합니다. posY에서 오브젝트가 

 

4)오브젝트의 앵커 위치가 상단(top) 중앙(center)에 있는것을 확인할수있습니다

(posY는 앵커 상단 중앙을 기준으로 오브젝트의 위치값 -320 을 표시합니다 )

 

5)posX, posY에 값0을 입력하여 위치를 초기화합니다.

 

6)오브젝트의 초기화된 위치는 상단 중앙인것을 확인할수있습니다.

 

7)타이틀 이미지의 화면 상단으로부터 위치를 설정합니다.

 

8)오브젝트 피봇(pivot)의 기본값을 확인합니다(X-0.5, Y-0.5)

 

9)X, Y 값에 따라서오브젝트 피봇의 위치 변화를 확인합니다.

X-0, Y-0

 

X-0.5, Y-0

 

X-0.5, Y-0.5

 

 

10)캔버스에 새로운 버튼 오브젝트를 생성합니다(Button)

 

11)버튼 오브젝트의 Rect Transform 위치를 초기화합니다.

 

12)버튼 오브젝트의 소스 이미지로 사용할 스프라이트를 선택합니다.

 

13)import settings에서 스프라이트 편집기(sprite editor) 로 이동합니다.

 

14)스프라이트 편집기에서 경계(Border)를 설정하고 적용합니다(apply)

sprite 9-Slicing를 사용하면 스프라이트를 9개의 구역으로 나누어 UI 요소를 효율적이고 유연하게 스케일링할수있습니다.

 

15)스프라이트를 이미지의 소스 이미지에 참조합니다.

 

16)버튼의 크기가 변해도 스프라이트의 크기를 조정할 때 특정 영역의 왜곡을 방지합니다.

 

17)버튼 오브젝트의 앵커 프리셋을 bottom, stretch로 설정합니다.

 

18)Left, Right에 캔버스 영역의 좌우로부터 위치값을 입력하고 posY에 캔버스 영역의 하단으로부터 위치값을 입력합니다.