[Unity] Canvas 와 UI 오브젝트

유니티의 UI 를 살펴보겠습니다. (점수를 표시하거나 아래 사진처럼 버튼들을 표시하고 싶을 때 UI를 추가하여 사용합니다)

 

 

# Canvas 와 UI 오브젝트

Canvas는 모든 UI 오브젝트를 배치하기 위한 영역입니다. 

Canvas의 크기는 Scene View에서 사각형으로 표시된 범위로 표시되며 Canvas 사이즈는 게임 화면에 비례합니다.

 

Canvas 안에 버튼, 텍스트 등의 UI 오브젝트 를 배치합니다.

즉 UI 오브젝트가 반드시 캔버스의 자식이여야합니다.

만약 UI 요소를 캔버스 밖에 위치시키고 게임플레이를 해보면 UI 요소가 표시되지 않습니다. 

 

유니티에서는 이를 위한 장치(?)를 마련해뒀는데..

예를들어 Scene에 Canvas가 없는데 UI > Text를 만들면

 

 

이렇게 자동으로 Canvas, EventSystem을 만들어주고 Canvas 안에 Text를 만들어줍니다. 

'Canvas는 Messaging System 을 돕기위해 EventSystem을 사용한다' 라고 문서에 나와있는데, 
버튼을 Canvas에 배치하면 클릭 이벤트를 받아야하니까 당연히 필요한거다?! 이렇게 쉽게 생각하면 될 것 같아요

 

 

 

만약 Scene에 이미 Canvas가 있는 경우,

UI > Button 을 추가하면 이미 있는 Canvas 의 자식으로 버튼이 생깁니다. 

 

 

# UI 오브젝트 크기 및 위치 지정

그럼 이제 UI 오브젝트의 크기와 위치를 수정해보겠습니다.

 

 

버튼의 Rect Transform에 가면  Anchor 설정을 바꿀 수 있어요

기본은 center, middle로 되어있네요

 

 

기본적으로는 width, height를 변경할 수 있게 나오는데, 

 

 

Anchor Presets을 stretch 로 선택하면

iOS 오토레이아웃 처럼 상하좌우 padding 또는 spacing을 설정할 수 있게 바뀝니다. 

 

 

저는 아래와 같은 스펙을 하고 싶습니다. 

- height는 고정값

- width는 양옆 여백 50씩 padding 고정해두고 화면 사이즈에 따라 늘어나게 하고 싶음

- 버튼의 bottom은 canvas의 bottom에서 50 보다 위에 있도록

 

그래서 Anchor Presets을 이렇게 설정하고

 

 

우선 left, right spacing 을 50 으로 설정 / height를 100으로 설정해줬어요

 

 

bottom anchor를 사용하면 UI Object의 center가 Canvas의 bottom에 붙는 건가봐요!

 

 

그럼 Canvas의 bottom에서  50만큼 띄워주고 싶으면 

Pos Y를 100으로 하면 되겠네요! 

 

 

게임 플레이 해보면 잘 위치했습니다. 

 

 

 

# UI Object 들  배치 순서

지금 위를 보면 기존의 조이스틱 UI보다 새로 추가한 Button이 더 앞에 와있는 것을 볼 수 있는데요

그 이유는 하이어러키 창에서 아래쪽에 있는 오브젝트가 앞에 그려지기 때문입니다. 

 

 

만약 버튼의 위치를 위로 올린다면 

 

 

이렇게 버튼이 다른 UI 오브젝트들보다 뒤로 가게 됩니다. 

 

 

 

 

# Sprite Editor

안드의 나인 패치를 유니티에서도 지원해준다고 합니다. 

Sprite Editor를 누르면 2D Sprite 패키지를 설치하라고 뜨기 때문에 

 

 

이 패키지를 설치해준 후, Sprite Editor 를 눌러서 나인 패치를 설정해줍니다. 

 

 

아래 내용을 참고해주세요! 

 

https://docs.unity3d.com/kr/2020.3/Manual/9SliceSprites.html

9슬라이싱 스프라이트 - Unity 매뉴얼

 

 

https://recipes4dev.tistory.com/131