# 이번 장부터 다룰 내용
지난 강좌에서 우리는 브러쉬유에서 사용할 게임모드(GM_Game)와 플레이어 컨트롤러(PC_Game)를 생성하고 게임에 적용했어요.
이번 장부터는 플레이어의 화면에 띄워줄 UI를 만들어볼텐데요. 그 전에 어느 정도 작업이 진행된 화면을 보면서 어떤 요소들이 필요할지 얘기해볼게요.
작업이 필요한 UI는 다음과 같아요.
1. 좌측 상단 생명력 표시
2. 중앙 콤보 표시
3. 하단 파레트 표시
4. (스크린샷에는 표시되지 않지만) 물감튜브 아이콘 드래그 앤 드롭 기능
구름은 UI가 아니에요. 그냥 배경이에요.
이제 작업을 시작해보죠.
# UI의 기본요소인 위젯 만들기
UI화면에는 상태표시창, 버튼등의 다양한 요소가 있어요. 언리얼 엔진에서는 이러한 요소들을 모두 위젯이라고 부르는데요. 위젯도 액터와 마찬가지로 블루프린트를 이용해 만들 수 있어요. 한번 만들어 보겠습니다.
1. 콘텐츠 브라우저에서 Blueprints 폴더 아래 UI 폴더를 만드세요.
2. 위젯 블루프린트를 만들기 위해 UI 폴더에서 우클릭 > User Interface > Widget Blueprint 를 선택하세요.
3. 이름을 Master로 바꾸고 저장해주세요.
4. Master 위젯 블루프린트를 열면 위젯 블루프린트 에디터 창이 나와요.
에디터 사용법에 대한 자세한 내용은 아래 링크에서 확인해보세요. 따라할 수 있는 예제도 많이 제공됩니다.
UMG UI 디자이너
UI 요소 제작을 위한 UMG, 언리얼 모션 그래픽 사용 안내입니다.
docs.unrealengine.com
5. 다시 에디터 메인 화면으로 돌아가서 같은 방식으로 4개의 위젯 블루프린트를 만드세요.
Master 위젯 안에 나머지 위젯을 배치할 계획이에요.
# 드래그 앤 드롭 오퍼레이션 만들기
언리얼에서는 화면에 보이는 위젯에 대해 드래그 앤 드롭 기능을 기본적으로 지원해요.
드래그 앤 드롭 UI 제작
UMG 로 드래그 앤 드롭 가능한 UI 위젯을 만드는 법을 보여드립니다.
docs.unrealengine.com
1. UI 폴더에서 우클릭 > Blueprint Class 를 선택하세요.
2. Pick Parent Class 창이 뜨면 All Classes 를 누르세요.
3.DragDropOperation를 검색해서 만드세요. (항목을 선택하면 나오는 Select 버튼을 클릭하세요.)
4. 이름은 PaintTubeDrag로 짓습니다.
5. PaintTubeDrag를 더블클릭해서 여세요.
6. My Blueprint 탭에서 Variables 옆 + 버튼을 누르세요. 변수를 하나 만들어 두겠습니다.
7. 변수의 이름은 Origin으로 바꾸세요. 이름 좌측 아이콘을 눌러서 Panel Widget을 검색하세요. Object Reference (맨 위 항목) 로 만들어주세요.
8. 변수를 선택한 상태로 Details 탭(디테일 패널)에서 Instance Editable 및 Expose on Spawn을 체크하세요.
Expose on Spawn 옵션을 켜주면 게임 도중 PaintTubeDrag를 새롭게 생성할 때 Origin변수를 노출시켜 생성시점에 값을 넣을 수 있어요. 어디에 나오는지, 왜 이렇게 해야 하는지는 뒤에서 보여드릴게요.
9. Compile & Save 한 후에 PaintTubeDrag 블루프린트를 닫으세요.
참고로 방금 만든 PaintTubeDrag는 액터가 아니에요. 위젯의 드래그 앤 드롭 과정을 도와주는 무형의 어떤 것입니다.
# Master 위젯에 파레트 추가하기
물감튜브가 올라갈 파레트를 먼저 만들겠습니다. 시작하기 전에 아래 그림파일(텍스쳐)을 받으세요.
콘텐츠 브라우저에서 Materials 폴더 아래 Textures 폴더에 위 파일을 임포트하세요.
1. Master 위젯 블루프린트를 여세요. 현재 탭이 Designer 탭인지 확인하세요.
2. 좌측 상단에 Palette탭에서 image를 검색하세요.
3. 끌어다가 Canvas Panel 위에 올려놓으세요.
4. 올려놓은 이미지를 선택한 뒤 오른쪽 디테일 패널에서 Appearance > Brush > Image 를 찾으세요.
5. 잠깐, 텍스쳐를 머티리얼로 만들어서 올려야 겠습니다. 에디터 메인 화면으로 가주세요. Materials 폴더안에 새로운 머티리얼을 만들고 이름은 Palette로 지으세요.
6. 먼저 Material Domain 과 Blend Mode를 아래처럼 구성하세요.
7. 노드는 간단해요. 아래처럼 구성하세요. 아래 그림에 텍스쳐 프리뷰가 이상한데 처음에 임포트 한 BrushYouPalette 텍스쳐 맞습니다. (텍스쳐 에셋 드래그 앤 드롭으로 머티리얼 에디터에 끌고 올 수 있는 것 기억하고 계실거라 믿어요)
8. 다시 Master 위젯 블루프린트를 여세요.
캔버스 패널(점선 사각형)의 모양이 오른쪽 그림과 다르다면 우측 하단 화살표를 잡고 적당히 크기조절을 해주세요. 프리뷰 화면이라서 모양대로 나오는 것은 아니에요.
9. 이미지 선택 후 디테일 패널에서 Image 항목에 방금 만든 Palette 머티리얼을 넣으세요.
10. 다시 디테일 패널에서 Anchors를 조정해주세요. 아래 그림에 표시된 옵션을 선택하세요.
위 그림과 같이 나오면 잘 된거에요.
11. 아래 표시된 값들 4개를 그림과 같이 바꾸세요.
12. 아래와 같이 나왔는지 확인해주세요.
# 슬롯위젯 구현
게임에서 슬롯은 보통 아이템을 올려놓을 수 있는 공간을 말해요. 이번에는 물감 튜브를 올려놓을 슬롯 위젯을 만들어볼게요. 슬롯은 파레트 위에 올라갈거에요.
1. SlotWidget을 여세요.
2. 계층구조 탭에서 Canvas Panel을 지우세요. (선택 후 Delete)
3. Palette 탭에서 SizeBox를 찾아서 추가하세요.
4. SizeBox 선택 후 디테일 패널에서 Child Layout을 다음과 같이 바꾸세요.
5. Palette 탭에서 border를 찾아서 SizeBox 아래 추가하세요.
6. Border 선택 후 디테일 패널에서 Is Variable을 체크하세요. Border를 변수로 만들어서 여기저기 불러서 쓰겠다는 뜻입니다.
이제 물감 튜브 머티리얼을 Image를 넣어줄 차례인데 아직 만들지 않았기 때문에 먼저 만들어주겠습니다.
여기, 물감 튜브 텍스쳐를 다운받아서 Materials > Textures 폴더에 임포트 하세요.
7. Materials 폴더에 새 머티리얼을 만들어서 PaintTube라고 이름 붙여주세요.
8. PaintTube의 Material Domain 및 Blend Mode, 그리고 노드구성은 아래처럼 해주세요.
- 먼저 임포트한 텍스쳐를 불러오세요.
- VectorParameter 를 만들어서 Color라고 이름붙이세요. 값은 모두 1로 맞추세요.
- Constant3Vector 도 만드세요. 값은 모두 0.535로 맞추세요.
- Multyply 2개와 Add 1개를 추가해서 노드망을 완성하세요.
9. 결과물을 확인하세요.
10. 다시 SlotWidget으로 돌아오세요. Border를 선택 후 디테일 패널의 이미지를 방금 만든 머티리얼로 설정하세요.
11. 디테일 패널에서 다른 옵션들도 모두 아래처럼 맞추세요.
한번 더 확인하시면 좋아요.
12. 디자이너 탭 우측 상단 맨 구석 옵션을 Desired로 바꾸세요. 결과가 아래 그림처럼 나오면 됩니다.
# 다음 장에 이어집니다.
새로운 내용이 많았는데 어떠셨나요? 혹시 궁금한 점이 있으시면 댓글에 남겨주세요. UI 만들기는 디자인 뿐 아니라 기능 구현에도 디테일하게 신경쓸 부분이 많아서 여러 장에 걸쳐 진행해보겠습니다. 잘 따라와주세요.
'모바일 게임 개발 > [입문]브러쉬유' 카테고리의 다른 글
| 14. 브러쉬유: UI 만들기(3) (0) | 2020.10.24 |
|---|---|
| 13. 브러쉬유: UI 만들기(2) (0) | 2020.10.24 |
| 11. 브러쉬유: 게임모드와 플레이어 컨트롤러 생성 (0) | 2020.10.23 |
| 10. 브러쉬유: 카멜레온을 터치하면 일어나는 일(4) (0) | 2020.10.23 |
| 9. 브러쉬유: 카멜레온을 터치하면 일어나는 일(3) (0) | 2020.10.23 |
