UI 계층 구조(has-a)
저는 HUD, Window, Layer, Slot이라는 세 가지 주요 개념을 중심으로 UI의 계층 구조를 설계하였습니다.
- HUD는 여러 UI 레이어를 포함하며, 그 안에서 Window,Layer, Slot이 계층적으로 동작한다.
=>이를 통해 게임 내 다양한 상황에 맞는 UI 구조를 쉽게 관리할 수 있도록 하였음
언리얼에서 계층 구조 활용
위의 구조를 언리얼의 Widget, HUD를 활용 구현하였습니다. 아래는 이를 바탕으로 한 클래스 구조입니다.
클래스 구조
- UXZWindowBase는 여러 UXZLayer를 관리하며,각 Layer는 각각의 UXZSlot을 포함한다.
- 이를 통해, UI를 계층적으로 분리하고 관리하도록 하였다.
클래스 설명
UXZUserWidget
- 모든 UI 위젯의 기본 클래스.
UXZWindow
- 여러
UXZLayer을 포함하고 있는 상위 레이어 - 커스터마이징 페이지, 인벤토리, 상점 등 다양한 UI 기능을 그룹화하여 관리한다.
open,close함수로 해당 레이어를 활성화하거나 비활성화 가능
UXZLayer
- 여러
UXZSlot을 포함하고 있는 상위 레이어
UXZSlot
- 레이어 내 개별 항목을 나타냄
- 예를 들어, 커스터마이징 페이지에서는 머리, 손, 벨트, 바지, 신발 등 각 항목이 Slot으로 관리 - 각 Slot은 사용자가 선택할 수 있는 항목을 시각적으로 표시하며, 선택된 항목에 대해 UI를 업데이트하거나 게임 내 동작을 처리함.
클래스 간 상호작용
HUD는 여러 Layer를 열고 닫으며, 상황에 맞는 UI 레이아웃을 구성합니다.
Layer는 각 Slot을 관리하며, 사용자가 Slot을 선택하거나 변경할 때 이를 HUD나 다른 시스템에 알립니다.
선택된 Slot은 Delegate를 통해 게임 시스템과 상호작용하며, 이벤트기반으로 게임 적용이 이루어집니다.
Hello World