전에 것들.

#01을 보고 오시면 편합니당.

https://velog.io/@candycode/01-UI%ED%88%B4%ED%82%B7%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C%EC%9C%A0%EB%8B%88%ED%8B%B0

저번에 봤던 UI DOCUMENT가 디자인을 하는것까진 알았다. 그러면 이제 어떻게 디자인을 하는지 알아보자.

Scale Mode

UI DOCUMENT를 하기 전에 #01에서 설명하지 못한 Panel Setting에 Scale Mode에 대해 조금 알아보겠다.

Scale mode는 화면에 비율에 따라서 UI를 어떠한 크기로 그려줄지 정하는 것이다. 전에 우리가 사용했던 UI에 있는 Canvas Scaler와 같다고 생각하면 편하다.

Scale Mode를 클릭하면 이렇게 3가지 종류가 있는데. 우리는 여기서 Pixel Size만 할 것이기에 Pixel Size로 선택해준다.

그리고 화면 비율은 1080x1920으로 하겠다.

이제 준비는 끝났다. 그러면 이제 UI DOCUMENT로 어떻게 디자인을 하는지 알아보자.

UI DOCUMENT

UI DOCUMENT는 너무 기니까 편하게 UXML이라고 칭하겠다. 그러면 이제 좀 전에 만든 UXML파일을 열어주자.

처음 UXML파일을 열면 이런 화면이 나올것이다. 여기서 우리가 직접 UI를 디자인 하는 것이다. 우선 간단하게 살펴보겠다.

1. Hierarchy(하이라키)

왼쪽에 중간부분을 보면 Hierarchy라는 것이 보일 것이다. 처음 파일을 실행한 사람은 Hierarchy창에 하나만 들어가 있을 것이다. 이 것이 우리가 실행한 UXML파일이다. 유니티 에디터에서는 Herarchy의 게임오브젝트들이 나열되지만. UI툴킷에서는 Hierarchy창에 각종 UI를 구성하는 요소만 나열되게 된다.

UXML(UI툴킷)에서의 하이라키

Unity Editor(유니티 에디터)에서의 하이라키

2. Library(라이브러리)

Library(라이브러리)에서는 UI를 만들 때 사용할 요소들을 담아놓는 곳이다. 밑에 있는 Controls을 보면, 우리에게 익숙한 Label, Button, Scroller, Slider 등이 있는데, 이 라이브러리에 있는 요소들로 UI를 직접 만드는 것이다.

3. Viewport(뷰포트)

Viewport는 우리가 작업중인 UI를 실시간으로 보여주는 공간이다.

보통 이렇게 화면 중앙에 커다랗게 위치해 있다. 그리고 여기서 해주어야할 것이 있는데. Viewport에 오른쪽에 위치해 있는 테마를 확인해야 한다.

우리가 킨 UXML은 왼쪽 위에 보면 UI Builder라고 있을 것이다. 우리가 지금 쓰고있는 것은 UI Builder(UI빌더)인 것이다. 하지만 초기에 UI빌더는 유니티의 확장 프로그램을 만들 때 사용하던 UI도구였다. 지금까지도 그렇게 사용되고있다. 그렇기에 우리는 게임을 만들 때에는 테마가 Unity Default Runtime Theme가 되어있는지 확인해야 한다. 그렇게 하지 않으면 우리가 여기서 만든 UI가 실제 게임에서는 다르게 보일 수도 있기 때문이다. 그러면 이제 사이즈를 보자

Size

먼저 Hierarchy창에 있는 아까 있던 UXML을 클릭해 오른쪽에 Inspector창을 본다. 그러면 Size가 보일 것이다.

UI를 만들 때에 팝업창이나 HP, MP바 같은 UI의 특정 구성요소를 만들 때에는. 그냥 인스펙터창에 Size를 조절하면 된다.

이렇게 말이다. 하지만 화면 전체를 뒤덮는 UI를 만들고 싶다면. Size 아랫부분에 있는 Match Game View를 체크 해준다.

Match Game View는 말 그대로 해당 UI크기를 실제 게임 화면 사이즈에 맞게 매치시킨다는 것이다. 그리고 Size아래에 있는 Canvas Background를 체크하면, Canvas(UXML화면)에 배경색깔을 입힐 수 있다.

방장은 잠시 노란색으로 하였다. 하지만 자세히 본 사람들은 이미 오른쪽에 사진과 카메라 같은 네모박스가 더 있다는 걸 발견했을 것이다. 그렇다. 사진도 첨부할 수 있다.

그렇다면 옆에 카메라 모양은 뭘까

카메라를 클릭해보면 유니티 에디터에 있는 카메라를 고를 수 있다. 카메라를 선택하면, 해당 카메라가 찍고 있는 화면에서 작업할 수 있게 된다. 방장은 Main Camera을 다르게 해서 찍어보겠다.

사진을 봐보면 MainCamera에 화면에 오브젝트를 추가했는데. 이 오브젝트를 그대로 찍고 있는 모습이다. 이렇게 다양한 색깔과 사진, 카메라로 작업 환경을 바꿀 수 있다.

Library의 기능을 사용해서 UI추가까지 하기로 했지만, 분량이 너무 길어져서 다음으로 옮기겠다.

Next UI DOCUMENT 2