13. 브러쉬유: UI 만들기(2)

​

계속해서 UI 작업을 진행하겠습니다.

​

 

#아이템 위젯(ItemWidget) 만들기

 

이번에는 아이템 위젯을 만들어 볼게요. 아이템 위젯에는 드래그 앤 드롭으로 움직일 수 있는 물감 튜브를 구현하겠습니다.

완성된 모습

 

​

1. ItemWidget을 여세요. (그림 생략)

​

2. 계층구조(Hierarchy) 창에서 기본으로 들어가 있는 Canvas Panel을 지우고 SizeBox와 이미지를 아래 그림처럼 구성하세요.

​

3. 사이즈 박스(Size Box)의 디테일 패널에서 Width Override 및 Height Override를 120으로 설정하세요.

​

4. 미리보기 사이즈 설정을 Desired 로 바꾸세요.

​

5. 이미지를 선택하고 디테일 패널에서 Image를 PaintTube로 바꾸세요.

 

 

---

# 라이프 박스 위젯 만들기

 

이번에는 라이프 박스 위젯을 만들어보겠습니다.

​

1. LifeBox 위젯을 열어서 Canvas Panel을 지우세요. 그 다음 Horizontal Box와 Image 한 개를 아래처럼 배치하세요.

Horizonal Box는 내용물을 가로로 정렬해주는 기능을 가진 박스에요. 그리고 이미지는 한개를 제작한 다음 복제로 하나 더 만들어 줄 예정이에요.

​

4. Image를 선택하고 디테일 패널에서 Image를 ChameleonBody로 설정하세요. 그리고 Image Size는 60, 60으로 입력해주세요. 마지막으로 Color and Opacity에서 색상과 투명도를 자유롭게 정하세요.

​

5. 이미지를 다시 선택한 상태에서. Ctrl + W 키를 이용해 복제품을 만드세요. 저는 복제품 2개를 만들겠습니다.

​

6. Compile & Save 를 해준 뒤 에디터 메인 화면으로 돌아갑니다.

​

 

---

# 콤보 박스 만들기

 

이제 연속 성공(콤보) 표시용 위젯을 만들겠습니다.

​

1. ComboBox 위젯을 여세요.

​

2. 마찬가지로 Canvas Panel을 삭제한 뒤, Vertical Box와 텍스트를 아래처럼 배치하세요.

​

3. 위의 텍스트를 선택하고 디테일 패널의 Text 입력창에 COMBO를 입력하세요.

​

4. 아래 텍스트를 선택하고 디테일 패널의 Text 입력창에 일단은 아무 숫자나 입력하세요.

​

5. 크기 조절 옵션을 Desired 로 바꾸시면 깔끔하게 보여요.

​

6. Compile & Save 를 해줍니다.

​

​

이로써 Master 위젯에 들어갈 부속품들이 준비됐네요. 다음 장에서는 이번 장에서 만든 위젯들을 이용해 Master 위젯을 완성하겠습니다.