Gameplay Ability System - Top Down RPG / Section 5-3

Globe Progress Bar

기본적인 UI로 플레이어의 체력과 마나를 지구본 형태의 진행률 UI로 표현해줄 것이다.

대표적인 기능들이 담긴 부모 위젯을 만들고, 이후 상속해서 사용할 것이다.

이를 위해 가장 만저 Widget Bluprint를 생성한다.

 

이제 전체 크기를 담당하는 SizeBox를 생성한다.

박스의 가로 세로 값은 따로 상속가능한 변수로 생성할 것이다.

그리고 UI는 정해진 크기를 사용할 것이므로 Fill Screen 옵션을 desired로 변경한다.

 

해당 Size Box를 기준으로 다른 값들도 붙여나갈 것이기에, 이름도 Root로 변경해주자.

 

이제 가로 세로 값에 대한 변수를 다룰 것이다.

이때 SizeBox 자체에 대한 접근이 필요하기에, 해당 값을 변수로 만들어줄 필요가 있다.

 

이제 Event Graph 창으로 전환해주자.

변수 값은 우선 250으로 설정한다.

그리고 해당 값들은 Globe 속성에 해당하기에, 따로 카테고리를 만들어 관리해줄 것이다.

 

이제 변수들을 할당해주자.

 

만들어준 내용들은 접어서 하나의 함수로 만들면 이후 관리에 용이하다.

 

이제 여러 UI 요소들을 겹쳐서 표현할 것이기 때문에, 이를 위한 Overay 창이 필요하다.

그리고 가장 먼저 배경용 이미지를 할당할 것이다.

 

배경용 이미지는 SizeBox를 꽉 채워야 하기에 Fill 정렬 값을 가로 세로 모두 최대로 할당해준다.

그리고 마찬가지로 변수로 만들어주자.

 

Graph로 넘어가서 이미지를 할당하기 위한 Slate Brush 변수도 생성해준다.

 

BackgroundBrush 변수에서 이미지를 선택하고, 이를 할당해주자.

 

그리고 마찬가지로 함수로 접어서 관리해주자.

 

컴파일하고 돌아가서 확인해보면 다음과 같다.

 

이제 핵심 UI인 ProgressBar를 생성해주자.

Overlay에 이어서 붙이고, Fill 정렬을 최대로 해준다.

그리고 뒤 배경은 아무것도 보이지 않아야 하기에 Tint 값에서 Alph 값을 0으로 만들고, Fill Color는 흰색으로 설정한다.

이후에 Image에 사용할 Globe를 할당한다.

 

체력이나 마나바의 경우 위에서 아래로 감소하는 형태이기에 이에 맞게 Type을 바꿔준다.

 

이또한 Graph로 가서 변수로 다룰 수 있도록 해주자.

이미지 할당을 위해서 Style을 할당해주면 된다.

 

먼저 뒷 배경의 Alpha 값을 0으로 만들어주자.

배경 이미지의 SlateBrush 값에서 나머지는 냅두고, Tint 값의 Color 값만 수정해주면 된다.

 

그리고 할당할 이미지에 대한 변수를 만들어서 세팅해준다.

 

마찬가지로 모두 묶어 함수로 관리한다.

 

이제 패딩 값을 설정해줄 것이다.

현 상태는 Globe가 겉 테두리인 Ring 까지 모두 덮는 형태이기에, 이를 조절해줄 필요가 있다.

패딩 값은 Slot이 가지고 있기에, Sloat as Overlay Slot 캐스팅을 통해 Globe에서 값을 가져와 패딩을 수정해줄 것이다.

그리고 지금은 단일 값으로 패딩을 모두 할당할 것이기 때문에, 10으로 설정하고 모두 연결해주었다.

 

이것도 마찬가지로 함수로 접어주자.

 

이 상태로 컴파일해보면 다음과 같다.

 

마지막으로 해당 Globe를 유리 형태로 담은 것처럼 보이도록 만들어 줄 것이다.

이를 위해 Image를 추가로 할당한다.

 

Graph에서 미리 준비된 이미지를 할당해주자.

 

그럼 아래와 같이 유리병에 담긴 듯한 효과가 나타난다.

이또한 Padding을 통해 겉 Ring 까지 효과가 미치지 않도록 조정해줄 것이다.

 

방식은 아까 Globe Padding 값을 다뤘을 때와 동일하다.

 

마찬가지로 함수로 접어줄 것이며, 역할이 2개이기에 구별하여 접어주었다.

 

마지막으로 유리 광택 효과가 지나친 듯하여 투명도 값을 약간 조정해주었다.