UGUI - 1. Canvas

Base Of Coding 베오코 Youtube 채널을 개설했습니다.

아직은 많이 부족하지만, 블로그에 있는 정보들을 영상으로 담아 보다 더 자세하게 알려드리겠습니다.

점차 발전해나가는 모습 지켜봐주시면 감사하겠습니다.

좋아요와 구독으로 응원해주세요!

https://www.youtube.com/channel/UC7abgcK0OZtkjU9ERbsYKnQ

=========================================================================

출처: https://includecoding.tistory.com/71 [#Include]

안녕하세요. Base Of Coding입니다.

오늘은 UGUI에서 첫 번째인 Canvas에 대해서 올려보도록 하겠습니다.

---

< 1. UGUI란? >

- UGUI는, Unity Graphic User Interface의 약자인것 같습니다.

유니티 에디터상에서, UI를 만들어줄 수 있게 유니티에서 제공해주는 것인데

기존에는, NGUI라는 유료에셋이란 것을 사용했다고 합니다. ( 저는 사용은 해봤지만, NGUI를 이용해서 개발을 제대로 해본적은 없네요ㅎㅎ )

특히 이 UGUI를 만들 때, NGUI 개발자분도 같이 만들었다고 합니다.

이 UGUI는, 일단 장점으로는, 유니티에서 무료로 제공해준다는 점이구요. 굉장히 잘 되어 있습니다.

Text , Image , Raw Image , Button , Toggle , Slider , Scrollbar , Dropdown, Input Field , Canvas , Scroll View , Panel , Event System으로 구성이 되어 있고

오늘 알아볼 것은, 저 모든 것을 보여줄 수 있는 Canvas라는 녀석입니다.

---

< 2. Canvas? >

- Canvas는 게임화면에 대응합니다. 게임뷰의 해상도를 1280 x 1024라고 지정을 해놓고 작업을 한다고 생각하면, Canvas에서, Rect Transform에 있는 Width와 Height가 각각 1280 * 1024로 되어있습니다.

1 : 1비율이면서, 플레이어의 화면에 따라 대응하게 된다고 생각하시면 됩니다.

< 이건 게임뷰에서 1280x1024로 해상도를 설정해놓은 것이구요.

< 이게 바로, 캔버스에 Width와 Height가 1280 * 1024로 맞춰진 것입니다. 게임뷰와 1 : 1비율로 설정이 되어있네요. >

한 번, Canvas에 대해서 제대로 알아보도록 할까요? Canvas를 사용하시려면, 이 두가지가 제일 중요합니다. Rect Transform같은 경우는, Canvas에서 임의로 변경할 수는 없습니다. 

왜냐하면, 게임뷰에 1 : 1로 대응을 하기 때문이죠.

저희는 오늘 이 두 가지에 대해서 알아보려고 합니다.

Canvas라는 컴포넌트와, Canvas Scaler라는 컴포넌트인데요. 이 중에서도, Render Mode와 UI Scale Mode에 대해서 설명하도록 하겠습니다.

---

< 3. Canvas - Render Mode >

1 ) Screen Mode - Overlay

- UI들이 스크린상에서만 존재하고 모든 3D 오브젝트들이 그려진 다음에 마지막에 UI요소를 덮어쓰는 방식입니다. 

1. 일단 큐브 오브젝트를 만들었습니다. 저는 Material을 만들어서, 색깔을 빨간색으로 만들어서, 큐브에 넣어줬습니다. 빨간색 큐브가 되었네요.

2. Game 뷰로 보았을 경우, position 0,0,0의 위치로 놨을 때의 모습은, 큐브가 정가운데에 보여지고 있는 모습을 보실 수 있습니다. 

자! 그런데, 제가 버튼을 하나 만들어서 저 가운데에 배치를 해도 저 큐브는 과연 보일까요?

3. 정답은 보이지 않습니다. 왜냐하면, 3D 오브젝트들이 먼저 렌더링이 된 다음에, UI를 그려서 덮어씌우기 때문입니다. 레이어라는 개념을 아신다면 쉽게 이해하실 수 있으실겁니다.\

이게 바로 Screen Space - Overlay입니다.

2 ) Screen Space - Camera

- 스크린 좌표계에 대응하는 방식이고, 3D 좌표상에서 위치를 가지게 됩니다. 카메라를 기준으로 거리에 따라 떨어져있게 되기도 합니다. 즉 Canvas도 좌표를 가질 수 있게 됩니다.

1. Render Mode를 Screen Space - Camera로 변경합니다. 그리고, Main Camera를, Render Camera에 드래그 앤 드롭해줍니다.

파란색으로 된 부분을 잘 살펴보시고, 넣어주세요ㅎㅎ

2. 그리고, Main Camera를 살펴봅니다. 그러면, Canvas가 같이 보이게 됩니다. Main Camera의 좌표를 움직여보시면, Canvas가 같이 따라다니는 것을 확인하실 수 있습니다.

Screen Space - Camera는, 카메라에 캔버스가 같이 붙어다니는 형식이라고 생각하시면 됩니다. 

Plane Distance라는 것이 있는데, 이건, Render Camera에 붙어있는 카메라에 따라 거리가 조절이 됩니다. 숫자가 클수록 멀리, 숫자가 작을 수록 카메라와 가깝게 말이죠.

3. 번외편, Plane Distance.

일단 버튼 UI를 하나 추가해놓았습니다.

< Plane Distance를, 100의 상태로 맞춘 게임뷰의 모습 >

< Plane Distance를, 1의 상태로, 카메라와 최대한 가깝게 맞춘 게임뷰의 모습 >

이것을 왜 설명하냐면, Screen Space - Overlay는, 무조건, 렌더링이 끝나고, UI를 덮어씌우는 방식이라면,

Camera는, Plane Distance라는 것을 조절해서, 렌더링된 오브젝트 보다 앞으로 보이게 하거나, 또는 렌더링 된 오브젝트보다 뒤로 보이게 할 수도 있다는 점입니다.

물론, Screen Space - Overlay로 많이 쓰긴 하겠지만, 알아두면 좋을 것 같아서 적어놨습니다.

3 ) World Space

- 보통 증강현실 또는 가상현실에서 UI로 사용하게 되는데, World Space를 하게 되면, Canvas도 하나의 3D 오브젝트가 될 수 있습니다.

위 두 가지 방식은 하나는 좌표를 가질 수 없고, 스크린 상에서만 UI를 그릴 수 있게 하는 방식이고, 한 가지는 카메라에 따라 Canvas가 달라지는 반면에, World Space는 하나의 3D오브젝트가 되기 때문에,

좌표만 지정해놓고, 큐브 위에 올려놓을 수도 있고, 아니면 하나의 게임오브젝트의 자식 오브젝트로도 사용이 가능한 방식입니다.

1. 큐브를 0, -1.6, 17의 위치로 만들어놓고, 메인카메라의 위치는, 0, 0, 0.4 그리고, Canvas의 Rect Transform에서 위치를 0,12.4,18.6 그리고, 크기를 width / height 30씩 맞춰줍니다.

< 큐브의 Transform 값 >

'

< Main Camera의 Transform 값 >

< Canvas의 Rect Transform 값 >

2. 그리고, Image UI를 만들어서, Rect Transform을, 0,0,0 그리고 크기를 각각 10씩 줍시다. 그런 뒤에, Cube에 Canvas를 자식 오브젝트로 놓습니다.

< Image의 Transform 값 >

< Cube가 Canvas를 자식 오브젝트로 설정해 놓을 때의 하이어라키 상태 >

그리고, Cube의 위치값을 계속 변경해보시면, Canvas가 따라다니는 것을 보실 수 있습니다. 즉, World Space로 할 경우에는, Width / Height값을 변경해서,

3D 오브젝트로써 사용도 할 수 있을 뿐더러, 누군가의 자식 오브젝트로 주어, UI 오브젝트 위에 또는 앞에 위치할 수도 있습니다.

그렇기 때문에, 가상현실 ( VR 환경 ) 에서 많이 사용하기도 합니다.

---

< 4. Canvas Scaler >

1 ) Constant Pixel Size

- UI요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지되는 상태

2 ) Scale With Screen Size

- 화면이 커질수록, UI요소도 커지는 상태, 즉 화면비율에 따라서 UI도 맞춰지는 상태

3 ) Constant Physical Size

- 화면 크기와 해상도에 관계 없이 UI 요소가 동일한 물리적인 크기로 유지되는 상태.

Canvas Scaler에서 제일 많이 쓰이는 방법은, 2번 Scale With Screen Size입니다. 왜냐하면, 스마트폰 기기들의 화면비율이 각각 다르기 때문이죠.

Scale With Screen Size에 대해서만 알아보도록 하겠습니다.

1. Reference Resolution

- UI 레이아웃에 적합한 해상도이며, 화면 해상도가 크면 UI가 더 크게 스케일이 되고 작으면 UI가 작게 스케일이 됩니다.

< 400 * 300 해상도 일 경우 >

< 800 * 600 해상도 일 경우 >

< 1280 * 1024 해상도 일 경우 >

화면 비율에 따라, 캔버스의 크기가 커지는 것을 확인하실 수가 있습니다.

이것은 또 앵커라는 것에 따라, UI의 위치가 조절이 되거나 고정이 되기도 합니다. 그 부분은 다음편 앵커에 대해서 천천히 알아보도록 하겠습니다.

2. Screen Match Mode

- 현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 캔버스 영역을 스케일하는 데 사용되는 모드입니다.

( Match Width or Height ) : 캔버스 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일 하거나 그 사이로 스케일 합니다.

( Expand ) : 캔버스 크기가 레퍼런스보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장합니다.

( Shrink ) :  캔버스 크기가 레퍼런스보다 커지지 않도록 캔버스를 수평 또는 수직으로 자릅니다.

3. Match

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

4. Reference Pixels Per Unit

- 스프라이트에 이 'Pixels Per Unit' 설정이 적용된 경우 스프라이트의 1 픽셀이 UI의 유닛 하나에 해당합니다.

Canvas Scaler 부분은, Unity API Reference를 참조했습니다.

확실히 사용하는 부분만 사용하다보니, 저도 모르는 게 많네요ㅠㅠ Canvas는 아 이런 거구나 정도만 알고 넘어가셔도 충분합니다.

앵커라는 개념이 중요하기 때문이죠. 물론 저도 계속 공부하고 있는 부분이기도 합니다.

그렇기 때문에, 앵커라는 개념은 저도 어느정도 파악이 된 다음에 글을 올리도록 하겠습니다. 천천히 하나하나 알아가보도록 하죠.

지금까지 Canvas에 대한 내용에 대해서 알아봤구요.

Base Of Coding 이였습니다. 감사합니다.

- 이 글에 도움이 되셨다면, 공감(♡) 버튼과 댓글 부탁드리겠습니다. -