[Unity] 그래픽 UI (Text, Image, Raw Image, Panel)

그래픽 UI에 대해 알아 볼 것이다. 

그래픽 UI는 비상호적이며, 그리는 요소로 사용되는 UI로, Text, Image, Raw Image, Panel이 존재한다. 

(그래픽 UI라는 명칭은 정식 명칭은 아니다.)

 

차례 

Text

• Rect Transform
• Canvas Renderer
• Text

Image ( + Component)

Raw Image ( + Component)

Panel

 

 

그래픽 UI 위치

 

 

Text 

문자열을 화면에 표시하는 UI이다.

Rect Transform, Canvas Renderer, Text 컴포넌트를 기본적으로 지닌다.

 

Rect Transform (Component)

https://docs.unity3d.com/kr/560/Manual/class-RectTransform.html

모든 UI가 사용하는 Transfrom 컴포넌트이다. UI 전용 Transform

Anchors

부모 기준 붙어있을 위치로 핵심 개념중 하나이다.

화면 해상도에 알맞은 UI 위치를 구현할때 사용한다.

Min (X , Y) : 왼쪽 하단 모서리의 앵커 포인트 (0 : 좌측 하단 , 1 : 우측 상단)

Max (X , Y) : 오른쪽 상단 모서리의 앵커 포인트 (0 : 좌측 하단 , 1 : 우측 상단)

Min과 Max의 값이 같을때는 점 앵커, 다를때는 stretch 앵커

왼쪽은 Min값과 Max값이 같아 한점이 기준이 되며, 오른쪽은 Min값과 Max값이 달라 한 영역이 기준이 된다.

 

Pivot

자기 자신의 기준점 (0 : 사각형 왼쪽 하단 , 1 : 사각형 오른쪽 상단)

 

 

Position (X,Y,Z) (점 앵커 Min = Max)

Anchors를 기준으로 한 Pivot 포인트의 위치

 

Width , Height (점 앵커 Min = Max)

UI의 높이와 넓이

 

Left, Top, Right, Bottom (stretch 앵커 Min != Max)

Anchors의 기준 영역으로 부터 떨어진 거리

앵커 영역 안쪽에 있으면 양수, 앵커 영역 밖으로 나가면 음수가 된다.

Left : 앵커의 왼쪽 경계에서 UI의 왼쪽 경계까지 의 거리

Right : 앵커 오른쪽 경계에서 UI의 오른쪽 경계까지의 거리

Top : 앵커 위쪽 경계에서 UI의 위쪽 경계까지의 거리

Bottom : 앵커 아래쪽 경계에서 UI의 아래쪽 경계까지의 거리

 

Anchors Preset 

https://docs.unity3d.com/kr/560/Manual/UIBasicLayout.html

자주 사용되는 앵커 옵션들을 선택할 수 있는 시스템이다.

클릭을 하게 되면 앵커의 Min, Max값이 자동으로 변경된다.

Shift + 클릭시 Pivot의 위치도 함께 변경된다.

Alt + 클릭시 UI의 위치도 함께 변경한다. 

Shift + Alt + 클릭시 Pivot의 위치와 UI의 위치도 함께 변경한다. 

 

Rotation 

Pivot을 기준으로한 UI의 회전각도

Pivot의 위치에 따라 같은 회전각도에서 다른 결과값이 나오는 것을 볼 수 있다.

Scale 

Pivot을 기준으로 한 UI 크기

 

 

Canvas Renderer (Component)

https://docs.unity3d.com/kr/530/Manual/class-CanvasRenderer.html

UI 요소를 실제 화면에 그려주는 렌더링 전용 컴포넌트이다.

Cull Transparent Mesh : UI의 알파값(투명도)이 0일때, mesh를 렌더링 하지 않는다.

 

Text (Component)

Canvas위에 문자열을 렌더링 하는 컴포넌트

Text : 화면에 표시할 문자열

Font : 사용할 폰트 

Font Style : 폰트 스타일 (Normal , Bold , Italic , Bold & Italic)

Font Size : 글자 크기

Line Spacing : 줄 간격 배율

Rich Text : 태그 사용 가능 (<b>굵게<b> , <i>기울임<i> 등)

 

Alignment : RextTransform 영역 안에서 정렬

Align By Geometry : 실제 문자 외곽 기준으로 정렬

Horizontal Overflow : 가로로 영역을 넘어간 텍스트 출력 방식 (Wrap : 줄바꿈 , Overflow : 넘어가도 그대로)

Vertical Overflow : 세로로 영역을 넘어간 텍스트 출력 방식 (Truncate : 영역 넘으면 잘림 , Overflow : 넘어가도 그대로)

Best Size : 자동으로 폰트 크기 조절

Color : 텍스트 색상

Raycast Target : 클릭 감지

Raycast Padding : 클릭 판정 조절

Maskable : 부모 Mask 기능으로 부터 UI 영역을 벗어나면 자르기 기능 허용

 

 

Image

Sprite를 화면에 그리는 기본적인 UI 그래픽

Image 컴포넌트

Source Image : 사용할 Sprite

Color : Sprite 위에 곱해지는 색상 

Image Type 

Simple : Sprite를 늘려서 그림

• Use Sprite Mesh : Sprite의 실제 Mesh모양 사용
• Preserve Aspect : Sprite 원본 비율 유지

Sliced : 모서리는 유지하고 중앙만 늘림

• Fill Center : 중앙 영역을 채운다. 
• Pixel Per Unit Multiplier : Pixels Per Unit에 곱해지는 배율

Tiled : 중앙 영역을 늘리지 않고 반복

 

Filled : 일정 비율만 채워서 그림

• Fill Method : 채우는 방식 (Horizontal , Vertical , Radial 90 , Radial 180 , Radial 360)
• Fill Origin : 채우기 시작 위치
• Fill Amount : 채우는 비율
• Clockwise : 채우는 방향

Set Native Size : Sprite 의 원래 픽셀 크기로 RectTransform 설정

 

 

Raw Image 

https://docs.unity3d.com/kr/2018.4/Manual/script-RawImage.html

Texture를 그대로 UI에 표시하는 한다.

 

RawImage (Component)

Texture : 표시할 이미지를 나타낼 텍스쳐

Color : 텍스쳐 위에 곱해지는 색

 

UV Rect : 텍스처가 보여줄 부분

X : 텍스쳐의 왼쪽 기준 시작 위치

Y 텍스쳐의 아래 기준 시작 위치

W : 가로 표시 비율

H : 세로 표시 비율

 

Panel

Image가 붙어있는 빈 UI 오브젝트

배경, 레이캐스트 차단용 , UI 정렬 컨테이너 등 다양한 곳에 활용된다.