UI - Canvas

캔버스(Canvas)

 

모든 UI 요소는 Canvas 안에 위치한다. 캔버스는 Canvas 컴포넌트가 있는 게임 오브젝트이며

모든 UI 요소는 반드시 어떤 캔버스의 자식이어야 한다.

 

UI요소 생성시, 예를 들어 UI메뉴의 Image를 사용하여 이미지를 생성했을 때

Sence에 아직 캔버스가 없다면  자동으로 캔버스를 생성하고

생성한 UI요소는 이 캔버스의 자식으로 생성이 된다.

 

 

Event System이라는 게임오브젝트도 같이 생성되는데

UI와 사용자간의 상호작용을 관리한다.(터치, 클릭 등)

 

캔버스 - Render Mode

 

Screen Space - Overlay

렌더 모드에서는 UI 요소가 화면에서 씬의 위에 렌더링 되며,

스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경한다.

 

Screen Space - Camera

이 렌더 모드에서는 캔버스가 지정된 카메라 앞에 지정된 거리만큼 배치된다.

UI 요소는 이 카메라에 의해 렌더링되며, 이는 카메라 설정이 UI의 모양에 영향을 미칠 수 있다.

카메라가 투시로 설정된 경우 UI 요소는 원근감으로 렌더링되며 원근 왜곡의 정도는 카메라 시야로 제어가 가능하다.

화면 크기가 조정되거나 해상도가 변경되거나 카메라 절두체가 변경되면 캔버스도 그에 맞게 자동으로 크기가 변경된다.

 

World Space

캔버스는 씬에 있는 다른 오브젝트처럼 동작한다.

캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링 시킬 수 있다.

이 방식은 월드의 일부를 이루도록 의도된 UI에 활용되며 주 활용처로는 360도를 둘러볼 수 있는 VR이 있다.

 

Screen Space - Overlay 속성

 

Pixel Perfect
 - 2D 혹은 픽셀아트류 를 활용한다면 켜야한다.

위 이미지는 Pixel Perfect를 적용한것과 아닌것의 차이를 보여주는데

픽셀이 균등하게 있는 것을 확인 할 수 있다.

 

Sort Order
 - Layer Overlay시 순서 정하는 것

 

Target Display
 - UI가 해당 디스플레이에서 보이게 하는 설정

 

Canvas Scaler

 

폰 마다, 모니터 마다, 게임기 마다 표현 가능한 해상도가 다르다.

해상도 마다 UI를 만드는 것은 힘든 일이다.

해상도가 바뀌어도 거기에 맞춰서 Canvas 형태가 바뀌는데

바뀌는 Scale을 관리하기 위한 기능을 제공해준다.

 

UI Scale Mode

 

- Constant Pixel Size

픽셀의 크기를 기준으로 한다.
Reference Pixels Per Unit - 유닛당 픽셀의 갯수로 Scale을 정할 수 있다.

 

Scale With Screen Size(가장 많이 활용함)

Screen Size(X, Y 크기)로 Scale을 정한다.

 

Screen Match Mode

 - Match 
- Width : 넓이 기준
- Height : 높이 기준

기준을 넓이로 할지 높이로 할지를 결정한다.

 

Constant Physical Size
실제(물리) 해상도 기준(장비의 해상도)으로 Scale이 결정된다.
거의 사용 할 일이 없다

 

UI는
Rect Transform이란 것을 사용한다.
Rect Transform 은 Transform을 상속받기에 Transform을 사용할 수 있다.
하지만 Rect Transform는 Transform 과 다르게 무조건 GetComponent를 해야만 코드상에서 활용 할 수 있다.

 

Pivot - 이미지가 어디서부터 그려지는 지에 대한 기준점이다.
0.5 0.5에 있으면 이미지의 가운대를 뜻하며(default값) Pivot을 어디에 잡느냐에 따라 변화가 다르다

예시를 들자면 게임에서의 hp바가 있다

X를 0에 두고 크기를 조절하면 이미지의 시작점이 왼쪽이 된다.

게임에서의 hp바 같은 경우 왼쪽에서 부터 시작해서 오른쪽으로 이동하며

가득차고 왼쪽으로 감소하게 된다.

 

X를 0.5에 둔다면 hp가 양쪽에서부터 감소되어 중앙으로 모여들게 될 것이다.

 

Anchors - 캔버스의 어느 부분을 기점으로 UI가 그려질 것인지 정하는 것 이다.

캔버스에서 UI가 어느 부분에 위치(배치) 해야 하는지에 대한 기준을 정하는 곳이라고 생각하면 된다.