위젯 템플릿 제작

UMG 로 만드는 위젯 블루프린트 는 전부 유저 위젯 으로 간주되어 다른 위젯 블루프린트 안에 재사용하고 배치할 수 있습니다. 시각적 및 스크립트 기능 둘 다 블루프린트로 넘어옵니다.

약간의 블루프린트 스크립트 작업을 통해 UI 위젯의 기능이나 외형적인 면을 결정하는 변수를 만들어, 인스턴스 단위로 덮어쓸 수 있습니다. 여기서는 다른 블루프린트에 배치했을 때는 스타일을 덮어써서 다르게 할 수 있는 방식으로 만들 것입니다. 마지막으로 버튼을 클릭했을 때 벌어지는 일도 인스턴스 단위로 설정할 수 있도록 할 것입니다 (메뉴에 여러가지 버튼이 있는데 모양이나 작동 방식은 비슷하지만, 눌렀을 때 각기 다른 결과가 나도록 하는 데 좋습니다).

1 - 버튼 위젯 구성

먼저, Button (버튼)을 만들고 클릭했을 때 벌어지는 일에 대한 스크립트를 구성해야 합니다.

여기서는 블루프린트 삼인칭 템플릿 에 시작용 콘텐츠 를 포함시켜 사용합니다.

1. 콘텐츠 브라우저 에 우클릭 하고 위젯 블루프린트 를 둘 만듭니다. 하나는 CustomButton, 다른 하나는 HUD 라 합니다.

   

   CustomButton 는 UserWidget (유저 위젯)으로, HUD 위젯 블루프린트에 추가할 것입니다.

   또는 콘텐츠 브라우저 > 신규 추가 > 유저 인터페이스 에서도 위젯 블루프린트를 추가할 수 있습니다.

2. CustomButton 위젯 블루프린트 안에서 Canvas Panel 을 삭제하고 Button 을 추가한 뒤 그 위에 우클릭 하고 Wrap With > Size Box 를 선택합니다.

   

3. Size Box 의 디테일 패널에서 Width Override 값을 300 으로, Height Override 값을 100 으로 변경합니다. 선택적으로, 그래프 레이아웃을 Desired on Screen 으로 하면 버튼의 실제 크기가 어느정도 되는지 감을 잡을 수 있습니다.

   

4. 이벤트 그래프에서 Ctrl 키를 누르고 내 블루프린트 패널의 Button 을 끌어 놓습니다. 거기서 핀을 끌어 놓고 Set Style 노드를 추가합니다. Button Function 노드가 아닌 Variable Apperance 노드가 선택되었는지 확인합니다.

   

5. Event Construct 노드를 Set Widget Style 노드에 연결한 뒤, Widget Style 에 우클릭 하고 변수로 승격 합니다.

   

6. 새로운 변수 이름은 ButtonStyle 이라 하고 컴파일 한 뒤, Normal > Image 스타일을 아무 텍스처로 설정합니다.

   

7. Normal 부분에 우클릭 하고 복사 합니다. 그리고 이미지 세팅을 Hovered 와 Pressed 값에 붙여넣습니다. 이 세 값 모두 같은 이미지 텍스처를 가질 것입니다.

   

8. Hovered 를 펼치고 Tint 색을 (노랑 등) 아무 색으로 설정합니다.

   

9. ButtonStyle 에서 Instance Editable (인스턴스 편집가능), Expose on Spawn (스폰시 노출)을 체크합니다.

   

   그러면 이 위젯 블루프린트를 다른 데서 사용할 때 다른 위젯 블루프린트에서 이 변수 값을 수정할 수 있습니다.

10. Button 변수를 선택한 뒤 + 부호를 클릭하여 OnClicked 노드를 그래프에 추가합니다.

    

11. 내 블루프린트 패널에서 + Event Dispatcher 버튼을 클릭하여 새로운 이벤트 디스패처 를 만들고 ButtonClicked 라 합니다.

    

12. ButtonClicked 이벤트를 끌어 그래프에 놓고 Call 을 선택한 뒤, 노드를 OnClicked 이벤트에 연결합니다.

    

    그러면 버튼을 클릭할 때마다의 고유 스크립트 함수 기능을 만들 수 있습니다. 이 버튼 인스턴스가 여럿 있고 OnClicked 이벤트만 사용하는 경우, 각 인스턴스는 동일한 함수 기능에 반응하여 실행될 것입니다. 하지만 이벤트 디스패처 를 만든 뒤 인스턴스 단위로 이벤트를 구현해 두면, 실제로 클릭된 버튼만 거기에 추가된 스크립트가 발동되도록 할 수 있습니다.

2 - HUD 위젯에 버튼 위젯 추가

With our Button widget created and scripted, we can now add the Button to the HUD Widget, add the HUD to the viewport, and see the buttons in-game.

1. HUD 위젯 블루프린트를 열고, Canvas Panel 에 Vertical Box 를 추가합니다. 박스 크기를 작게 조정합니다.

   

2. 팔레트 에서 User Created 아래, Vertical Box 에 Custom Button 을 셋 추가합니다.

   

3. 이벤트 그래프에서 각 CustomButton 을 선택하고 + 를 클릭하여 Button Clicked 이벤트를 그래프에 추가합니다. 각 버튼마다 하나씩, 세 개의 이벤트가 있을 것입니다.

   

   CustomButton 위젯 블루프린트 안에 생성한 이벤트 디스패처 이며, 이 특정 버튼을 클릭하면 반응합니다.

4. 각 ButtonClicked 이벤트에 대해, 핀을 끌어 놓고 Print String 노드를 각 이벤트에 연결합니다. In String 글상자에 다양한 텍스트를 추가합니다.

   

   이 예제에서는 누른 버튼에 따라 다양한 텍스트를 화면에 출력하고 있습니다. 실제 상황에서는 각 버튼마다 다른 메뉴를 열거나, 여러가지 게임 세팅을 변경하거나, 플레이어 캐릭터에게 변경을 가하도록 할 수 있겠습니다.

   여기서는 예제 삼아 버튼 클릭을 시뮬레이션한 것입니다. HUD 메뉴를 만드는 법은, UMG UI 디자이너 퀵스타트 가이드 문서의 메인 메뉴 생성 부분을 참고하세요.

5. 레벨 에디터 메인 툴바에서, 블루프린트 - 레벨 블루프린트 열기 를 클릭합니다.

   

6. 이벤트 그래프에 우클릭 - Event BeginPlay 를 추가한 뒤 Create Widget 노드에 연결, Class 는 HUD 로 설정합니다.

   

7. Add to Viewport 노드를 추가하고 Create HUD Widget 노드에 연결합니다. 그리고 Get Player Controller 함수를 Set Show Mouse Cursor 에 연결하고 박스를 체크(True 설정)합니다.

   

8. 레벨 블루프린트 를 컴파일 하고 닫은 뒤, 에디터에서 플레이 를 클릭하면 게임내에서 버튼을 상호작용할 수 있습니다.

최종 결과

에디터에서 플레이해 보면, 각 버튼은 정의된 ButtonStyle 변수에 따라 자동으로 스타일이 적용됩니다. 각 버튼을 클릭하면 각기 다른 스크립트 부분이 실행되는데, 이벤트 디스패처 가 호출되어 그에 맞는 ButtonClicked 이벤트가 호출되기 때문입니다. 선택적으로, ButtonStyle 변수가 스폰시 노출되어 편집가능한 상태이므로, 다른 어떤 위젯 블루프린트에 배치했든 그 안에서 버튼 스타일을 덮어쓸 수 있습니다. 어떤 애니메이션이나 복잡한 스크립트 로직을 매번 다시 만들 필요 없이, 유저 위젯으로 만들어 두면 추가 작업 없이 다른 위젯 블루프린트에 재사용할 수 있습니다.