19-1. 오버레이 UI - (1) 체력/마나/스펠 UI, 스펠 슬롯

0. 개요

체력 글로브, 스펠 슬롯, 마나 글로브로 구성된 UI를 구성한다.

 

 

1. 체력 마나 스펠(HealthManaSpells) 블루프린트 위젯 생성

 

뷰 포트의 Fill Screen 버튼을 눌러 Custom으로 지정하고 너비와 높이를 적당히 지정한다.

가로 박스와 세로 박스를 적절히 추가하여 공간을 만든다.

디테일 창의 '채우기'와 크기 숫자를 조절하여 요소 안에 요소를 배치할 때 일정 공간을 차지하도록 할 수 있다.

 

박스를 박스 안에 배치하며 채우기 옵션과 수치를 조정해 아래와 같이 만든다.

맨 왼쪽에는 기존에 생성했던 WBP_HealthGlobe, 맨 오른쪽에는 기존에 생성했던 WBP_ManaGlobe를 채우기하여 넣는다.

 

 

2. 스펠 글로브(Spell Globe)

이제 추후에 여러 게임플레이 어빌리티를 할당하여 스킬로 사용할 수 있는 UI를 만들 것이다.

 

(1) 스펠 글로브 박스

박스의 높이와 너비를 지정할 수 있도록 변수로 만든다.

 

 

 

(2) 글로브의 링 이미지 씌우기

링 이미지를 가져와 브러시에 설정하고 링 이미지에 해당 브러시를 설정한다.

이런 작업은 추후에 해당 이미지를 변경하려고 할 때 유용하다.

 

(3) 글로브의 유리 이미지 패딩 설정

 

위젯 사이즈가 변경될때 유리의 패딩도 변경되어야 하므로 패딩 값을 변수로 설정할 것이다.

 

(4) 글로브의 배경(이글거리는 배경) 패딩 설정

 

(5) 글로브의 스펠 아이콘 설정

글로브에 대해 패딩을 설정한다.

 

이어서 스펠마다 다른 아이콘을 사용할 예정이므로 아이콘에 대하여 브러시를 설정한다.

 

 

(6) 글로브의 쿨타임 텍스트

추후에 위젯 컨트롤러로부터 데이터를 받아 쿨타임을 설정할 것이다.

 

 

(7) 쿨타임일 때 배경색 어둡게 조절하기

외부로부터 틴트 값을 받아 배경 이미지의 틴트를 조절하는 함수를 생성한다.

 

틴트 값에 따라서 아래와 같이 이미지가 어두워진다.