메뉴 앵커(Menu Anchor) 는 UI 레이아웃에 추가할 수 있는 위젯입니다. 메뉴 앵커 를 사용하면 화면 상에서 팝업 메뉴의 위치를 조정할 수 있습니다.
이 페이지는 UI 레이아웃에서 메뉴 앵커 위젯을 사용하고 조정하는 방법에 대한 기본 정보를 제공합니다. 또한 언리얼 모션 그래픽 UI 디자이너(UMG) 를 사용하면 메뉴 앵커 위젯을 사용하고 조정하는 예제에 익숙해질 수 있습니다.
메뉴 앵커 프로퍼티
디테일 패널 옵션
배치된 메뉴 앵커 위젯의 디테일 패널에는 위젯 관련해서 설정할 수 있는 전용 옵션이 몇 가지 있습니다:
| 옵션 | 설명 |
|---|---|
| Menu Class | 메뉴 클래스 - 메뉴 호출시 스폰시킬 위젯 블루프린트 (팝업) 입니다. 매번 새롭게 위젯을 생성합니다. |
| Placement | 배치 - 생성된 위젯의 위치 결정에 사용되는 여러가지 배치 옵션입니다. |
| Fit in Window | 창에 맞추기 - true로 설정되면 메뉴 앵커에서 창 내에 메뉴에 맞추려는 시도를 합니다. |
| Should Defer Painting After Window | 창 콘텐츠 후 페인팅 연기 필요 - 창 콘텐츠 후 그리기를 지연할 수 있는 기능을 설정합니다. |
| Use Aplication Menu Stack | 애플리케이션 메뉴 스택 사용 - false로 설정되면 메뉴의 수명을 제어할 수 있습니다. |
| OnGetMenuContent | 메뉴 콘텐츠를 가져올 때 호출되는 OnGetMenuContent 이벤트에 함수나 프로퍼티를 바인딩하는 식으로 팝업의 커스터마이징이 가능합니다(아래 참고). |
| OnGetUserMenuContent | 메뉴 콘텐츠가 요청될 때 호출되는 OnGetUserMenuContent 이벤트에 함수나 프로퍼티를 바인딩하는 식으로 팝업의 커스터마이징이 가능합니다. |
| OnMenuOpenChanged | 메뉴 열림 변경시 - 메뉴의 열림 상태가 변경되면 호출되는 OnMenuOpenChanged 이벤트에 함수나 프로퍼티를 바인딩시켜 맞춤형 팝업이 가능합니다. |
OnGetMenuContent 및 OnGetUserMenuContent 이벤트에 대해, 디테일 패널에서 함수를 직접 만들어 바인딩할 수 있는데, 메뉴 앵커 호출시마다 바로 그 함수가 호출됩니다. 이를 통해 팝업 메뉴 생성시 부가 기능을 추가할 수 있습니다. 예를 들어 아래에서 플레이어가 "전투 중"인지 알아보는 검사를 실행하고, 전투중이 아니면 팝업 메뉴를 열 수 있도록 합니다. 전투중이면 팝업 메뉴를 열 수 없도록 합니다.
블루프린트 함수
메뉴 앵커 위젯에는 스크립트를 통해 호출 가능한 위젯 전용 함수가 몇 가지 있는데, 다음과 같습니다.
| 옵션 | 설명 |
|---|---|
| Close | 닫기 - 메뉴가 현재 열린 경우 닫습니다. |
| Fit in Window | 창에서 앵커 메뉴의 피팅을 설정합니다. |
| Get Menu Position | 메뉴 위치 구하기 - 메뉴의 월드 스페이스 위치를 반환합니다. |
| Has Open Sub Menus | 열린 서브 메뉴 있는지 - 메뉴에 열린 서브 메뉴가 있는지 없는지를 반환합니다. |
| Is Open | 열렸는지 - 타깃 메뉴 앵커가 현재 열렸는지 검사하여 부울을 반환합니다. |
| Open | 열기 - 메뉴가 현재 닫힌 경우 엽니다. |
| Set Placement | 생성된 위젯의 위치를 결정하는 데 사용되는 배치 옵션을 설정합니다. |
| Should Open Due to Click | 메뉴를 클릭하여 열 수 있는지 여부를 반환합니다. |
| Toggle Open | 열림 토글 - 열기/닫기 대신 메뉴가 열렸으면 닫고 닫혔으면 엽니다. |
사용 예제
아래 그림에서처럼 플레이어가 아이템을 클릭하면 인벤토리 메뉴를 만들어 팝업이 나타나도록 하고 싶다 해 봅시다.
먼저 해야 할 작업은, 팝업 메뉴가 어때 보이는지 만드는 것입니다.
위에서는 세로 상자 안에 버튼 세 개 들어간 단순한 위젯 블루프린트, MenuPopUp 을 만들었습니다.
다음, 인벤토리 메뉴에 쓸 위젯 블루프린트를 하나 더 만들어야 합니다. 아래에서 HUD 라고 해 줬습니다.
인벤토리 메뉴를 만든 다음에는, (프리미티브 아래 있는) Menu Anchor 위젯도 추가해 줘야 합니다.
그런 다음 나타났으면 하는 곳으로 Menu Anchor 위치를 잡습니다. 저희는 위치를 잡은 다음 우측 중앙으로 앵커 설정을 했습니다.
Menu Anchor 에 대한 디테일 패널에서, Menu Class (또는 스폰시킬 위젯 블루프린트) 및 그 배치 옵션을 설정해 줍니다.
그래프 탭에서 각 버튼에 대해 OnClick 이벤트를 추가하고, Menu Anchor 위젯에 끌어 넣습니다.
Menu Anchor 에서 끌어 놓은 다음, Open 함수를 호출하여 지정된 Menu Class 를 열고 표시하면 됩니다.
Open 노드에서 Focus Menu 옵션을 체크하여 메뉴 앵커 위젯에 포커스를 적용합니다. 이 경우 메뉴 앵커 위젯은 자동으로 포커스가 메뉴에서 벗어날 때 (즉, 다른 곳을 클릭할 때) 자동으로 닫힙니다. 이는 사용자가 화면의 다른 영역과 상호 작용할 때 메뉴를 닫게 만드는 방법 중 하나입니다.
인벤토리 메뉴를 생성한 이후, 그 메뉴를 게임내에서 어떻게는 호출해 줘야 합니다.
그 방법은 (저희의 경우) 레벨 블루프린트 에서 (MyCharacter 블루프린트를 사용하도록 설정된) Default Pawn Class 를 통해 가능합니다.
위의 MyCharacter 블루프린트에서, 게임이 시작되면 HUD 위젯을 만든 다음 HUDWidget 이라는 변수에 저장하여 나중에 접근할 수 있도록 합니다. 그런 다음 I 키에 Add to Viewport / Remove from Parent 토글 설정을 하여 인벤토리 메뉴를 추가 또는 제거하도록 했습니다. 또 Show Mouse Cursor 를 설정하여 인벤토리 메뉴가 열렸는지 아닌지에 따라 커서를 켜고 끄도록 했습니다.
마지막으로 MenuPopUp 블루프린트 (여러분의 팝업 메뉴) 안에서, 플레이어가 팝업 메뉴의 버튼을 누르면 Menu Anchor 를 닫는 Close 스크립트를 추가했습니다. 아래에서 팝업 생성시, MyCharacter 로 Casting 한 다음 MyCharacterReference 라는 변수로 승격시켜 MyCharacter 블루프린트로의 레퍼런스를 구합니다. 이 레퍼런스로 HUD 에 접근할 수 있습니다.
팝업의 각 버튼을 누르면 (화면 출력 말고) 무언가를 하도록 약간의 함수성을 추가해 주고 싶을 것입니다. 예를 들어 첫 버튼은 인벤토리의 아이템을 "사용하고", 두 번째는 "버리고", 세 번째는 "취소" 및 플레이어를 인벤토리 메뉴로 돌려보냅니다.
이는 한 예제일 뿐, Menu Anchor 를 여는 방식을 바꿀 수도 있습니다. 버튼 눌림 대신 IsHovered 함수를 사용하여 오브젝트에 마우스 커서를 올렸는지 확인하고, 그렇다면 Menu Anchor 를 열어 팝업창에 툴팁이나 다른 형태의 알림을 표시하도록 할 수도 있습니다. 어느 경우든, 스크립트를 통해 Menu Anchor 를 사용하여 팝업 위젯을 표시/제거하는 방법의 운을 떼 보기에는 충분할 것입니다.