언어:
페이지 정보
수준별:
엔진 버전:
언리얼 엔진
이 문서가 번역된 이후 업데이트된 내용이 있을 수 있습니다. 자세한 내용은 영문 페이지를 참고하세요.

5. 마무리

언리얼 엔진

이번 최종 단계에서는, (드래그중인 비주얼 위젯) DragWidget 구성을 하겠습니다. 그리고 캐릭터 블루프린트에게 HUD 위젯 블루프린트를 뷰포트에 추가하고 마우스 커서를 활성화시켜 드래그 위치를 확인할 수 있도록 해주겠습니다.

단계

  1. DragWidget 위젯 블루프린트를 열고 Canvas PanelSize Box 로 대체하고 자손 Border 설정을 합니다.

  2. SizeBox 이름을 WidgetSize 로 변경하고 isVariable 을 true 로 설정한 뒤, Width OverrideHeight Override 를 체크합니다.

    UpdateDragDrop3.png

    Size Box 의 Width 와 Height 를 Health Bar 위젯의 크기에 맞게 설정하도록 하겠습니다.

  3. Border 의 경우, Brush ColorBlack 으로, Alpha0.5 로 하여 약간 반투명하게 만듭니다.

    UpdateDragDrop4.png

    우리 예제에서 드래그 비주얼로는 Health Bar 의 실루엣을 사용하면서 실제 Health Bar 는 같은 위치에 유지합니다.

  4. 그래프 에서 Widget Reference 를 끌어 놓고 Event Construct 에서 HealthBar 에 형변환한 뒤 Desired SizeBreak Vector 를 구합니다.

    UpdateDragDrop5.png

    그러면 Size Box 에 설정할 수 있는 Health Bar 크기가 나옵니다. 오버라이드를 수동 입력할 수도 있지만, 그랬다면 Health Bar 크기 변경 시 여기서도 변경해 줘야 할 것입니다.

  5. Widget Size 를 끌어 놓은 뒤 거기서 Set Height OverrideSet Width Override 를 추가하고 아래와 같이 연결합니다.

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

  6. 콘텐츠 브라우저 에서 Content/ThirdPersonBP/Blueprints 아래 ThirdPersonCharacter 블루프린트를 엽니다.

  7. Event Begin Play 에서 Create Widget 를 추가( 및 HUD 로 설정)한 뒤, Add to Viewport 하고, Get Player ControllerShow Mouse Cursor 로 설정합니다. DragDrop19.png

  8. 컴파일, 저장플레이 버튼을 클릭하여 에디터에서 플레이합니다.

최종 결과

에디터에서 플레이 후, 화면에서 Health Bar 를 좌클릭 드래그 후 새 위치에 드롭합니다.

이는 드래그 앤 드롭 프로세스를 시작하는 데 필요한 엘리먼트 예제일 뿐입니다. 플레이어가 위젯을 세이프 존 외부 혹은 다른 위젯 위에 드래그하지는 않았나 추가적인 확인이 필요할 수 있습니다.