5-11. UI - (4) 메세지 위젯 생성

0. 개요

이전 포스트에서 위젯 컨트롤러로부터 제공된 행을 태그 / 메세지 / 메세지 위젯 / 이미지 핀으로 분리하는 것까지 실시했다.

 

1. 메세지 위젯 생성하기

(1) WBP_EffectMessge 생성

이미지, 가로 박스, 스페이서로 구성된 위젯을 생성한다.

 

이미지와 가로 박스는 변수로 설정한다.

 

 

(2) WBP_EffectMessage 이벤트 그래프

EffectMessage 위젯에 이미지와 텍스트를 할당한다.

간단하게 하기 위해 함수를 생성하고 입력 핀을 Texture2D 타입의 Image, 텍스트 타입의 Text 두 개를 추가하고 아래와 같이 배치한다.

이미지를 표현하려면 슬레이트 브러시를 만들고 해당 이미지 박스의 브러시로 설정하면 된다.

이미지 사이즈는 Vector2D 타입으로 생성하고 기본 값을 75x75로 설정한다.

 

(3) 데이터 테이블 수정

이제 메세지 위젯을 생성했으므로 데이터 테이블의 세번째 항목인 Message Widget을 해당 위젯으로 선택한다.

 

 

2. 오버레이 위젯 블루프린트

(1) 메세지 델리게이트 바인딩

이제 델리게이트에 바인딩된 이벤트가 발동하면 이펙트 메세지 위젯을 생성할 것이다.

Aura User Widget을 생성하고 WBP_EffectMessage로 캐스팅한다.

따로 정의했던 함수를 호출하고 분해했던 핀과 연결한다.

마지막으로 해당 위젯을 뷰 포트에 추가하면 된다.

 

 

 

3. 문제 해결하기

(1) 메세지가 화면에 길쭉하게 표시되는 현상 수정하기

이펙트 메세지 위젯 블루프린터의 루트를 오버레이로 래핑한다.

오버레이는 화면 전체의 영역을 추가하므로 이후에는 박스가 올바르게 표시될 것이다.

 

 

(2) 메세지를 올바른 위치에 표시하기

뷰포트의 중앙에 메세지를 띄우기 위해 뷰포트의 크기를 구하고 1/2를 곱한다.

해당 값을 이용해서 Set Position in Viewport에 매개 변수로 전달한다.