[Cocos Creator] UI 배치하기 (Widget)

모든 스마트폰은 크기가 다르다

우리가 스마트폰 게임을 만들었다고 가정을 했다고 가정하자. 어떤 스마트폰은 정사각형 모양이고 어떤스마트폰은 직사각형 모양이라고 했을때 해상도에 맞는 UI 배치를 기종에 따라 다르게 배치하는것은 불가능한 일이다. 언제 다른 스마트폰이 출시될지도모르고 출시된다 하더라도 그 스마트폰을 위해서 코드를 수정하기에는 수많은 유지보수가 뒤따른다.

그럼 어떻게 모양이 다른 디스플레이를 단 한번의 적용으로 채울수 있는 방법은 없을까??

기준점을 잡자

 PC 게임중 리그오브레전드 (롤) 를 예로 들어보자. 롤은 모니터의 크기에 따라 맞는 해상도를 지원한다. 모니터의 종류로는 정사각형도 있고 직사각형, 심지어 가로가 엄칭긴 스크린도 있다. 롤을 기준으로 해상도를 변경했을 때 UI가 어떻게 변할까?

첫번째 그림은 1920 * 1080 해상도일때 모습이고 두번째 그림은 3840 * 1440 일때 모습이다. 해상도가 변할때마다 아래에 있는 UI 화면은 각각 왼쪽아래, 중간아래, 오른쪽아래를 기준으로 해서 정렬이 된다. 즉, 각각의 UI 들은 화면이 변경됨에 따라 배경의 끝부분을 기준으로 해서 배치가 되는 모습이다. 그럼 Cocos Creator 에서는 어떻게 UI 배치를 해야할까??

Cocos Creator UI 배치

 Creator 프로젝트를 생성하고 버튼 3개, 라벨 3개를 만들어 아래 그림과 같이 배치하자.

그리고 이상태에서 Canvas의 크기를 변경해보자. 

       

만약 이와같은 게임이 출시가 되었다면 UI 가 중간으로 몰려있는 불상사가 발생할 것이다. 그럼 해당 노드마다 스크립팅을 해서 모서리쪽으로 UI가 배치되게 해야하는 것인가? 더 쉬운방법이있다. 

Widget

Widget 컴포넌트는 해당 노드의 배치를 담당한다. 배치를 하면서 해당 노드의 기준 위치를 지정을 할수가있다. 위 의 예시에서 롤의 UI 는 모서리 지점을 기준으로해서 배치가 되는 모습을 볼수가 있다. Cocos Creator 에서는 Widget 을 이용해서 UI를 손쉽게 배치할 수 있다.

3개의 버튼과 라벨에 Widget 컴포넌트를 추가해보자. Add Component -> Add UI Component 에서 제일 하단에 있다.

추가를하면 Top Left Right Bottom 체크박스와 중간에 사각형 모양이 있다. 이는 해당 부모노드를 기준으로 어느지점에 배치를 할지를 결정한다. 먼저 왼쪽위에 있는 버튼을 클릭하고 Left와 Top에 처크를 하자.

체크를 하면 해당 버튼은 항상 왼쪽 위를 기준으로 (30, 30) 픽셀 떨어진 기준에 배치가 된다. 다른 노드들도 배치가 가능하다. 예로들면 중간 위에 있는 버튼은 Top 만 지정을 하면 항상 위쪽을 중심으로 배치가 된다. 또한 항상 중간에 있어야한다. 이때는 아래애 있는 기능인 Horizontal Center, Vertical Center 를 사용하면 된다. Horizontal Center 는 가로 기준으로 중심이고 Vertical Center 는 세로 중심으로 중심이다. 우리는 가로를 중심으로 중심을 지정해야하기 때문에 Horizontal Center를 체크하자.

마지막으로 Target 을 지정할 수 있다. Target 은 부모노드의 기준이 아닌 다를 노드를 기준으로 할 때 사용된다. 만약 2번째 버튼이 1번째 버튼을 기준으로 배치를 하고싶으면 Target 에 1번째 버튼의 노드를 넣어주면된다. 

 

button1 에 맞게 Top의 픽셀값도 변경이 되어있는 모습이다.

이제 다시 Canvas 의 크기를 변경해보자. 이번에는 크기에 상관없이 버튼들이 모서리쪽으로 배치되는 모습을 볼수있다.