# 이번 장에서 할 일
옵션 창 UI 디자인
이번 시간에는 실제 옵션 창 UI 디자인을 완성하고 기능까지 구현해보겠습니다.
# 아이콘 다운로드 받기
Flaticon
이번에는 플랫아이콘(or 플래티콘)사이트에서 다운받은 아이콘으로 UI를 꾸며보려고 하는데요. 물론 꼭 이곳에서 아이콘을 구해야 하는 것은 아니에요. 언리얼 엔진 마켓플레이스나 다른 사이트에서 구하시거나 혹은 직접 제작하셔도 좋습니다. 심지어 그냥 아이콘 없이 진행하셔도 문제 없습니다.
Flaticon, the largest database of free vector icons
Download all icons in SVG, PSD, PNG, EPS format or as webfonts
www.flaticon.com
플랫아이콘에서 제공하는 아이콘을 이용하는 방법은 홈페이지에 자세히 나와있는데요. 무료 플랜 사용자는 게임의 Credit 페이지 등을 통해 플래티콘 측에서 요구하는 방식대로 출처를 명시해야 한다는 조건이 있어요. 프리미엄 플랜을 구독하면 아무런 제약 조건 없이 아이콘을 다운받아서 사용할 수 있게 됩니다.
저는 현재 프리미엄 플랜에 가입되어 있는 상태이지만, 무료 플랜으로 진행하시는 분들을 위해 크래딧 표기하는 방법까지 포함해서 진행해볼게요. (이 부분은 Credit 창을 만들면서 다시 말씀드릴게요.)
이번 시간에 만들 옵션 창에는 BGM 및 사운드에 대한 On/Off 기능을 넣어볼텐데요. 따라서 해당 버튼에 필요한 아이콘을 다운받도록 하겠습니다. 플래티콘에서 "music note", "sound" 등으로 검색했습니다.
# 텍스쳐 임포트하기
1. 사운드, 브금에 대해 활성, 비활성 상태에 대한 이미지를 준비하세요.
활성 상태 텍스쳐를 엔진 내에서 채도를 빼서 사용하는 방법도 있는데요. 그건 이번 장 맨 마지막에 다뤄보겠습니다. 저는 일단 포토샵을 이용해서 채도를 뺀 비활성 아이콘도 만들었습니다.
2. Blueprints > UI > Textures 에 임포트하세요.
3. 방금 임포트한 텍스쳐를 모두 선택한 후 우클릭 > Asset Actions > Bulk Edit via Property Matrix... 기능을 이용해 Compression Settings와 Texture Group을 아래처럼 맞추세요.
# Option 위젯 블루프린트 만들기
옵션 창은 게임 오버 창과 동일한 디자인을 사용해보려고 해요. 그래서 위젯도 처음부터 만들 필요 없이 GameOver 위젯 블루프린트를 복제하겠습니다.
1. GameOver 위젯을 선택한 뒤 Ctrl+W 키를 눌러 복제하세요. 복제한 위젯의 이름을 Option으로 바꾸고 블루프린트를 여세요.
2. Hierarchy 탭에서 [Box_Info]와 [Image_GameOver]를 지우세요.
3. Graph 모드로 넘어가서 블루프린트 그래프의 모든 노드를 다 지우세요. Compile & Save 하세요.
4. 다시 Designer 모드로 넘어가서 Text를 하나 올려놓고 앵커는 스크린 정중앙에 위치시키세요.
5. 디테일 패널의 프로퍼티는 다음과 같이 맞춰주세요. (더 괜찮은 디자인 아이디어를 반영하시는건 언제나 환영입니다.)
6. 이번에는 버튼을 한개 배치하고 앵커를 정중앙에 배치하세요.
Alignment 도 X, Y 모두 0.5로 맞추세요.
7. 버튼에 Image를 하나 올려놓으세요.
이미지를 Normal, Hovered, Pressed 에 각각 배치하는 대신 버튼에 Image 위젯을 올려놓는 방식이에요.
8. 버튼을 선택해서 Size To Content를 체크하고 Normal, Hovered, Pressed 상태에 대해 Draw As 옵션을 None으로 설정하세요.
버튼은 보이지 않고 이미지만 보입니다.
9. Image의 Brush > Image 프로퍼티를 임포트 한 텍스쳐 중에 활성화 이미지 하나를 골라 설정하세요. 저는 브금 활성화 텍스쳐를 골랐습니다.
10. 이미지의 프로퍼티를 다음과 같이 만드세요.
11. 버튼을 복제하세요. (Ctrl + W)
12. 두번째 버튼의 이미지에는 사운드 활성화 텍스쳐를 설정하세요. 사이즈도 맞춰주세요.
13. 버튼을 하나 더 추가하고, 텍스트를 하나 올리세요. 버튼의 앵커는 정중앙이에요.
확인 버튼을 만들거예요.
14. Alignment, 버튼크기, 텍스트 크기, 폰트 등을 원하는 디자인으로 만드세요.
저는 Draw As 를 모두 None으로 해서 텍스트만 보이게 만들었고, 버튼의 크기를 텍스트 크기보다 키워서 대충 터치해도 버튼이 반응할 수 있도록 해주었어요. 텍스트는 주아체 폰트에 크기는 40으로 맞춰주었습니다.
아래는 최종 디자인 결과에요. 제가.. 감각이 부족해서 심플하게 만들어 보았어요.
15. 위젯 요소들의 이름을 적절하게 바꿔주세요.
# 옵션 버튼 기능 만들기
1. Construct 이벤트와 버튼 세개의 OnClicked 이벤트를 만드세요.
2. Custom Event 두 개를 만들고, 각각 UpdateMusicButton, UpdateSoundButton으로 이름을 변경하세요. Inputs 에 Boolean 형도 하나씩 추가하세요.
3. Image_Music변수의 Get 노드를 만든 뒤 Set Brush 노드도 찾아서 만드세요.
4. In Brush 핀을 우클릭 한 뒤, 변수로 승격(Promote to Variable)하세요. 변수의 이름은 MusicOn으로 만드세요.
5. Compile & Save를 하고 Variables 목록에서 MusicOn 변수를 선택하세요. 디테일 패널에서 Default Value를 찾으세요. 여기에 Music On, 즉 브금이 나올 때의 이미지 상태를 설정해야돼요. 디자이너 모드에서 설정했던 것 처럼 설정하세요.
6. MusicOn 변수를 복제해서 MusicOff 변수도 만드세요.
7. 그래프에서 Set Brush 노드를 복붙으로 하나 더 만들고, 아래처럼 연결하세요.
8. Image_Sound에 대해서도 같은 식으로 작업해주세요.
9. 방금 만든 노드망들에 Branch 노드를 추가해서 아래처럼 연결하세요.
10. Construct 이벤트에 Get Game Instance와 Cast To GI 노드를 만들어서 아래처럼 연결하세요.
11. As GI 핀을 우클릭 해서 Promote to Variable(변수로 승격)을 선택하고, GameInstance라는 이름의 변수를 만드세요.
다음부터 GI를 호출할 땐 GameInstance 변수를 부를거예요.
12. Set GameInstance 노드의 아웃풋 핀을 뽑은 상태로 Get PlayMusic 과 Get PlaySound 노드를 찾아서 만드세요.
옵션 창 위젯이 처음 만들어질 때, GI 속에 저장된 PlayMusic 과 PlaySound 변수의 값을 가져와서 True 인지 False 인지에 따라 버튼을 활성/비활성화 하는 작업이에요. Lobby에서 비활성화 시켰는데 GameLevel에서 다시 보니 버튼이 활성화 되어있으면 안되겠죠.
13. UpdateMusicButton과 UpdateSoundButton 이벤트 호출 노드를 만들고 아래처럼 연결하세요.
14. Button_Music의 OnClicked 이벤트 작업을 해주겠습니다. 먼저 GameInstance 변수의 Get 노드를 만드세요.
15. 핀을 뽑아들고 TurnMusic 함수 호출 노드를 만들어 연결하세요.
16. UpdateMusicButton 이벤트 호출 노드를 아래처럼 연결하세요.
17. 같은 방식으로 TurnSound 함수와 UpdateSoundButton 이벤트 호출 노드를 Button_Sound의 OnClicked 이벤트 노드에 연결하세요.
18. Button_OK의 OnClicked 이벤트에 Set Visibility 노드를 만들어 연결하고, In Visibility 설정은 Hidden으로 만드세요.
OK 버튼은 옵션 창을 보이지 않게 하는 역할을 합니다.
# 옵션 창 위젯 배치하기
Lobby 및 GameOver 위젯에
1. GameOver 위젯을 열고 디자이너 모드에 들어가세요.
2. Palette의 User Created 카테고리에서 Option을 찾아서 추가하세요.
3. 앵커는 4코너로 설정하세요.
4. 모든 Offset은 0으로 설정해서 위젯이 화면에 가득 채워지게 만드세요. ZOrder는 1로 설정해서 GameOver 위젯 요소들보다 앞에 그려지게 만들고, Visibility는 Hidden을 기본값으로 설정하세요.
5. 그래프 모드로 넘어가서 Button_Option의 On Clicked 이벤트에 Option 위젯을 Visible 처리하는 노드를 만드세요.
6. 앞에 진행한 과정을 Lobby 위젯에도 동일하게 적용하세요.
# 마무리
옵션 기능이 마무리가 된 것 같네요. 다음 장에서는 간단하게 크래딧 화면을 구성해보겠습니다.
질문 및 피드백은 언제나 환영입니다 :)
'모바일 게임 개발 > [입문]브러쉬유' 카테고리의 다른 글
| 35. 브러쉬유: 게임 데이터 저장/불러오기(1) (0) | 2020.10.25 |
|---|---|
| 34. 브러쉬유: 크레딧(Credits) 화면 만들기 (0) | 2020.10.25 |
| 32. 브러쉬유: 옵션 기능 만들기(1) (0) | 2020.10.25 |
| 31. 브러쉬유: 사운드를 추가해서 게임을 흥겹게 만들기 (0) | 2020.10.25 |
| 30. 브러쉬유: 게임 인스턴스(Game Instance)와 데이터 저장 (0) | 2020.10.25 |
