언어:
페이지 정보
태그:
수준별:
엔진 버전:
언리얼 엔진

3D 위젯 상호작용 생성

언리얼 엔진

전통적인 UI 는 2D 또는 2D 월드 위에 2D 로 구성됩니다 (메뉴, 생명력 막대, 점수 표시 등이 그렇습니다). 하지만 어떤 UI 는 3D 환경에서 구현하여 사용자와 상호작용하도록 하고 싶을 때가 있습니다 (예를 들면 키패드, 가상 메뉴, 인벤토리 또는 기타 상호작용형 UI 요소). VR 프로젝트에서는 훨씬 더 일반적인 부분인데, UMG 에서는 이러한 유형의 상호작용을 Widget Interaction 컴포넌트로 지원합니다.

여기서는 아래 비디오와 비슷하게 레벨에 배치하면 플레이어가 클릭할 수 있는 버튼이 포함된 위젯을 만들어 보겠습니다.

단계

여기서는 블루프린트 일인칭 템플릿시작용 콘텐츠 를 포함한 것을 사용하고 있습니다.

  1. Content/FirstPersonBP/Blueprints 폴더에서 FirstPersonCharacter 블루프린트를 열고 Widget Interaction 유형 컴포넌트를 추가합니다.

    WidgetInteraction_02.png

  2. Widget Interaction 컴포넌트를 좌클릭 하고 끌어 FP_Gun 에 붙은 Sphere 컴포넌트 위에 놓습니다.

    WidgetInteraction_03.png

    그러면 Widget Interaction 컴포넌트가 총이 향하는 방향을 가르키도록 할 수 있습니다.

  3. Widget Interaction 컴포넌트의 디테일 패널에서 위치 를 0 으로 설정하고 디버그 표시 옵션을 체크합니다.

    WidgetInteraction_04.png

  4. 이벤트 그래프 에서 Right Mouse Button 마우스 이벤트를 추가하고, Widget Interaction 컴포넌트를 끌어 놓은 뒤 Press Pointer Key 노드를 추가합니다.

    WidgetInteraction_05.png

  5. Right Mouse Button 노드의 Pressed 핀에 연결하고 KeyLeft Mouse Button 으로 설정합니다.

    WidgetInteraction_06.png

    기본적으로 UMG 는 클릭 이벤트를 Left Mouse Button 키 눌림의 결과로 등록하는데, 이 노드를 사용하면 오른쪽 마우스 버튼이 눌렸을 때를 시뮬레이션할 수 있습니다. 어떤 키 입력 이벤트로도 이 함수를 호출할 수 있습니다 (트리거 누름 또는 버튼 누름으로 왼쪽 마우스 버튼 클릭 시뮬레이션이 가능합니다).

  6. Release Pointer Key 노드를 추가하고 (Left Mouse Button 으로 설정), Right Mouse Button 노드의 Released 핀에 연결합니다.

    WidgetInteraction_07.png

  7. 콘텐츠 브라우저 에서 위젯 블루프린트 를 만들어 InteractiveWidget 이라 합니다.

    WidgetInteraction_08.png

  8. 비주얼 디자이너 에서 Canvas Panel 을 제거한 뒤 Button 위젯을 추가하고, 그 위에 Text 위젯을 추가합니다.

    클릭하면 원본을 확인합니다.

    버튼 위의 텍스트에 플레이어가 버튼을 누른 횟수를 나타낼 것입니다. 어떤 유형이든 상호작용형 위젯을 만들고 Widget Interaction 컴포넌트를 사용하여 상호작용할 수 있습니다 (슬라이더, 콤보 박스, 체크 박스 등은 월드 스페이스에서 상호작용 가능합니다).

  9. Button디테일 패널에서 Style/Hovered 아래 Tint 를 다른 색으로 바꿉니다.

    WidgetInteraction_10.png

  10. Text디테일 패널에서 Text 내용을 0 으로, Font Size48 로 변경합니다.

    WidgetInteraction_11.png

  11. 그래프 에서 Text 변수를 만들어 Value 라 입력하고, 컴파일 한 뒤 Value0 으로 설정합니다.

    WidgetInteraction_12.png

    플레이어가 버튼을 클릭하면 이 변수를 업데이트합니다. 그 버튼에는 Text 위젯을 바인딩할 것입니다.

  12. Text 위젯의 디자이너 탭에서, Text 옆의 Bind 옵션을 클릭하고 Value 프로퍼티를 선택합니다.

    WidgetInteraction_13.png

  13. Button 위젯의 디테일 패널에서 Events 아래, On Clicked 옆의 + 를 클릭합니다.

    WidgetInteraction_14.png

    버튼을 클릭할 때마다 이것이 발동되고, FirstPersonCharacter 블루프린트 안에서 호출됩니다.

  14. 그래프 탭에서 Ctrl 키를 누르고 Value 변수를 끌어 놓은 뒤, 거기서 To String 에다 String To Int 를 연결합니다.

    WidgetInteraction_15.png

    Text 를 String 으로, 다시 String 에서 Int 로 변환하여 버튼을 클릭했을 때 값을 증가시킬 수 있도록 합니다.

  15. String To Int 핀에 Integer + Integer 노드를 연결하고 + 1 설정합니다.

  16. Alt 키를 누르고 Value 변수를 끌어 놓아 Set 한 뒤, 나머지 핀은 아래와 같이 OnClicked 이벤트에 연결합니다.

    WidgetInteraction_16.png

    Integer + Integer 핀을 Value 의 텍스트 입력에 연결하면 ToText(int) 노드가 자동 생성됩니다.

  17. 콘텐츠 브라우저 에서 액터 기반 블루프린트 를 새로 만들고 ExampleWidget 이라 한 뒤, Widget 컴포넌트를 추가합니다.

    WidgetInteraction_18.png

    이것이 InteractiveWidget 위젯 블루프린트의 3D 버전 표상입니다.

  18. Widget 컴포넌트의 디테일 패널에서 User Interface 아래 Widget ClassInteractiveWidget 으로 변경합니다.

    WidgetInteraction_19.png

  19. 콘텐츠 브라우저 에서 ExampleWidget 블루프린트를 끌어 레벨에 놓고, 원하는 대로 이동, 회전, 스케일 조절합니다.

    WidgetInteraction_20.png

  20. 플레이 를 클릭하여 에디터에서 플레이합니다.

최종 결과

에디터에서 플레이해 보면, 아래와 비슷한 것이 있을 것입니다. 왼쪽 마우스 버튼 으로 무기를 발사할 수 있고, 버튼을 조준하면 Hovered 상태에 들어가( 그 스타일이 변경되)게 됩니다. 버튼을 오른쪽 마우스 버튼 클릭하면, 클릭할 때마다 텍스트 값이 증가합니다.

이번 단계에서 언급했듯이, Right Mouse Button 을 사용하여 클릭 이벤트를 등록하고 있지만, 게임패드 버튼 클릭을 사용하여 Pointer Key Presses/Releases 또는 (아래와 같이) Motion Controller Trigger Presses 등록이 가능합니다. 여기서는 Right Motion Controller (에 Widget Interaction 컴포넌트를 붙여) 버튼을 가리키고 Right Trigger 를 눌러 버튼 클릭 등록을 하고 있습니다.

WidgetInteraction_21.png