본문 바로가기

모바일 게임 개발/[입문]브러쉬유

14. 브러쉬유: UI 만들기(3)

 

 

 

# Master 위젯 조립하기

 

1. Master 위젯을 여세요.

2. 먼저 LifeBox 위젯을 배치하겠습니다. Palette 탭의 User Created 카테고리에서 LifeBox 찾아 생성하세요.

 

3. LifeBox의 디테일 패널에서 아래 그림에 표시된 대로 옵션을 조절하세요.

혹은 원하시는 대로 수치를 조금씩 바꾸어도 좋습니다. (Size To Content는 체크상태로 유지하세요. 이 옵션은 내용물의 크기에 맞게 자동으로 위젯의 크기를 조절해주는 옵션이에요.)

4. 이런 느낌이면 오케이입니다. 앵커가 좌측 상단에 자리하고 있어야해요.

5. 이번엔 ComboBox를 불러오세요.

6. 디테일 패널에서 앵커 위치를 정 중앙에 배치시키세요.

7. 디테일 패널에서 Position X, Y 를 0으로 바꾸고, Alignment는 0.5, 0.5로 바꾸세요. Size To Content도 체크하세요.

 

콤보박스 정중앙 배치

 

8. 이제 하단 파레트에 SlotWidget을 올려놓겠습니다. Horizontal Box 두개를 먼저 배치하세요.

9. 두 Horizontal Box의 앵커를 하단 중앙에 위치시키세요. 두 개 모두 같은 위치에 앵커를 두어야 합니다.

10. 이번엔 Horizontal Box 두개의 Position XAlignment를 조절하겠습니다. 그리고 아래 그림에는 Size To Content가 체크 해제 되어있는데, 이것도 체크 해주세요!!

11. Y값을 조절해서 두개의 Horizontal Box를 아래처럼 적절하게 배치하세요.

12. 디테일 패널에서 두 개의 Horizontal Box 모두 Is Variable에 체크해주세요.

13. Is Variable 체크박스 옆 이름 입력칸에 이름을 입력하세요. 위에 배치한 Horizontal Box는 이름을 Answers라고 짓고, 아래 Horizontal Box는 이름을 Samples 라고 짓겠습니다.

이름을 갖게 된 Horizontal Box 두 개 ​

 

14. Palette 탭의 User Created를 열어서 Slot Widget을 Horizontal Box 안에 일단 한 개만 끌어오세요. 여기서도 마찬가지로 하나를 완성한 다음 복제할거예요.

위의 Horizontal Box 안에 SlotWidget이 들어있는 모습

 

15. 그림을 직접 클릭하면 Horizontal Box가 선택됩니다. Hierarchy창에서 SlotWidget을 선택하세요.

무엇이 선택되어있는지 잘 보셔야해요

 

16. 디테일 패널에서 아래 표시된 옵션을 모두 설정하세요.

17. 다시 SlotWidget을 선택하고, Ctrl+W를 이용해 총 7개가 될 때까지 SlotWidget을 만드세요.

18. 7개 중 5개는 Samples 한테 넘기세요.

Samples에 5개 Answers에 2개 ​

 

 

19. 아래와 같이 보인다면 성공입니다.

20. 마지막으로 Answers Horizontal Box에 Text 위젯을 하나 끼워넣을게요. 두 SlotWidget 사이에 끼워넣어야 합니다.

 

 

21. Text 위젯의 디테일 패널에서 옵션을 아래처럼 바꿔주세요. 아래 그림처럼 보여야해요.

 

전체 형태는 이렇게 되어야 합니다.

 


# 다음 장에서는 게임 화면 세팅을 합시다.

 

지금까지 개별 위젯을 만들고, 그렇게 만든 위젯들을 Master 위젯에 배치했습니다. 이제 전체적인 UI 디자인은 어느정도 마무리 됐습니다. 다음 장에서는 드래그 앤 드롭을 포함한 UI 기능 구현에 앞서 게임 화면 세팅을 해볼게요.