개발자의 개발 블로그

유니티에서 캔버스(Canvas)를 생성하면 다음과 같이 여러 컴포넌트가 기본적으로 생성된다.

-> Rect Transform, Canvas, Canvas Scaler, Graphic Raycaster

Canvas Scaler 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다. 

스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미친다.

쉽게 말해 화면의 크기 변화에 따른 UI크기 변화를 조절할 수 있다.

Constant Pixel Size를 사용할 경우 

유니티상에 개발 화면과 실제 디바이스 폰 화면 해상도가 크게 차이가 난다면, 폰에서 정말 콩알만하게 보이게 된다.

따라서, Scale With Screen Size 모드를 통해 화면이 커지면 UI 요소들도 커지도록 설정하는 것이 좋다.

여기서 Match로, 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정합니다.

이 차이는 분명하다.

이 사진은 Constant Pixel Size을 적용한 것을 스마트폰에서 실행한 결과이다.

왼쪽 상단 버튼의 경우 새끼손가락으로 눌러야 터치 될 정도로 매우 작다.

이 글을 쓰게 된 이유이다.

Scale With Screen Size 모드를 사용하게 되면, 화면이 커지게 되면 UI도 커지게 할 수 있다.

이렇게 큼지막하게 나와 버튼 조작이 쉬워지고, 가운데 이미지도 시원시원하게 크게 나오게 된다.

유니티에서 사용하는 모든 UI 요소들은 기본적으로 Canvas안에 위치해야 한다.

캔버스(Canvas)는 Canvas 컴포넌트가 존재하는 게임 오브젝트의 일종이다.

캔버스를 먼저 생성하지 않아도, GameObject - UI 메뉴에서 자신이 원하는 UI (버튼, 이미지, 스크롤뷰 등등...)를

선택하면, 자동으로 Canvas가 생성이 되며, 그 안에 선택한 UI가 자식으로 생성이 된다.

또한, 캔버스(Canvas) 기능을 돕기 위해 EventSystem 오브젝트가 사용되기 때문에 동시에 생성된다.

캔버스(Canvas) 영역은 씬(Scene) 뷰에서 사각형으로 나타나므로 UI요소를 배치하기 용이하다.

캔버스(Canvas)에 있는 UI 요소는 계층 구조에 나타나는 것과 동일한 순서이다.

즉, 첫 번째 자식이 처음... 두 번째 자식이 그 다음으로 그려진다.

다시말하면, 첫 번째 자식이 두 번째 자식에 가려져 안 보이게 된다.

변경을 하고 싶다면 드래그하여 계층 구조에서 순서를 변경하면 된다.

또는 메소드를 사용하여 스크립트로 제어할 수도 있다.

1. Transform.SetAsLastSibling

가장 마지막으로 순서 변경

Move the transform to the end of the local transfrom list.

2. Transform.SetAsFirstSibling

가장 처음으로 순서 변경

Move the transform to the start of the local transfrom list.

3. Transform.SetSiblingIndex

순서 설정(index 값)

Sets the sibling index.

4. Transform.GetSiblingIndex

현재 순서 반환(index 값)

Gets the sibling index.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

렌더 모드(Render Mode)

캔버스에는 스크린 공간 또는 월드 공간에 렌더링하도록 하기 위해 사용되는 렌더 모드(Render Mode) 설정이 존재함.

1) 스크린 공간(Screen Space - Overlay)

이 렌더 모드에서는 UI 요소가 화면에서 씬 위에 렌더링된다.

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

2) 스크린 공간(Screen Space - Camera)

이 렌더 모드에서는 캔버스는 씬에 있는 다른 게임오브젝트처럼 동작한다.

캔버스의 크기는 사각 트랜스폼(Rect Transform)을 사용하여 수동으로 설정할 수 있다. (위 두 개는 수동 설정 불가)

또한 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링된다.

이 방식은 월드의 일부를 이루도록 의도된 UI에 유용하며 이 방식을 서사적 인터페이스라 부르기도 한다.