유니티 UI 속성 (Image & RawImage)

 

1. Image

이미지는 UI 시스템에서 스프라이트를 렌더링 하는 UI 요소이다. UI 시스템은 레이어 시스템이다. 우선순위를 두거나, 이미지의 변경이 필요한 경우 사용한다. 하지만 스프라이트는 텍스쳐보다 메모리를 더 많이 사용하고, 처리하는데 시간이 걸린다.   

 

※ 씬에서는 스프라이트 렌더러를 사용하여, 스프라이트를 렌더링합니다.  

 

1.1 속성

1.1.1 공통속성

Color : 색상을 설정한다.

Material : 머티리얼을 설정한다.

Raycast Target : 레이 캐스팅 사용 유무. 체크(✓)는 레이 캐스팅을 허용한다. 

Maskable : 마스크에 영향을 받을지 받지 않을지를 선택한다. 체크(✓)는 기본으로 허용

 

1.1.2 ImageType

 

ImageType - Simple

단일 스프라이트만 사용한다.

 

Use Sprite Mesh :  체크(✓)는 스프라이트 메쉬를 사용한다. 스프라이트 임포트 세팅(Sprite Import Settings)의 Mesh Type과 연관이 있다. 

Preserve Aspect : 체크(✓) 는 스프라이트 고유의 비율을 유지한다.

100 * 100의 스프라이트를 300 * 500의 이미지에 등록하였을 경우 300 * 500으로 스프라이트가 변형되어, 본래의 이미지 모양과 달라진다. Preserve Aspect 속성에 체크(✓)하면  300 * 300으로 이미지를 표시한다. 

ImageType - Sliced (9-Sliced)

Sliced 모드는 스프라이트 에디터를 사용해, 영역을 나눈 스프라이트를 사용한다. 

 

아래의 이미지는 스프라이트 에디터를 사용해 영역을 나눈 이미지이다.( 녹색 구분선 )

녹색 구분선을 움직여 영역을 나눈다. 나누어진 영역이 9개이므로, 9-Sliced이다.

각각 나누어진 영역은 아래의 기준에 따라 유니티 시스템이 이미지를 조절한다.   

 

Center :  늘리거나, 타일을 만든다.  

A : 모서리 영역으로, 가로와 세로를 고정한다.

H : 좌우 영역으로, 세로 크기는 고정, 가로는 늘리거나, 타일을 만든다.

V : 위아래 영역으로, 가로 크기는 고정, 세로는 늘리거나, 타일을 만든다.

Base Image

위 이미지가 기준 이미지이다. 정사각형의 이미지이다. 외곽선을 그릴 때 Simple과 Sliced에서 어떻게 표현되는지 확인한다. 

 

아래 이미지는 위 이미지를 Simple 모드 일 때와, Sliced 모드일 때 렌더링 되는 차이를 보여준다. Simple모드는 가로 영역에 그려진 선과, 세로 영역에 그려진 선의 크기가 일정하지 않다.  Sliced 모드는 가로 영역과 세로 영역의 선의 크기가 같다. 

Simpe and Sliced

위 이미지는 정사각형인 이미지를 직사각형에 그렸을 때의 차이를 보여준다.

정사각형도 Simple과 Sliced 모드의 외곽선이 그려지는 방식이 다르다.  

 

 

ImageType - Tiled

이미지를 타일 형태로, 그려준다. 

 

Pixels Per Unit Multiplier : 픽셀 퍼 유닛을 기준으로 이미지를 타일 맵 형태로 그린다. 

 

ImageType - Filled 

이미지를 채우는 형태로 그려준다. 예를 들어, Fill Method는 Vertical, Fill origin은 Top, Fill amount가 0.5일 때, 그림의 위쪽부터 중간 지점까지 이미지가 그려진다.

 

Fill Method : 이미지를 그리는 형태이다. Horizontal, Vertical, Radical 90, 180, 360이 있다. 

Fill Origin : 이미지를 그리는 시작점을 나타낸다. Bottom, Right, Top, Left가 있다.

Fill Amount : 0 ~ 1 사이의 값을 갖는다. 

Clockwise : Fill Method의 Radical 90, 180, 360을 선택하면 나타나는 옵션으로, 시계 방향 or 시계 반대방향으로 이미지를 그릴 것인지를 선택한다. 

 

2. RawImage

로우 이미지는 텍스쳐를 렌더링 하기 위한 UI 요소이다. 로우 이미지는 실시간 렌더링에 사용하는 Render Texture, 조작, 변형 없이 이미지를 사용하는 경우에 사용한다. Render Texture는 씬에서 카메라가 렌더링 하는 이미지를 보여주는 텍스쳐다. 실시간 렌더링에 사용한다. 

 

UV Rect 

UV 렉트는 큰 이미지의 일부분을 그려주는 용도로 사용하기 좋다.  

 

 X Y : 0~1 사이의 값을 갖으며, 이미지의 오프셋(Offset)이다. 기본은 (0.0, 0.0)으로 X값을 0.1로 입력하면, (0.1, 0.0) 지점에서부터 이미지가 그려진다. 

W H : Width와 Height이다. 기준은 1,1이며 WH가 (0.5, 0.5) 일 때에는 Width의 절반, Height의 절반이 그려진다. 

  

※ Color, Material, Raycast Target, Maskable은 공통 속성이다. Image의 설명란을 볼 것. 

 

3. Image vs RawImage

이미지는 스프라이트를 렌더링 하고, 로우 이미지는 텍스쳐를 렌더링 한다. 스프라이트를 사용하는 이미지가 자원을 더 많이 사용한다. 이미지가 더 느리다. 텍스쳐에서 스프라이트로의 변환 Sprite.Create(texture)이 이루어지기 때문이다. 하지만 텍스쳐는 Draw Call을 발생시킨다. 유니티 시스템이 GPU로 렌더링을 요청하는 것을 Draw Call이라 한다. Draw Call이 많아질수록 성능 저하가 발생할 수 있다.  

참조

 

https://answers.unity.com/questions/1070280/raw-image-vs-image.html

Raw Image vs Image? - Unity Answers