캐릭터 커스터마이징 기능
캐릭터 커스터마이징 기능은
UXZHUD,UXZLayer,UXZSlot클래스들이 서로 상호작용하면서 캐릭터의 외형을 동적으로 변경할 수 있는 시스템입니다. UI 계층 구조를 활용하여 머리, 손, 신발 등 다양한 모듈을 커스터마이징할 수 있습니다.
UI 설계
설계한 내용에 따라, Window, Layer 기능에 대한 기본 구조를 바탕으로 커스터마이징 기능을 구현하였습니다.
- HUD, Layer, Slot이라는 세 가지 주요 개념을 기반으로 UI가 구성된다.
- HUD는 전체 UI 레이아웃을 통제한다.
- Layer는 각종 Slot을 포함하며, 여러 Layer가 UI를 구체적으로 구성한다.
- Slot은 각 항목(머리, 손, 신발 등)의 모듈을 나타내며, 사용자의 선택에 따라 실시간으로 업데이트된다.
클래스 구조
초기에는 Slot을 하드코딩으로 생성하여 TMap으로 관리하려고 했지만,
ListView를 활용하여 Slot 객체를 동적으로 생성하고 업데이트 하는 방향으로 변경하였습니다 !
클래스 설명
UXZModuleCustomizingLayer
- 커스터마이징 UI의 레이어를 관리하는 핵심 클래스.
- 여러 Slot을 ListView를 통해 표시하고 관리함
UXZModuleSelectSlot
- 모듈 선택 시 UI에서 이미지와 텍스트로 업데이트하며,
Delegate기능으로 캐릭터의 애셋에 반영함
UXZModuleSelectSlotItem
ListView의 데이터를 관리하고 초기화할 때 필요한 데이터를 제공하는 클래스.
FXZModuleSelectInfo
- Slot에 필요한 데이터를 저장하는 구조체.
구현
ListView 활용
Module 슬롯이 늘어날 때, 유연하게 대응하기 위하여 ListView 객체를 사용하였습니다. ListView를 사용하면 슬롯을 동적으로 생성하고 관리할 수 있으며, 모듈에 대한 정보를 코드 상에서 모두 알 필요 없이 사용 가능합니다!
- ListView 객체를 사용하여 Slot을 동적으로 생성하고 데이터를 반영하는 과정을 구현하였다.
- SlotListView에 데이터를 설정하고, 각 슬롯의 데이터를 관리한다.
NativeOnListItemObjectSet함수를 통해 ListView 항목을 초기화한다.- 초기화를 위해 ListView 항목에 필요한 클래스 객체를 전달해야 한다.
Material 사용
- 이미지 텍스처를 Material로 관리하여 최적화를 구현
- Sprite 대신 Material을 사용하여 하나의 Texture에서 여러 이미지를 관리하고, 데이터 테이블에서 인덱스를 불러와 필요한 이미지를 선택하는 방식으로 성능을 개선
Delegate 사용
- Delegate를 사용하여 UI와 게임 로직 간의 상호작용을 처리함.
- 모듈 아이템을 선택하면, 모듈 타입과 선택된 아이템ID가 Delegate 인자로 ModualrComponent에 전달되어 캐릭터 애셋에 즉시 반영된다.
계층적 구조를 가진 클래스 간 종속성 제거
- SlotItem이 SlotInfo를 통해 Layer에 종속되는 구조의 문제 상황이 발생함
이렇게 된다면
Slot이 상위 개념인 Layer에 의존하여 결합도가 증가하여 재사용성하기 어렵고 순환 참조의 가능성이 발생하여 UI 구조가 복잡해질 가능성이 있었음 - 따라서 SlotItem에서 SlotInfo 구조체를 직접 참조하지 않도록 설계를 변경하여 문제를 해결함.
- 그 결과 Slot과 Layer는 상호 참조 없이 독립적으로 관리되고 Slot은 다른 시스템에서도 재사용 가능해짐
결과
Hello World