[Unity Course 2] 07. 유니티 UI 시스템 2
위키북스 출판사 이재현 저자님의 '절대강좌! 유니티' 책을 참고하여 필기한 내용입니다.
Rect Transform 컴포넌트
기존 Transform 과 동일한 역할을 하는 컴포넌트로 UI 항목에 기본적으로 추가됨
Panel 추가
Panel 의 주된 용도는 UI 항목을 그룹화
메뉴를 구성할 때 여러 버튼을 하나의 Panel에 차일드화 해서 구현 가능
청색 원 아이콘을 드래그 하면 사이즈 조절가능
원을 클릭하고 Alt 키를 누른채 드래그 하면 모든 방향이 동시에 조절됨
가운데 있는 청색 원은 pivot 역할을 하는 회전축 역할로 모서리 바깥쪽을 선택하여 드래그 하면 회전하는 모습을 볼 수 있음
앵커 프리셋
: 각 UI 항목의 정렬과 크기를 미리 정의해놓은 집합, Unity UI의 기본 개념
앵커 포인트
현재 앵커 프리셋 옵션은 Stretch모드로 되어 있다 (스크린 해상도가 바뀌어도 자동으로 가로, 세로가 조절됨)
앵커 프리셋은 마우스를 클릭했을때, Alt, Shift 키와 조합에 따라 다르게 표현
각 키의 조합으로 변경해서 각자 알아보도록 하자..
anchoredPosition 속성
Rect Transform 속성 맨 위에 있는 Pos X, Y, Z는 해당 UI 항목의 앵커 포인트를 기준으로 피벗 좌표가 얼마만큼 떨어져 있는지를 나타내는 anchoredPosition
- 속성은 Vector2 타입으로 Pos Z의 값은 의미가 없음.
Anchors 속성
네개의 작은 화살표로 표시
UI 항목을 리사이즈 하거나 정렬하기 위해 사용
해상도가 바뀌더라도 동일한 비율로 리사이즈됨
Image 컴포넌트
화면에 텍스처를 표현하는 컴포넌트로 Sprite 타입으로 변환된 텍스처만 사용가능
Panel에 SF Window 파일을 연결하고
Rect Transform 속성은 다음과 같이 변경
| 속성 | 설명 |
| Source Image | 화면에 표시하려는 이미지(Sprite만 허용) |
| Color | 이미지의 색상 |
| Material | 이미지를 렌더링하기 위한 머티리얼 (노멀맵 적용 시 사용가능) |
| Image Type | 이미지를 표시하는 방식 - Simple : 반복이 필요 없거나 이미지가 고정 크기인 경우의 옵션 - Sliced : 이미지를 리사이즈해도 왜곡 없이 표현하는 옵션 - Tiled : 이미지를 타일링 처리할 수 있는 옵션 - Filed : 이미지를 부분적으로 채울 수 있는 옵션 |
Simple
기본 이미지
Set Native Size 버튼을 누르면 원본 이미지의 크기로 재설정됨
이건 예시이기 때문에 하지 않아도 된다.
Sliced
SF Window 이미지의 Sprite Editor 로 들어가 설정을 변경하면 되는데
저 화면에 있는 메세지가 나온다면 Package Manager 에서 2D Sprite 패키지를 설치한다
RGB/Alpha 버튼으로 이미지를 잘 보이게 선택
Tiled
이미지가 반복적인 패턴일 때 사용
Tiled 로 설정하면 경고 문구가 뜨는데
연결한 스프라이트의 Wrap Mode 속성을 Repeat로 설정하지 않았기 때문이다.
해당 스프라이트의 Wrap Mode 를 변경한다.
이것은 예시이기 때문에 따라하지 않아도 된다.
텍스처의 Wrap Mode
| Wrap Mode 옵션 | 설명 |
| Repeat | 텍스처를 반복하는 옵션 |
| Clamp | 텍스처를 반복하지 않고 늘리는 옵션 |
| Mirror | 미러링 처리를 해서 반복하는 옵션 |
| Mirror Once | 미러링 처리 후 한 번만 반복하는 옵션 |
| Per-axis | UV 축별로 Repeat, Clamp를 지정하는 옵 |
Filled
: 이미지를 특정 방향으로 채워서 그릴 수 있음. 채워지는 방향은 Fill Method 속성에서 정의 가능 Fill Origin 속성은 어느 위치에서부터 채울것인지를 선택
| Fill Method 옵션 | 설명 | Clockwise 속성 |
| Horizontal | 가로 방향으로 이미지가 채워진다 | X |
| Vertical | 세로 방향으로 이미지가 채워짐 | x |
| Radial90 | 이미지가 90도 각도로 채워짐 | 0 |
| Radial180 | 이미지가 180도 각도로 채워짐 | 0 |
| Radial360 | 이미지가 360도 각도로 채워짐 | 0 |
게이지나, 시계, 타이머, 스킬 쿨링 타임등 자주 사용하는 속성이다.