22-4. 스펠 메뉴 UI - (4) 메뉴 앵커를 활용한 팝업 메뉴

0. 개요

오버레이에서 스펠 메뉴를 키는 버튼을 추가한다.

메뉴 앵커를 사용하여 팝업 메뉴를 표시한다.

 

1. 메뉴 앵커(Menu Anchor)

(1) WBP_WideButton을 이용한 스펠 메뉴 버튼

WBP_Overlay에 WBP_WideButton을 추가하고 이름을 변경한뒤 적절히 배치한다.

 

 

(2) 메뉴 앵커 배치

메뉴 앵커를 생성하여 배치한다.

 

 

(2-1) 메뉴 앵커 디테일 설정

위치를 적당히 조정하고 크기는 WBP_SpellMenu의 크기를 할당한다.

 

- 메뉴 클래스 : 앵커에 연결할 메뉴 클래스를 선택한다.

- 배치 : 앵커의 어디에 메뉴를 배치할지 선택한다.

- 창에 맞추기 : 메뉴의 위치를 창과 일치하게 한다.

(창에 맞추기 옵션을 사용하려면 앵커의 크기를 메뉴의 크기와 비슷하게 지정해야 한다.)

- 애플리케이션 메뉴 스택 사용 : 옵션을 끄면 메뉴의 수명을 직접 관리할 수 있다.

 

위와 같이 설정했다면 메뉴가 메뉴 앵커의 위치에 나타날 것이다.

 

 

(3) WBP_Overlay 클릭에 이벤트 바인딩

위의 메뉴 앵커를 변수로 설정한다.

Overlay의 변수로 설정한 메뉴 앵커를 가져와 Toggle Open 함수를 가져온다.

- Focus on Open : 불리언이 True이면 메뉴 바깥을 클릭하여 창을 제거할 수 있음

 

테스트를 실행하면 스펠 메뉴 버튼을 눌러 창을 키고, 다시 스펠 메뉴 버튼을 누르면 창을 끌 수 있다.

 

 

2. X 버튼을 눌러 창 종료하기

Toggle Open 함수에 의해 메뉴가 생성된다.

이제 생성된 메뉴의 참조를 가져와 파괴할 수 있게 한다.

 

(1) 메뉴 앵커에 이벤트 함수 설정

메뉴 앵커의 디테일 설정

메뉴 앵커를 디자이너 탭에서 클릭하고 디테일 창을 하단으로 내리면 이벤트를 지정할 수 있다.

메뉴 앵커는 사용제 메뉴 콘텐츠 구하기 이벤트에서 메뉴를 생성하는데, 해당 이벤트 함수를 조작하여 메뉴를 더 커스텀하여 생성할 수 있게 된다.

 

 

(1-1) WBP_SpellMenu에서 새로운 변수 생성

SpellMenuAnchor의 이름을 가진 메뉴 앵커 오브젝트 레퍼런스 멤버 변수를 생성한다.

눈 아이콘을 눌러 자식의 블루프린트에 노출시킨다.

 

 

(1-2) WBP_Overlay에서 SpellMenuAnchor 변수에 오버레이의 메뉴 앵커 할당

이제 함수 내에서 위젯을 생성한 이후에, 수명을 직접 관리하기 위해 메뉴를 멤버 변수로 저장한다.

메뉴의 변수인 SpellMenuAnchor에 Overlay의 변수인 MenuAnchor_SpellMenu를 연결한다.

이는 WBP_SpellMenu 내에서 버튼을 이용해 닫기를 수행하기 위함이다.

---

 

SpellMenu 변수를 끌어서 검색

---

(2) WBP_SpellMenu 이벤트 그래프 - 닫기 함수

이제 버튼을 눌러 메뉴가 생성되면 Spell Menu 내의 메뉴 앵커 변수에 작동된 메뉴 앵커와 연결된다.

해당 변수를 사용하여 닫기 함수를 호출할 수 있다.

메뉴 앵커의 Close 함수를 사용하여 생성된 메뉴를 파괴(Destroy)한다.

키보드 액션을 이용하여 키를 할당할 수 있다.