22-3. 스펠 메뉴 UI - (3) 스펠 메뉴 위젯, 스펠 설명 박스

1. 스펠 메뉴 위젯 블루프린트

속성 메뉴를 복제하고 수정하여 사용한다.

 

 

(1) 가로 박스, 랩 박스 추가

스킬 트리와 스킬 설명을 배치하기 위해 가로 박스를 하나 추가한다.

각 부분에 대한 랩 박스를 추가한다.

 

 

(2) 요소 배치 및 크기 조절

스킬 설명 스크롤 박스가 적당한 크기로 배치될 수 있도록 요소들의 가로 크기와 패딩을 수정한다.

 

 

(3) 스펠 포인트 가로 박스

가로 박스를 배치하고 텍스트, 스페이서, WBP_FramedValue, WBP_WideButton를 박스 안에 배치한다.

이 박스는 Active Abilities 텍스트 위에 배치한다.

Wide Button을 클릭해 Properties를 검색하면 크기와 텍스트를 변경할 수 있다.

 

 

 

2. 스펠 설명 박스

(1) 스페이서, 텍스트, 크기 박스, 버튼 추가

 

 

(2) 설명 랩 박스 내의 요소 크기 조절

 

 

(3) 닫기 버튼 정렬하기

스페이서를 하나 더 추가하고, 닫기 버튼의 새 줄 강제를 해제한 후 스페이서의 너비를 늘려주면 위와 같이 버튼을 오른쪽에 붙일 수 있다.

 

 

(4) 크기 박스에 오버레이 추가

설명 란에 테두리와 설명 텍스트를 추가하기 위해 오버레이를 배치한다.

 

(4-1) 오버레이에 이미지 추가

이미지의 그리기 방식을 Border로 설정하고 여백을 조정하여 테두리를 그리게 한다.

배경 이미지의 색을 조절하여 추가한다.

 

(4-2) 오버레이에 스크롤 박스 추가

설명이 들어갈 스크롤 박스를 추가한다.