[리그오브워치개발일지] #11 유저 인터페이스 : 캐릭터 선택 (1)

Git

레포지토리 주소 : https://github.com/kjinwoo12/UE5Game_LeagueOfWatch
기준 태그 : 11_CharacterSelectionUI

기획 정리

UI를 만들기 전에 첫 글 [리그오브워치개발일지] #1 어떤 게임을 만들까?에서 작성한 캐릭터 선택 UI와 관련된 기획을 다시 살펴보자.

• 기본 게임 규칙
  • 모든 유저의 캐릭터 선택이 완료되면 선택된 캐릭터가 유저의 진영의 기지에서 등장하고, 유저가 조작할 수 있게 된다.
• 유저 인터페이스
  • 매칭이 완료되면 게임이 시작되고 캐릭터 선택 UI가 나타난다.
  • 캐릭터 선택 화면에는 유저별 선택된 캐릭터를 확인할 수 있는 인터페이스와 캐릭터 버튼, 선택 버튼이 있다.
  • 선택 버튼을 누른다면 준비 완료 상태를 알려주는 그림 또는 텍스트가 유저별 선택된 캐릭터를 확인할 수 있는 인터페이스에 나타난다.
  • 모든 유저가 선택 완료되었으면 캐릭터 선택 UI가 사라지고 게임 플레이 UI가 나타난다.

지금은 테스트를 위한 더미 UI가 있을 뿐이고, UI가 언제 나타나며 사라지는지에 대한 처리가 전혀 되어있지 않다. 기획을 보고 자세한 요구사항을 정리해보자.

요구사항 확인

아래는 기획안에서 확인할 수 있는 요구사항이다.

• 매치메이킹
• 캐릭터 선택 UI
• 유저끼리 선택한 캐릭터를 확인할 수 있게 서버 처리
• 모든 유저가 캐릭터 선택을 완료하면 캐릭터 UI 사라짐
• 모든 유저가 캐릭터 선택을 완료하면 게임 플레이 UI 등장
• 유저 소속 팀(유저 진영) 기능
• 유저 소속 팀 기지 추가
• 모든 유저가 캐릭터 선택을 완료하면 해당 캐릭터로 소속 팀 기지에 스폰됨

게임의 매치메이킹은 아직 어떤 서버를 사용할 것인지 정해지지 않아 지금은 다루지 않는다. 이번 글부터는 매치메이킹과 서버 처리를 제외한 6 가지 요구사항을 다룰 것이다.

캐릭터 선택 UI

리그오브레전드 & 오버워치 캐릭터 선택창

캐릭터 선택 UI에 필요한 화면은 캐릭터 목록, 선택 버튼, 유저들이 어떤 캐릭터를 선택했는지 확인할 수 있는 화면이다. 지금은 화면 좌측 하단에 작게 버튼이 있을 뿐이지만, 위에 스크린샷처럼 보기 좋게 바꿔볼 예정이다. 또, 다른 플레이어가 어떤 캐릭터를 선택했는지 볼 수 있는 기능 등 서버가 추가된 이후까지 고려해야 한다.

WBP_IngameLevel_CharacterSelection

캐릭터 선택 화면 위젯은 #3 기본 게임 규칙 구현 : 플레이어 캐릭터-구현-캐릭터 에서 생성해둔 WBP_IngameLevel_CharacterSelection을 확장해서 만드려고 한다. 우선 위젯도 레벨에 종속된 것이 있기 때문에 위치를 Core/Widgets/IngameLevel/에서 Core/Widgets/DepondOnLevel/IngameLevel/로 다른 위젯과 함께 옮겼다. 이제 위젯을 요구사항에 맞게 바꿔보자

현재 선택된 캐릭터 확인 UI

당연한 말이지만, 캐릭터 선택 UI는 캐릭터를 선택할 수 있어야 한다. 그 기능을 하는 것이 캐릭터 버튼이다. 위젯 하단 HorizontalBox에 추가된 BP_CharacterSelectionButton이 그 역할을 수행한다. 지금은 버튼을 누르자마자 캐릭터가 생성되고 플레이어 컨트롤러가 빙의한다. 하지만 요구사항에서는 모든 플레이어가 선택 버튼을 눌러 선택이 완료되어야 캐릭터가 생성된다고 되어있기 때문에 변경할 필요가 있다. 버튼을 눌렀을 때 내가 어떤 캐릭터를 눌렀는지 확인할 수 있는 기능이 있어야 한다.

WBP_SelectedCharacterViewer 위젯을 추가하고 선택된 캐릭터의 이미지, 유저의 이름, 캐릭터 이름을 확인할 수 있도록 이미지와 텍스트를 추가했다. 유저의 이름은 일정 길이 이상부터는 텍스트가 위젯을 빠져나올 수 있기 때문에 균등한 위젯 크기를 위해 텍스트 블록을 스케일 박스로 감쌌다. 이미지 변경을 위한 텍스처2D와 텍스트 변수들을 위젯에 바인딩하고 스폰시 노출 옵션을 켰다. 이제 이 위젯을 BP_IngameLevel_CharacterSelection에 적절하게 배치하고 유저의 캐릭터 선택 기능과 연결해주면 끝이다.

WBP_IngameLevel_CharacterSelection

캐릭터 버튼

유저의 캐릭터의 선택은 '캐릭터버튼클릭' -> '확인버튼클릭' 순으로 이루어진다. 이 두 행위에 대한 이벤트를 위해 인터페이스 BPI_IngameLevel_CharacterSelectionWidgetEventListener를 만들어 처리했다. 함수 OnCharacterSelected는 캐릭터 버튼이 눌렸을 때, OnCharacvterConfirmed는 확인 버튼을 눌렀을 때 호출될 것이다. 이 두 함수 모두 BP_IngameLevel_CharacterSelection에서 BP_SelectedCharacterViewer에 캐릭터 값을 전달하게 될 것이다. 이 부분은 확인 버튼과 함께 다루겠다.

위젯 하단 HorizontalBox에 추가된 BP_CharacterSelectionButton의 버튼을 누르면 바로 캐릭터가 스폰되는게 아니라 WBP_SelectedCharacterViewer에 선택된 캐릭터를 보여주도록 수정해야 한다.

우선 하단에 HorizontalBox를 삭제하고 별도의 위젯인 WBP_CharacterSelectionTable을 만들어 리그오브레전드와 비슷하게 구성했다. 계층 구조는 스크롤박스-스케일박스-WBP_CharacterSelectionTable로 구성했다. 위젯의 구현은 아래처럼 하면 된다.

확인 버튼

선택한 캐릭터를 확정하는 버튼이 필요하다. 코드는 간단하다.

게임 플레이로 전환

모든 플레이어가 선택을 완료했으면 게임 플레이로 전환하는 방법을 만들어야 하지만, 서버 관련 내용은 이번 글에서는 다루지 않기 때문에 다음 글에서 다루도록 하겠다.

다음글

UI에서는 서버와 관련된 기능이 많기 때문에 제한되는 것이 많았다. 캐릭터 선택 기능을 제공하는 서버를 만들고 UI 기능을 완성하도록 해보자.