[UE5] Last Bot Standing Devlog - 17

안녕하세요

오늘 Devlog는 프론트엔드 마무리 내용을 준비했습니다.
이론보다는 과정과 구현 내용을 중점으로 작성해 볼겁니다.

---

 드디어 프론트엔드 UI 유데미 강의를 완강했습니다...

강의 하나하나 보고 소화하느라 시간이 정말 많이 걸렸네요.

이제 CommonUI 플러그인으로 제가 원하는 UI를 어느정도 구현을 할 수 있게 되었습니다.

Widget Stack 관리부터 UMG 사용법까지, 강의에서 작성하는 코드를 전부 타자치면서 체화하려고 노력한 결과 같습니다.
(작성한 코드 줄을 세어보니 2800줄 정도)

 

무엇을 공부하고 구현했는지 위젯별로 빠르게 훑고 지나가 봅시다.

메인화면

 

간단한 버튼과 상호작용으로 구성된 메인화면입니다.

UI 구성에 기본적이지만 필수적인 요소들인 PrimaryLayout의 Widget Stack 개념과,

위젯을 블루프린트에 할당할 수 있도록 FrontendSubsystem과 AsyncAction을 배울 수 있었습니다.

위젯을 쌓아 올리기 위한 기반이 되는 구현들이다 보니 통틀어서 가장 어려운 구간이었습니다.

옵션 - 게임 플레이

 

게임의 옵션을 다루는 위젯에서 게임플레이 탭 입니다.

앞서 배운 위젯을 할당하는 방법을 본격적으로 사용할 수 있었던 구간이었습니다.

그 중 Entry Widget Class 중 가장 기본이 되는 String(양 옆 화살표로 제어하는 위젯)을 구현해서 할당하고,

CommonUI의 TabList를 통해 상단 옵션의 대주제들을 담을 수 있는 탭을 제작했습니다.

 

옵션 - 오디오

 

 옵션의 오디오 위젯입니다.

아직 배경음악이나 구체적인 SFX가 실현되지 않은 상태이지만, 추후에 바로 적용할 수 있도록 세팅되었습니다.

Entry Widget Class 중 Scalar(양 옆 방향의 슬라이더 위젯)을 구현하고 할당했습니다.

 

옵션 - 비디오

 

옵션의 비디오 탭입니다.

화면의 해상도, 그래픽 설정을 바꿀 수 있는 기능을 구현했습니다.

언리얼 엔진의 그래픽 관련 API들을 다뤄볼 수 있는 구간이었습니다.

 

옵션 - 컨트롤

 

옵션의 컨트롤 탭입니다.

실제 키 매핑 데이터를 가져와 수정할 수 있는 기능을 구현했습니다.

이를 위한 Entry Widget Class로 KeyRemap을 구현해 사용자가 직접 키보드를 눌러 Input Action에 사용되는 키를 수정할 수 있는 리매핑 시스템을 배울 수 있는 구간이었습니다.

 

모달(Modal)

 

사용자가 다양한 상황에서 선택을 할 수 있도록 도와주는 모달 창입니다.

OK, Yes/No, Ok/Cancel 총 세 가지 타입 중 하나로 구성할 수 있도록 구현했습니다.

 

로딩 화면

 

게임 실행 직후, 레벨 초기화 등 다양한 상황에서 사용가능한 로딩 화면입니다.

현재 어떤 로딩을 하고 있는지에 대한 상태를 알 수 있는 텍스트를 구현했습니다.

---

마치며

이제 메인메뉴는 배경 애니메이션과 로드아웃 탭정도 추가하면 손 볼 곳이 크게 없을 것 같습니다. (+ 한글화)

프론트엔드는 메인메뉴 뿐만아니라 HUD부터 매칭 스크린, 인게임 메뉴등 구현할 내용이 많으므로 이번에 강좌를 통해
배운 내용으로 차근차근 채워 나가면 될 듯합니다.

다음 일지는 인게임 개발 내용을 들고 올 예정입니다. UI 코드를 너무많이 봐서 이제 물리네요.

그럼 다음 일지에 뵙겠습니다!