본문 바로가기

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

28. 브러쉬유: 게임오버 UI 제작(2)

 

# 이번 장에서 다루는 내용

 

지난 장에서 디자인 한 게임오버 UI에 구현되어야 할 기능은 아래와 같아요.

1. 방금 전 게임에서 달성한 최고 콤보 기록 표시

2. 과거부터 현재까지 달성한 최고 콤보 기록 표시

3. 게임 재시작

4. 시작화면(Lobby)으로 이동

5. 구글플레이/게임센터 리더보드(순위표) 확인

6. 옵션창 열기

이번 장에서는 위 6개 기능 중에서 1, 3, 4번을 구현합니다.

6번 옵션버튼은 옵션창 UI를 완성한 다음에,

2번 Best 콤보 디스플레이는 게임 데이터의 세이브/로드 기능을 다루면서,

그리고 5번 리더보드(순위표)는 구글 플레이 서비스 연동하는 과정에서 구현할 예정이에요.


# Max 콤보 표시 기능

   Master 위젯에서

 

Max 콤보 표시 기능은 GameOver 위젯을 책임지는 Master 위젯에 구현할게요.

1. Master 위젯을 열고 Designer 모드로 들어가세요.

2. Palette의 User Created 목록을 열고 GameOver 위젯을 찾아 CanvasPanel에 올려놓으세요.

 

3. GameOver 위젯을 선택하고, Anchors 를 화면에 꽉 차도록 설정하세요.

4. Offset Left 부터 Offset Bottom 까지 모두 0으로 설정하고 ZOrder를 1로 잡아주세요.

ZOrder 값이 높은 위젯이 화면 앞쪽에 그려져요. 기본값은 아시다시피 0인데요, GameOver 위젯의 ZOrder를 0으로 두면 게임 상에서 '나중에 생성된' 위젯인 물감 튜브가 GameOver 앞쪽에 배치됩니다. 아래 그림에서 왼쪽처럼요.

ZOrder 0 과 1 의 차이

5. 계속해서 디테일 패널의 Behavior 카테고리의 Visibility 옵션을 Hidden으로 설정하세요. Compile & Save 하세요.

6. Graph 모드로 넘어가서 ReduceLife 이벤트를 찾으세요.

7. Branch 노드의 False 부분에 연결된 EndGame 이벤트 호출 노드를 끊으세요. (끊어진 노드는 지워도 됩니다.)

8. Variables 목록에서 GameOver 위젯 변수찾아 Get 노드를 만드세요.

9. Get GameOver 노드의 아웃풋 핀을 뽑고 Get Text_MaxCombo노드를 찾아 만드세요.

10. Get Text_MaxCombo 노드의 아웃풋 핀을 뽑고 SetText (Text) 노드를 만드세요.

11. Variables(변수) 목록에서 MaxCombo를 찾아 Get MaxCombo 노드를 만든 뒤 SetText (Text) 노드의 In Text 핀에 연결하세요.

ToText (integer) 노드는 자동으로 생성돼요.

여기서 잠깐,

MaxCombo 변수는 ClearCombo 이벤트 호출시 업데이트 되는데요.

바로 이 부분

 

이 ClearCombo 이벤트는 ReduceLife 이벤트에서 Branch 노드의 True 에서만 호출되고 있어요.

만약 생명력이 한 개 남은 상황에서 콤보 최고 기록을 세우고 죽었다면 어떻게 될까요? 아마 Clear Combo 이벤트가 호출되지 않아서 Max Combo 변수에 마지막에 세운 기록이 반영되지 않을거에요.

이 문제는 Clear Combo 이벤트를 Branch 노드보다 앞에 호출하면 해결할 수 있어요.

이제 생명력이 몇개가 남았든, 색 조합에 실패했다면 일단 콤보를 업데이트 하고 생명력 여부를 체크하게됩니다.

12. ToText (integer) 노드의 화살표를 눌러 노드를 확장한 뒤, Minimum Integral Digits 값을 2로 만드세요.

Minimum Integral Digits는 표시할 최소 자릿수를 정하는 옵션이에요.

숫자 0부터 9까지 00~09로 표시돼요.

13. SetText (Text)노드의 실행핀을 Branch 노드의 False 핀에 연결하세요.

Reduce Life 이벤트 노드망입니다.

 

14. Get GameOver 노드를 하나 더 만들고, 핀을 뽑은 채로 Set Visibility 노드를 찾아서 만드세요.

15. 방금 만든 노드망을 SetText (Text) 노드에 이어서 연결한 다음 Compile & Save 하세요.


# 재시작 버튼

 

GameOver 위젯 블루프린트에서 작업을 시작할게요.

1. GameOver 위젯을 열고 Graph 모드로 들어가세요.

2. Variables(변수) 목록에서 Button_Restart를 선택하고 디테일 패널에서 On Clicked 이벤트 만들기 버튼(+)을 클릭하세요.

이 이벤트는 버튼을 클릭하면 호출되는 이벤트에요.

3. OpenLevel 노드를 만들고 Level Name에 GameLevel을 적으세요. 그리고 이벤트 노드에 연결합니다.

이제 재시작 버튼을 누르면 레벨을 다시 여는 방법으로 게임이 재시작 될거에요. 간단하죠?


# 홈 버튼

 

1. Button_Home의 On Clicked 이벤트를 만드세요. 방법은 Button_Restart와 동일합니다.

2. Lobby 레벨을 여는 OpenLevel 노드를 만들어서 연결하세요. Compile & Save 하세요.

3. 게임을 테스트 해보세요!


# 다음 장에서는

   로비를 만들어요

 

게임오버 UI는 일단 여기까지 제작을 해 놓고 차근차근 완성해 나갈게요. 다음 장부터는 대망의 Lobby 레벨을 제작하겠습니다 :)