UMG 로 만드는 위젯 블루프린트 는 전부 유저 위젯 으로 간주되어 다른 위젯 블루프린트 안에 재사용하고 배치할 수 있습니다. 시각적 및 스크립트 기능 둘 다 블루프린트로 넘어옵니다.
약간의 블루프린트 스크립트 작업을 통해 UI 위젯의 기능이나 외형적인 면을 결정하는 변수를 만들어, 인스턴스 단위로 덮어쓸 수 있습니다. 여기서는 다른 블루프린트에 배치했을 때는 스타일을 덮어써서 다르게 할 수 있는 방식으로 만들 것입니다. 마지막으로 버튼을 클릭했을 때 벌어지는 일도 인스턴스 단위로 설정할 수 있도록 할 것입니다 (메뉴에 여러가지 버튼이 있는데 모양이나 작동 방식은 비슷하지만, 눌렀을 때 각기 다른 결과가 나도록 하는 데 좋습니다).
1 - 버튼 위젯 구성
먼저, Button (버튼)을 만들고 클릭했을 때 벌어지는 일에 대한 스크립트를 구성해야 합니다.
여기서는 블루프린트 삼인칭 템플릿 에 시작용 콘텐츠 를 포함시켜 사용합니다.
-
콘텐츠 브라우저 에서 추가(Add) 를 클릭한 다음 유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) 를 선택합니다.
위젯 블루프린트는 콘텐츠 브라우저 에서 우클릭하고 유저 인터페이스 > 위젯 블루프린트 를 클릭해서 추가할 수도 있습니다.
-
2개의 위젯 블루프린트 CustomButton 과 HUD 를 만듭니다.
CustomButton 은 HUD 위젯 블루프린트에 추가할 사용자 위젯입니다.
-
팔레트(Palette) 패널에서 계층구조(Hirerchy) 패널로 드래그하여 버튼 을 추가합니다. 추가한 버튼을 우클릭한 다음 다음으로 래핑...(Wrap With) > 크기 박스(Size Box) 를 선택합니다.
-
크기 박스 의 디테일 패널에서 Width Override 값을 300 으로, Height Override 값을 100 으로 변경합니다. 선택적으로, 그래프 레이아웃을 Desired on Screen 으로 하면 버튼의 실제 크기가 어느정도 되는지 감을 잡을 수 있습니다.
-
이벤트 그래프에서 Ctrl 키를 누르고 내 블루프린트 패널의 버튼 을 끌어 놓습니다. 거기서 핀을 끌어 놓고 Set Style 노드를 추가합니다. Button Function 노드가 아닌 Variable Apperance 노드가 선택되었는지 확인합니다.
-
Event Construct 노드를 Set Widget Style 노드에 연결한 뒤, Widget Style 에 우클릭 하고 변수로 승격 을 선택합니다.
-
새로운 변수 이름은 ButtonStyle 이라 하고 컴파일 한 뒤, Normal > Image 스타일을 아무 텍스처로 설정합니다.
-
Normal 부분에 우클릭 하고 복사 합니다. 그리고 이미지 세팅을 Hovered 와 Pressed 값에 붙여넣습니다. 이 세 값 모두 같은 이미지 텍스처를 가질 것입니다.
-
Hovered 를 펼치고 Tint 색을 (노랑 등) 아무 색으로 설정합니다.
-
ButtonStyle 에서 Instance Editable (인스턴스 편집가능), Expose on Spawn (스폰시 노출)을 체크합니다.
그러면 이 위젯 블루프린트를 다른 데서 사용할 때 다른 위젯 블루프린트에서 이 변수 값을 수정할 수 있습니다.
-
Button 변수를 선택한 뒤 + 부호를 클릭하여 OnClicked 노드를 그래프에 추가합니다.
-
내 블루프린트 패널에서 + Event Dispatcher 버튼을 클릭하여 새로운 이벤트 디스패처 를 만들고 ButtonClicked 라 합니다.
-
ButtonClicked 이벤트를 끌어 그래프에 놓고 Call 을 선택한 뒤, 노드를 OnClicked 이벤트에 연결합니다.
그러면 버튼을 클릭할 때마다의 고유 스크립트 함수 기능을 만들 수 있습니다. 이 버튼 인스턴스가 여럿 있고 OnClicked 이벤트만 사용하는 경우, 각 인스턴스는 동일한 함수 기능에 반응하여 실행될 것입니다. 하지만 이벤트 디스패처 를 만든 뒤 인스턴스 단위로 이벤트를 구현해 두면, 실제로 클릭된 버튼만 거기에 추가된 스크립트가 발동되도록 할 수 있습니다.
2 - HUD 위젯에 버튼 위젯 추가
버튼 위젯을 만들고 스크립팅한 상태에서 HUD 위젯에 버튼을 추가하고, 뷰포트에 HUD를 추가하고, 인게임에서 버튼을 확인할 수 있습니다.
-
HUD 위젯 블루프린트를 열고, Canvas Panel 에 Vertical Box 를 추가합니다. 박스 크기를 작게 조정합니다.
-
팔레트 에서 User Created 아래, Vertical Box 에 Custom Button 을 셋 추가합니다.
-
이벤트 그래프에서 각 CustomButton 을 선택하고 + 를 클릭하여 Button Clicked 이벤트를 그래프에 추가합니다. 각 버튼마다 하나씩, 세 개의 이벤트가 있을 것입니다.
CustomButton 위젯 블루프린트 안에 생성한 이벤트 디스패처 이며, 이 특정 버튼을 클릭하면 반응합니다.
-
각 ButtonClicked 이벤트에 대해, 핀을 끌어 놓고 Print String 노드를 각 이벤트에 연결합니다. In String 글상자에 다양한 텍스트를 추가합니다.
이 예제에서는 누른 버튼에 따라 다양한 텍스트를 화면에 출력하고 있습니다. 실제 상황에서는 각 버튼마다 다른 메뉴를 열거나, 여러가지 게임 세팅을 변경하거나, 플레이어 캐릭터에게 변경을 가하도록 할 수 있겠습니다.
-
레벨 에디터 메인 툴바에서, 블루프린트 - 레벨 블루프린트 열기 를 클릭합니다.
-
이벤트 그래프에 우클릭 - Event BeginPlay 를 추가한 뒤 Create Widget 노드에 연결, Class 는 HUD 로 설정합니다.
-
Add to Viewport 노드를 추가하고 Create HUD Widget 노드에 연결합니다. 그리고 Get Player Controller 함수를 Set Show Mouse Cursor 에 연결하고 박스를 체크(True 설정)합니다.
-
레벨 블루프린트 를 컴파일 하고 닫은 뒤, 에디터에서 플레이 를 클릭하면 게임내에서 버튼을 상호작용할 수 있습니다.
최종 결과
에디터에서 플레이해 보면, 각 버튼은 정의된 ButtonStyle 변수에 따라 자동으로 스타일이 적용됩니다. 각 버튼을 클릭하면 각기 다른 스크립트 부분이 실행되는데, 이벤트 디스패처 가 호출되어 그에 맞는 ButtonClicked 이벤트가 호출되기 때문입니다. 선택적으로, ButtonStyle 변수가 스폰시 노출되어 편집가능한 상태이므로, 다른 어떤 위젯 블루프린트에 배치했든 그 안에서 버튼 스타일을 덮어쓸 수 있습니다. 어떤 애니메이션이나 복잡한 스크립트 로직을 매번 다시 만들 필요 없이, 유저 위젯으로 만들어 두면 추가 작업 없이 다른 위젯 블루프린트에 재사용할 수 있습니다.