유니티 Canvas

- 기초부터 시작하는 초짜의 개인 공부용 포스트. 공부한 것 중 올리고 싶은 것만 마음대로 올립니다.

- 여러 방법(주로 인터넷 서치)을 이용해 독학

- "아 그거 그렇게 하는 거 아닌데..." 지적 환영

 

 

유니티에서 씬을 생성하면 Hierachy창에 자동으로 존재하는 Canvas.

그동안은 "UI 요소는 여기에 넣는다."라고 그냥 당연하게 여기기만 했는데, 이젠 그 정도로는 넘어갈 수 없게 되었다.

Canvas가 뭔데... 왜 UI를 여기에 넣어야 되는데... 왜 밖에 만들면 안 되는데... 어디까지가 UI고 어디까지가 UI가 아닌데... 이건 화면에 비해 왜 이렇게 큰데... 등등의 의문점이 자꾸 생겼기 때문.

 

아래로는 어느 정도 이해한 결과.

 

1. UI 요소는 Canvas에 넣는다.

 

UI란 카메라가 움직여도 화면에 계속 고정되어 있어야 하는 존재.

Canvas는 카메라가 움직이거나 말거나 화면에 계속 꿋꿋하게 존재하는 틀이기 때문에, UI를 이 틀 안에 위치시키는 것.

비주얼노벨식 기본 대화 시스템으로 예시를 들자면, 캐릭터의 이름이 출력되는 네임택, 대사가 출력되는 대사박스, 대사 시스템을 컨트롤하기 위한 각종 스킵/자동/기록 등의 버튼, (있다면) 게임 설정 버튼 등이 UI에 포함된다.

 

여기서 문제는 캐릭터 스탠딩 일러스트와 배경 등인데, UI 취급하여 Canvas 안에 넣어도 큰 문제는 없을 것 같지만 여전히 의구심은 남는다.

배경이 메인 화면보다 커서 카메라 시점 이동이 이루어진다면...? 확대 및 축소 같은 연출이 들어간다면?

캐릭터 스탠딩은 왠지 UI는 아닌 것 같고, 변화도 많이 일어나는데 UI 취급해도 괜찮은 건가...

 

이 두 가지 의문점의 해결이 필요하다...

 

(추가)
해결했다. UI도 스프라이트처럼 애니메이션 효과가 가능하다.
그러나 복잡한 애니메이션인 경우 UI가 아닌 스프라이트 취급하여 애니메이션을 넣는 게 효과적.
화면 흔들림과 같은 연출은 캔버스에 적용하기보다는 카메라 자체를 흔드는 게 낫다.

캐릭터 스탠딩 일러스트의 경우, 복잡한 애니메이션(숨 쉬기 모션이나 움직이는 제스처 모션 등)이 들어간다면 스프라이트로 만들고 그렇지 않다면 UI Image로 만들어도 된다.

무엇보다 배경이고 캐릭터고 UI 취급하는 게 가장 좋은 이유는... 화면 해상도 때문이다.
UI로 만들지 않으면 해상도에 따라 리소스 크기 설정을 하나하나 해줘야 하는 듯하다.

결론!
해상도가 하나로 고정되는 게 아니라면 웬만해선 배경과 캐릭터 스탠딩 등은 UI 취급하는 게 나아 보인다.
(지금으로선 그렇다. 더 공부하면 달라질지도...)

 

 

2. Canvas는 한 씬에서 여러 개가 가능하다.

 

하나의 씬 당 하나의 캔버스만 쓰는 줄 알았는데 다중 캔버스가 가능했다. 심지어 주워듣기론 유니티에서 이 점을 잘 써먹으라고 했다는 거 같다.

 

생성 방법은 하이어라키 창에서 마우스 우클릭>UI>Canvas

 

 

3. Canvas Scaler

 

Canvas에는 Canvas Scaler라는 컴포넌트가 존재한다.

 

 

거기엔 이렇게 세 가지 옵션이 있다.

이중 주목한 것은 Scale With Screen Size.

이 옵션을 선택하면 화면 해상도가 변경되어도 거기에 맞춰 자동으로 UI 사이즈가 조정된다.(화면이 커지면 UI 사이즈도 커지고, 작아지면 UI 사이즈도 작아진다)

 

다른 옵션인 Constant Pixel Size는 화면 크기 변동과 관계없이 UI가 동일한 픽셀 크기로 유지,

Constant Physical Size는 동일한 물리적 크기로 유지된다.
간혹 해상도를 키우면 UI가 작아지는 게임들이 있었는데, 그 게임들은 이런 옵션을 취했겠구나 생각했다.

 

 

UI Scale Mode를 Scale With Screen Size로 설정하면, 사진과 같은 프로퍼티들이 나온다.

 

그중 Screen Match Mode 프로퍼티에는

- Match Width or Height

- Expand

- Shrink

옵션이 있다.

 

 

Match Width or Height

화면 크기가 달라졌을 때, 캔버스 영역의 너비 또는 높이 수치를 사용해 UI 크기를 결정한다. 사실 아직은 무슨 소린지 정확힌 잘 모르겠다.

Match의 정도를 조정할 수 있는데, 세로뷰 게임의 경우 Width를 1로/가로뷰 게임의 경우 Height를 1로 맞추는 게 예쁘다고 한다.(출처는 여기)

 

Expand

화면 크기에 맞춰 캔버스 영역을 수직 혹은 수평으로 늘린다.

 

Shrink

화면 크기에 맞춰 캔버스 영역을 수직 혹은 수평으로 자른다.

 

 

해상도가 달라지면 리소스들의 크기를 어떻게 조정하나 궁금했는데, UI는 이런 방식으로 조정함을 배웠다.

 

---

 

아직 풀리지 않은 의문은...

1. 그래서 Canvas 영역은 메인 카메라에 비해 왜 이렇게 크게 뜨는 것이며,

 

좌측 하단의 조그마한 네모가 메인 카메라다.

 

 

2. 모든 요소를 UI로 넣었더니 메인 카메라엔 아무것도 안 잡히는데 이래도 되는가이다.

 

UI니까 게임 화면에 뜨긴 한다. 빌드에선 어떨지?