다양한 기능을 간편하게 실행할 수 있는 컨텍스트 메뉴
주로 아이템을 선택했을 때, 장착 / 장착 해제 / 사용 / 분해 등의 리스트를 나열하여
그 중 하나를 선택해 바로 기능을 실행할 수 있게 한다
이번 글에선 컨텍스트 메뉴 구현 방법을 정리한다
본 컨텍스트 메뉴는 보관함에서 사용하여 아이템과 밀접한 관계가 있다
해서 다양한 기능들이 복합적으로 연결되어 있는데 이를 모두 설명하기엔 분량이 많아지므로 모두 생략
대충 흐름만 파악할 수 있을 정도로 서술한다
첫 번째, 데이터 준비
용이한 관리를 위해 2종의 Enum을 준비한다
- E_ContextMenu : 컨텍스트 메뉴 타입으로 컨텍스트 아이템 구성을 위한 기준값
- E_ContextItem : 컨텍스트 아이템 종류 정의
현재 선택 중인 슬롯에 담긴 아이템 정보를 파악하기 위해 데이터 에셋을 준비한다
- 변수 타입은 ST_Item 구조체로 아이템 테이블용으로 직접 제작한 구조체
- 슬롯을 선택하여 컨텍스트 메뉴를 호출하는 시점에 해당 슬롯에 담긴 아이템 정보를 저장한다
- 컨텍스트 메뉴에선 이 정보를 토대로 어떤 형태로 구성할지 판단한다
- 데이터 에셋 관련 사항은 「 데이터 에셋 」 내용 참고
두 번째, UI 구성
두 개의 위젯 BP가 필요하다
- UI_ContextMenu
- UI_ContextItem
너무 간단하기에 글로만 나열하면 아래와 같다
- UI_ContextMenu
└ 캔버스 패널
└ 보더 : 컨텍스트 메뉴의 배경
└ 세로 박스 : 컨텍스트 아이템을 담을 그릇
- UI_ContextItem
└ 캔버스 패널
└ 크기 박스 : 컨텍스트 아이템 크기 설정
└ 버튼 : 컨텍스트 아이템 조작
└ 텍스트 : 컨텍스트 아이템의 기능 이름 표시
세 번째, 컨텍스트 아이템 변수 추가
1. 부모 파악용 변수 추가
UI_ContextItem에서 취소 버튼을 눌렀을 때, 컨텍스트 메뉴가 닫히도록 해야 하는데
본 컨텍스트 아이템이 종속된 컨텍스트 메뉴가 누군지를 알아야 하는 상태
해서 UI_ContextMenu 타입으로 변수 추가하고
컨텍스트 아이템이 만들어질 때, 이 변수에 부모 정보를 넣어준다
2. 타입 파악용 변수 추가
해당 컨텍스트 아이템이 어떤 타입인지 알 수 없는 상태
해서 컨텍스트 아이템이 만들어질 때, 변수에 타입을 넣어 해당 컨텍스트 아이템이 어떤 타입인지 알 수 있게 한다
네 번째, 컨텍스트 메뉴
1. 필요한 변수 추가
- ParentUI : 컨텍스트 메뉴의 부모 데이터 (본 글에선 사용할 일 없어 추가 안 해도 무관)
- SlotData : 슬롯에 담긴 아이템 데이터
- TargetSlot : 컨텍스트 아이템들을 담기 위한 배열
2. 컨텍스트 메뉴 구성 함수
무기 / 소모성 아이템 / 기타 아이템 등 아이템 타입에 따라 제공하는 기능이 다를 것
이에 따라 아이템 타입별 컨텍스트 아이템들로 배열을 구성한다
※ 이 부분도 테이블로 할 수 있으나 종류 수가 그리 많지 않아 그래프로 작성했다
3. 컨텍스트 아이템 생성 함수
컨텍스트 아이템 배열에 따라 컨텍스트 아이템을 생성하고 컨텍스트 메뉴에 추가한다
String 테이블로부터 읽어온 텍스트를 컨텍스트 아이템의 텍스트에 표시한다
컨텍스트 아이템의 부모 정보와 타입 정보를 저장한다
4. 컨텍스트 메뉴 최종 구성
컨텍스트 메뉴가 생성된 시점에 위에서 추가한 두 개의 함수를 활용해 컨텍스트 메뉴를 구성한다
다섯 번째, 컨텍스트 아이템
버튼을 클릭했을 때, 컨텍스트 아이템 타입에 따른 기능을 실행하도록 한다
여섯 번째, 컨텍스트 메뉴 호출
보관함 UI에서 슬롯 클릭 시, 컨텍스트 메뉴를 호출하게 한다
- 클릭 이벤트는 슬롯에서 받는다
- 클릭 이벤트를 받으면 보관함 UI에서 컨텍스트 메뉴 호출 함수를 실행한다
> 컨텍스트 메뉴 호출 함수가 실행되면 기존에 호출된 컨텍스트 메뉴가 있는지 확인 후 제거한다
> 컨텍스트 메뉴 제거 기능은 다양한 곳에서 사용되기에 아래와 같이 함수로 만들었다
일곱 번째, 컨텍스트 메뉴 제거
슬롯 외 다른 부분 클릭 시, 컨텍스트 메뉴 제거
마지막, 테스트 진행
- 빈 슬롯일 경우, 무시
- 아이템 있는 슬롯일 경우, 컨텍스트 메뉴 호출
- 컨텍스트 메뉴 버튼 클릭 시, 컨텍스트 메뉴 제거
- 다른 슬롯 클릭 시, 컨텍스트 메뉴 제거
- 슬롯 외 다른 공간 클릭 시, 컨텍스트 메뉴 제거