3. 액터 구성 및 테스트

UMG 로 3D 가상 키보드를 만들어 상호작용하는 법에 대한 데모입니다.

Windows
MacOS
Linux
On this page

이번 최종회에서는 위젯 블루프린트를 액터에 Widget 컴포넌트로 추가하고 플레이어가 Enter 버튼에 클릭하면 어떤 일이 벌어지는지를 정의합니다. 입력한 텍스트가 GoalText 와 같은지 비교하는 것입니다. 모든 준비가 다 되었다면, 최종 결과 확인을 하는 테스트를 통해 코드가 맞으면 화면에 Success, 틀리면 Wrong Code 라 출력합니다.

단계

  1. KeypadDisplay 블루프린트를 열고 Widget 컴포넌트를 추가, 클래스는 KeypadDisplayWBDraw at Desired Size 로 설정합니다.

    Keypad15.png

    Draw at Desired Size 옵션으로 간편하게 렌더 타깃을 위젯 블루프린트 내 원하는 크기에 자동으로 맞출 수 있습니다.

  2. Keypad 블루프린트를 열고 Widget 컴포넌트를 추가, 클래스는 KeypadWB 로, Draw at Desired Size 를 설정합니다..

  3. 이 위젯 컴포넌트에는 Window Focusable 옵션 체크를 해제합니다.

    Keypad16.png

    이 컴포넌트가 Keypad Display 위젯의 포커스를 앗아가지 않도록 해야 하므로, 체크를 해제시킵니다.

  4. Keypad 안에 WidgetInteraction 컴포넌트를 추가하고 Enable Hit Testing 를 false 로 설정합니다.

    Keypad17.png

    이 WidgetInteraction 컴포넌트를 추가하는 이유는, 플레이어 캐릭터에 WidgetInteraction 컴포넌트로의 레퍼런스를 구하지 않아도 되도록 하기 위해서이고, Hit Testing 을 끄는 이유는 hover 이펙트를 생성하지 않도록 하기 위해서입니다. WidgetInteraction 컴포넌트는 생성시 기본적으로 Virtual User Index 0 으로 설정되며, 그 전부 Virtual User Index ID 를 사용하여 통신합니다. 플레이어 캐릭터의 WidgetInteraction 컴포넌트 역시 Virtaul User Index 0 을 사용하고 있으므로, 그에 대한 레퍼런스를 구하는 것과 같습니다.

  5. Keypad 의 그래프에서, Event Begin Play 에는 Widget 컴포넌트를 잡아 Get User Widget Object 에서 Cast to KeypadWB 로 연결합니다.

    Keypad18.png

  6. As Keypad WB 핀에서는, Set Widget Interaction 후 4 단계의 WidgetInteraction 컴포넌트를 통과시킵니다.

  7. 또한 As Keypad WB 핀에서, Assign Enter Pressed 를 호출하여 Enter Pressed 커스텀 이벤트를 생성하도록 합니다.

    Keypad19.png

    이제 Enter 버튼을 클릭하면 이 커스텀 이벤트를 호출하여 입력한 코드가 맞는지 검사할 수 있습니다.

  8. Keypad Display 액터 유형 변수를 만들어 TargetDisplay 라 하고 Editable 설정합니다.

    Keypad20.png

  9. Text 유형 변수를 만들어 GoalText 라 한 뒤, 컴파일Default Value1212 라 설정합니다.

    Keypad21.png

  10. Ctrl 키를 누르고 TargetDisplay 를 끌어 놓아 WidgetGet User Widget Object 를 거쳐 Cast to KeypadDisplayWB 에 연결합니다.

    Keypad22.png

  11. As Keypad Display WB 핀에서, Editable Text BoxGetText(Text Box) 를 연결하여 Goal Text동일한지 검사해 봅니다.

    Keypad23.png

  12. 분기 (Branch)Print String 을 둘 추가하고, 하나는 True 에 (Success 사용), 하나는 False 에 (Wrong Code 사용) 연결합니다.

    Keypad24.png

  13. KeypadKeypadDisplay 블루프린트를 끌어 레벨에 놓고 원하는 대로 이동 및 회전시킵니다.

  14. Keypad 액터에 대한 디테일 패널에서, Target Display 변수를 레벨의 KeypadDisplay 로 설정합니다.

    Keypad25.png

  15. 레벨을 플레이합니다.

최종 결과

키패드 디스플레이에 다가가 우클릭 하여 포커스를 잡습니다. 버튼을 바라본 뒤 우클릭 하여 Send Key Char 명령을 내리고 그 값을 디스플레이에 전당합니다. 여기서는 우클릭으로 레벨의 위젯과 상호작용하고 있지만, 게임패드나 모션 컨트롤러 버튼으로 바꿔도 됩니다.

이 예제는 입력한 코드가 맞는지 아닌지를 화면에 출력할 뿐이지만, 문이 열리도록 한다거나, 적이 스폰되도록 한다거나, 다른 형태의 게임플레이 관련 이벤트도 얼마든지 발동시킬 수 있습니다!

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback