Kim Geon Woo Unreal Client

지난번 포스팅에서 팀 프로젝트에 대한 기획 중 어떤것들을 구현할 것인지에 대해 간단한 설계를 하였습니다.

이번 포스팅에서는 각각의 요소에서 어떤 기능들을 구현할 것인지, 그리고 해당 클래스들을 어떻게 관리할 것인지에 대해 기획한 프로젝트 내 UI들에 대해서는 지난번 포스팅한 MVVM 디자인 패턴을 적용할 것이며, 어떤 방식으로 적용할것인지에대해서는 UML 클래스 다이어그램을 사용하여 작성하겠습니다.

프로젝트를 진행하며 주요 인게임 내 주요 기능에대한 설계만을 포스팅하였습니다.

※ - FPS 팀프로젝트 초기 설계

※ - MVVM이란?  

UML 클래스 다이어그램 - InGame

인게임 - HUD

InGame내 항상 표현하게되는 HUD입니다.

각각 View 계층 역할을 담당하는 UUserWidget 기반의 C++클래스내 UTextBlock, UProgressBar, UImage 등을 

BindWidget을 사용하여 위젯 블루프린트 내 바인딩이 되어있지 않은 경우를 컴파일을 제한하는 형식의 유효성 검사를 언리얼에서 진행합니다.

따라서 해당 HUD 내 동적으로 변경되는 위젯들에 대해서 개발자가 유효성 검사를 하지 않아도 되어 유지보수성 및 코드가독성이 향상되었습니다.

MainWidget (ViewModel)

• Model에서 동적으로 변화되는 값들을 View계층으로 전달하기 위한 위젯 클래스
• 인게임 내 주요 HUD 및 동적으로 Create,Remove되는 위젯들을 관리
• 생성보다 Visibility설정을 통한 성능이 좋은 경우 : BindWidget
• 동적인 환경에서 Create,Remove하는게 성능이 좋은 경우 : TSubclassOf<UUserWidget>, Cast
• Player, Monster에서 선언한 델리게이트들에 대한 이벤트 바인딩 진행, View계층에 전달.

• Minimap
  • 현재 진입한 레벨의 이름 출력
    • GetWorld()->GetMapName()을 사용한 현재 레벨이름 가져오기.
    • TextBlock->SetText()를 사용한 현재 레벨 출력
  • 현재 진입한 레벨의 진행 시간
    • UGamePlayStatics::GetRealTimeSecond()를 사용한 진행 시간.
    • Text 형식 ("%02d / %02d") , Minutes, Seconds
  • 현재 플레이어 위치 기반의 미니맵 구현
    • DataAsset 또는 DataTable을 사용한 UTexture2D저장
    • IsA 함수 또는 설정한 EnumClass 를 활용한 클래스 타입 비교.
    • Monster, Portal, Player 각각 저장되어있는 Texture2D를 사용한 표시
• CurrentGold
  • InGame 진입 후 현재 획득한 재화에 관련된 UI
• PlayerStatus
  • 선택한 Player의 Texture 출력
  • HP,Shield 관련 UProgressBar, UTextBlock를 사용한 체력/실드 표시
    • Model계층이 되는 Player의 Current HP,Shield, Max HP,Shield DECLARE_DYNAMIC_MULTICAST_DELEGATE_TwoParams를 사용한 이벤트 바인딩
    • Tick 호출이 아닌 이벤트 호출시마다 UI변경을 통한 최적화
    • Model에서 BroadCast한 값을 바로 받아오는것이 아닌, VM역할의 MainWidget에서 이벤트 바인딩 후 전달
• Skill
  • 선택한 Playable Character 기반의 고유 스킬에 따른 Texture
  • Animation을 사용한 쿨타임 시 시각적 표현
• Weapon/PlayerDodge
  • 공용 로직 Dodge 관련 쿨타임 애니메이션을 사용한 시각적 표시
  • 투척물 관련 UI
  • 현재 사용중인 Weapon의 Texture, CurrentAmmo,MaxAmmo 관련 TextBlock
    • PlayerCharacter 내 Ammo관련 델리게이트 이벤트 바인딩을 사용한 이벤트 처리
• CrossHairs
  • 공격 입력 IA 호출시 CrossHairs RenderTranslation을 사용한 Spread
  • Projectile 적중 대상이 Monster 클래스인 경우, Animation 관련 Crosshair Visible
    • Target이 치명적인 공격을 받은 경우 Color 변경

기존에 스프링 프레임워크를 사용한 백엔드 프로젝트를 제작시 스프링 프레임워크에는 MVC패턴을 기반으로 설계되어있다. 라고 학습한 경험이 있습니다.

현재 언리얼 엔진을 사용한 게임 클라이언트 관련 프로젝트를 진행하며 디자인 패턴 및 아키텍처 설계에 대해 고민하게 되었으며, 언리얼에서도 학습했던 MVC 패턴을 적용 할 수 있을지에 대해 고민하던 중, 다시 리마인드하며 학습한 MVC,MVVM패턴에 대해 작성하겠습니다.

MVC (Model - View - Controller) 패턴

정의

소프트웨어 아키텍처 설계시 사용 할 수 있는 디자인 패턴 중 하나입니다.

어플리케이션을 모델(Model), 뷰 (View), 컨트롤러(Controller)로 분리하여 관심사를 분리하며 유지보수성 및 확장성을 높이는 구조입니다.

UI기반의 어플리케이션 계층에서 자주 사용되는 패턴 중 하나입니다.

모델 (Model)

• 어플리케이션의 데이터 및 비즈니스 로직을 관리하는 부분
• 데이터베이스와 연동되거나, 내부적으로 데이터 처리, 유효성검사와같은 작업을 수행한다.
• 독립적으로 작동하며 뷰와 컨트롤러와 직접적으로 통신하지 않는다.
• 언리얼에서의 Model : 캐릭터 Info 관련 Property, 스킬, GameState및 GameInstance를 사용한 게임 상태 관리

뷰 (View)

• 유저에게 화면을 표시하는 역할
• 모델에서 받은 데이터를 시각적으로 표현한다.
  • Model과 직접적으로 통신하는것이 아닌, Controller에 의해서 받아온다.
• 사용자의 입력을 받아 컨트롤러에 전달한다.
• UI (체력 바, 미니맵, 스코어 표시 등)

컨트롤러 (Controller)

• 사용자의 입력을 처리하며, 어플리케이션의 전체적인 흐름을 관리
• 뷰에서 전달한 사용자의 입력을 분석, 입력에 맞는 모델의 데이터를 변경, 뷰 최신화
• 키보드 입력과 같은 Input Action
• UI 버튼(뷰) 클릭 시 특정 기능 수행

MVC 패턴 장단점

• M-V-C 각각의 역할을 명확하게 구분하여 결합도가 낮다. 확장성이 높다.
• 모델은 독립적이며, 다른 View에서도 재사용이 가능하다. 재사용성이 높다.
• M-V-C 각각의 역할이 분리되어있어 코드 충돌을 방지하기 쉽다.
• 작은 프로젝트에서는 오히려 코드가 많아지고, 복잡도가 증가할 수 있다.
• M-V가 직접 연결되지 않는 설계가 필요하다.
• 모델 변경시 뷰가 자동 갱신되지 않으면 추가적인 데이터 바인딩이 필요할 수 있다.

MVVM (Model - View - ViewModel) 패턴

정의

MVVM(Model-View-ViewModel) 패턴은 MVC패턴과 같은 아키텍처 패턴 중 하나로, MVC패턴에서 확장된 패턴입니다.

Controller 대신 ViewModel이 사용되었으며, 뷰 모델이 모델에 있는 데이터 객체를 노출하는 책임을 지기때문에 객체를 관리하고, 표현하기 위해 확장되었습니다.

Model(모델)

• MVC패턴과 같은 역할을 한다.
• 데이터 처리, 로직, 유효성 검사 등
• HP,Level,Skill 등

View(뷰)

• 사용자가 화면에서 보는것들에 대한 구조, 배치, 외관 등 시각적 요소
• ViewModel과 데이터 바인딩을 통해 데이터를 표시한다.
• 체력 바, 점수, 미니맵 등

ViewModel(뷰 모델)

• Model과 View 사이의 중개 역할
• Model에서 데이터를 가져와 View가 이해할 수 있는 형태로 변환
• 데이터 바인딩을 사용한 View와 자동 동기화
• Model int32 HP -> View UTextBlock HP:100 표시 등

MVVM 패턴 장단점

• ViewModel 활용한 UI(View) ,Model간 데이터 자동 동기화
• UI와 비즈니스 로직을 분리할 수 있다.
• ViewModel이 중개자 역할을 하며 로직을 처리하므로 각각의 역할이 분리된다.
• UI를 변경해도 수정사항이 없다. 서로 관심사를 분리하여 유지보수성 및 확장성이 높다.
• 데이터 바인딩을 하는 추가작업 필요 및 바인딩으로 인한 메모리 소모가 크다.

출처 및 참고내역

https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/

https://dev.epicgames.com/community/learning/tutorials/eBqE/unreal-engine-programacion-con-mvvm-en-umg-interfaces-de-usuario 

D

GitHub

• ReadMe : https://github.com/NbcampUnreal/1st-Team1-CH3-Project
• Git / Code Convention : https://github.com/NbcampUnreal/1st-Team1-CH3-Project/wiki 

프로젝트 소개

• 프로젝트 명 : GunFire : Paragon
• 제작 기간 : [25.02.17 ~ 25.03.07]
• 프로젝트 소개
  • UE5 엔진의 주요 기능을 활용한 로그라이크 기반의 FPS 싱글플레이 슈터게임
  • 건파이어리본의 시스템을 계승받아 만든 게임
• 담당파트 : UI/UX
  • UMG / UUserWidget 기반의 C++ 클래스를 사용한 로비, 인게임, 결과창 관련 UI 제작
  • 플레이어 정보 및 AI와의 상호작용 관련 UI 제작

기술 스택 및 개발 도구

• C++ 17 (v14.38) / MSVC v143
• Unreal5.5
• VisualStudio 2022
• Git Hub, Git LFS Plugin
• Notion

5W1H

담당 파트 UI / UX 구현 로직

인게임 입장 전 메인 로비

• 버튼을 통한 관리
  • 도전 시작 - 설정된 Level 오픈
  • 게임 설정 - 게임 설정 (조작키, 사운드, 화면크기 관련 설정)
  • 게임 종료 - 플레이 게임 종료

인게임 UI/UX

• Player
  • Texture : 선택된 플레이어 캐릭터 Texture
  • HP, Shield : 현재 플레이어의 실드, 체력
  • Shift, Skill, Item CoolTime : 스킬 사용 가능 및 불가능시의 관련 애니메이션 작동
  • Current Gold : 플레이어가 인게임에서 획득한 골드. 상인과 상호작용 할 수 있다.
• Weapon
  • 사용중인 무기의 Texture
  • 현재 무기의 남은 탄약 / 장전시 최대 탄약
  • 선택한 탄약의 타입 관련 UI

• UObject
  • 플레이어의 버프, 디버프 관련 획득한 패시브 UI
  • 획득한 아이템을 우측 상단을 통해 표시
• Minimap
  • 플레이어 중심의 존재하는 적 관련 UI를 나타낸다.

• 크로스헤어
  • 무기에 따른 조준점 변경 (필수 기능 구현 후 추가 기능)
• 데미지 히트 관련 위젯
  • 플레이어가 가한 공격력에 따른 Text 출력, 피격지점을 기반으로 Animation 처리
• 레이캐스트 충돌시 관련 AI HUD
  • 공격받은 또는, 조준중인 대상에 대한 HUD 출력
  • HP, AI Name관련 HUD 출력

• UObject 기반의 패시브 오브젝트 선택 UI
• 선택한 UI를 통해 플레이어 강화
• 3중 택1, 선택한 아이템만 적용
• 패시브 오브젝트 Name, Texture, Description 출력

게임 종료 UI/UX

• 플레이한 캐릭터 Texture
• 플레이 타임
• 총 가한 데미지
• 획득한 아이템
• 사용한 총기