[Unreal Engine 5] 툴팁 UI 표시

아이템에 마우스를 호버링하면 보여질 툴팁을 만든다.

과정은 다음과 같다.

 

1. 에디터에서 위젯 블루프린트로 UI를 디자인한다.

2. C++ 클래스를 만들어 위젯을 바인딩한다.

3. 아이템 슬롯 클래스에서 툴팁 위젯을 프로퍼티로 가진다.

4. 플레이어가 마우스로 아이템 슬롯을 호버링하면, 툴팁 위젯을 생성한다.

 

툴팁 UI를 출력하는 과정에서 정말 많은 것을 배웠는데, 여기서 핵심은 디테일 패널에 '비저빌리티(Visibility)'를 어떻게 설정해주느냐가 중요하다.

비저빌리티 체크에 따라 위젯이 마우스와 충돌을 인식하여 호버링 처리가 되느냐가 결정된다.

 

 

먼저 에디터에서 툴팁 위젯을 디자인한다.

 

 

다음으로 에디터에서 디자인한 위젯과 바인딩할 수 있도록 meta = (BindWidget) 을 지정하고 이것을 외부에서 함수로 데이터를 받아 처리할 수 있도록 SetupTooltip 함수를 만든다.

 

 

cpp로 가서, 각 툴팁에 해당되는 위젯마다 설정을 해준다. 

 

 

ItemData는 이렇게 지정해서 사용하고 있다.

 

 

 

다음으로 툴팁 위젯을 출력할 아이템 슬롯 위젯으로 가서 에디터에서 생성한 WBP를 알 수 있도록 TSubclassOf를 프로퍼티로 가진다.

 

 

함수는 4개를 사용한다.

1). 마우스 커서가 해당 아이템 슬롯 위로 호버링할 때 호출될 함수 Hover Tooltip

2). 마우스 커서가 해당 아이템 슬롯을 벗어날 때 호출될 함수 Unhover Tooltip

3). 위젯에 마우스가 들어왔을 때 호출될 함수 오버라이드 Native On Mouse Enter

4). 위젯이 마우스를 벗어났을 때 호출되는 함수 오버라이드 Native On Mouse Leave

 

버튼을 만들어서 OnHover 델리게이트도 써보고, 다른 네이티브 함수들도 써보고 했지만 해당 방법이 가장 문제없이 작동하는 것 같다.

 

 

먼저 마우스 커서가 호버링 됐을 때 호출할 함수를 정의한다.

1). 아이템 슬롯에 아이템 정보가 존재하면, 해당 슬롯은 아이템 툴팁을 보여줄 수 있다.

2). 툴팁 위젯을 생성하고, 위젯에 필요한 데이터를 넘겨준다.

3). AddToViewport로 뷰포트에 위젯을 생성하고

4). SetPositionInViewport로 툴팁 위젯의 위치를 마우스 커서 근처로 옮긴다.

 

마우스 위치를 가져오기 위해서 UWidgetLayoutLibrary를 사용했고, 해당 라이브러리를 사용하기 위해서는 "SlateCore" 모듈이 필요하다.

 

 

 

다음으로 마우스 커서가 슬롯 위치를 벗어나면 툴팁 위젯을 제거해준다.

 

 

이걸 호출하는 건 네이티브 함수에 맡긴다.

 

이런 함수들은 에디터에서 WBP로 가서 오버라이드 함수를 찾아봤다.

 

그리고 해당 함수 찾아서 검색해서 가져왔다. C++로 오면 다 Native가 붙는다.

 

 

여기까지하면 호버링 준비는 다 끝났는데, 정상적으로 동작하지 않는다면 체크할 몇가지 사항들이 있다.

 

 

먼저, 에디터 기본 설정들

 

1). 툴팁 위젯을 UUserWidget에서 사용자 정의 C++ 클래스를 상속하도록 변경했는가?

 

 

 

2). 아이템 슬롯 위젯에서 TSubclassOf로 WBP 툴팁 위젯을 지정했는가?

 

 

 

3). 비저빌리티 옵션을 잘 설정했는가?

3-1). 툴팁 위젯 : Non Hit Testable, 마우스 커서와 충돌 체크 안한다.  

 

 

3-2). 아이템 슬롯 : Visibility, 마우스 커서와 충돌 체크 한다. 그래야 네이티브 함수가 호출되고, 툴팁이 생성된다.

 

 

3-3). 인벤토리 : Non Hit Testable, 마우스 커서와 충돌 체크 안한다. 인벤토리 위젯이 슬롯 위젯이 검사할 충돌 체크를 덮어버리면 안되니까.

 

 

다음으로 체크할 사항이 있는데, meta = BindWidget으로 바인딩한 위젯은 기본적으로 네이티브 클래스로 생성이 되기 때문에 WBP에서 지정한 TSubclassOf 프로퍼티를 인식하지 못하고 nullptr을 반환하는 문제가 있었다.

 

이 문제를 해결하는 가장 쉬운 방법은 바인딩 위젯을 하지 않고, TSubclassOf로 WBP를 받아서 C++ 코드로 CreateWidget을 하고 AddToViewport를 직접 해주는 방식이다.

 

그러니까 결국 툴팁 WBP 위젯이 nullptr이 아닐려면, 아이템 슬롯이 BindWidget이면 안되고, 아이템 슬롯을 WBP로 받으려니까 인벤토리도 바인드 위젯이면 안된다.

 

이게 무슨 말이냐면 인벤토리 클래스는 아이템 슬롯 위젯을 TSubclassOf 프로퍼티로 받아줘야 하고

 

cpp에서 직접 CreateWidget을 통해 생성해줘야 한다. 그래서 툴팁 WBP가 nullptr이 아니다.

 

 

문제는, 인벤토리도 결국 TSubclassOf<아이템슬롯>을 프로퍼티를 에디터에서 설정을 해주기 때문에, 인벤토리 또한 누군가가 TSubclassOf<인벤토리>로 프로퍼티를 받아줘야 한다.

 

 

SetPositionInViewport 안쓰면 인벤토리 켜지면 화면 전체 덮어버리니 주의.

 

 

결과

 

 

슬롯 툴팁 메시지는 비저빌리티에 따른 동작을 테스트하기 위해 남겨둔거라 툴팁 텍스트에서 그냥 제거하면 해결된다.