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

Button Widget

지난번에 만든 Menu 위젯을 우선 조금씩 수정해줄 것이다.

보조 속성 Text의 위치를 스크롤 박스 위로 옮겨주고, Spacer를 맨아래 하나 더 추가하고, 나머지는 간격을 재조정할 것이다.

 

그리고 우측 하단에 Menu 위젯을 닫기 위한 버튼을 새롭게 만들어주자.

버튼은 저번과 동일하게 Normal/Hovered/Pressed/Disabled 상태에 따라 이미지를 다르게 사용하고 Padding을 활용하여 간격을 조정한다.

또 이때 중요한 것은 Warp Box 내부에 넣는 것이 아니라 별도의 Overlay를 통해 Button 이미지와 Text를 배치한다.

 

---

 

지금은 버튼을 만들 때마다 테두리 이미지, 버튼 이미지, 텍스트를 계속 반복하여 만들고 있다.

따라서 효율성을 위해 공용 Button Widget을 만들어주자.

가장 먼저 Button의 가로 세로 크기를 자유롭게 조절할 수 있도록 변수를 설정할 것이다.

여기서는 40, 40을 초기값으로 두었다.

 

그리고 테두리 이미지에 대한 변수도 설정해주자.

In Brush의 경우 변수로 승격시켜서 설정해야한다.

 

마찬가지로 버튼에 대해서도 Normal/Hovered/Pressed/Disabled 각각에 대해 따로 이미지 변수를 사용할 수 있다.

해당 변수들도 변수로 승격시켜야 이미지 할당이 가능하다.

 

Text에 대해서도 기본 내용과, 폰트나 사이즈, 아웃라인, Letter Spacing 까지 변수로 만들어서 설정이 가능하다.

 

위 내용들을 모두 할당 및 컴파일하고 Designer 창으로 돌아오면 다음과 같다.

 

이제 다시 Menu 위젯으로 돌아가서 기존 Button을 지우고 방금 만든 위젯으로 바꿔주자.

 

이렇게 만든 Button 위젯을 다시 상속 또는 확장하여 다음과 같은 다양한 UI 버튼을 제작할 예정이다.

Wide Button
Overlay Menu Open Button
Attribute Menu Open Button