Gameplay Ability System - Top Down RPG / Section 8-13

Attribute Menu - Framed Value

이제 저번 강의에서 언급했던 프레임 안에 숫자를 표시할 UI를 구현할 것이다.

이를 위한 Widget Bluprint를 만들어주자.

 

가장 먼저 위젯 크기를 쉽게 조절하기 위한 SizeBox부터 추가해준다.

디폴트값인 Full Screen을 Desired로 바꿔서 사이즈 조절을 자유롭게 해줄 것이다.

Width/Height Override를 통해 값을 할당해서 테스트할 수 있다.

 

하지만 우리는 크기 조절용 변수를 따로 사용하여 크기를 조절할 것이다.

이를 위해 SizeBox를 변수로 만들어주어야 하며, 해당 변수를 통해 Set Height/Width Override 함수를 호출할 수 있다.

이 상태로 컴파일을 하면 기본값인 0이 되며, 해당 변수를 클릭하고 직접 수치를 조정할 수 있다.

 

그리고 여러 UI 요소를 겹쳐서 배치할 것이기 때문에 Overlay 창을 SizeBox 내부에 배치한다.

이후에 가장 먼저 배경 이미지를 Overly 내부에 추가해줄 것이다.

 

해당 Image 또한 변수로 만들고, 해당 변수를 통해 Set Brush 함수를 호출할 수 있다.

그리고 해당 함수 인풋 변수인 In Brush 함수를 변수로 만들어서, 원하는 이미지를 할당할 것이다.

할당한 이미지는 흐르는 구름 효과를 통해 UI 배경 애니메이션 느낌을 주도록 하였다.

이때 강의에서는 검은색에 가깝게 Tint 값을 조절했지만, 나는 우선 기본값 그대로 두었다.

 

다음으로 테두리에 해당하는 이미지를 Overlay내부에 이어서 추가한다.

여기서 중요한 점은 해당 이미지가 테두리 용이기 때문에, Draw as 옵션을 Border로 바꿔주어야 한다는 것이다.

그냥 Image로 확대하면 무서리 두께까지 같이 늘어나서 프레임이 뭉개질 수 있지만, Border로 바꾸면 모서리 부분은 원본 비율을 유지하고 선 부분만 늘어나 프레임 형태를 유지하게 된다.

 

마지막으로 숫자를 표시할 TexT이다.

여기서는 정렬을 Horizontal과 Vertical 모두 Fill로 하여 꽉 채우는 것이 아니라, Center(중앙) 정렬로 표시해줄 것이다.

그리고 우선 원하는 글씨와 폰트를 설정하고 글씨에 윤곽선도 살짝 추가해주었다.

 

이제 다음 강의에서 Text Value Row (ex: HP : 100 / Mana : 50) 를 제작할 것이다.