2. 위젯 블루프린트 구성

여기서는 레벨에 표시할 키패드와 키패드 디스플레이 위젯을 생성합니다.

Windows
MacOS
Linux
On this page

여기서는 상호작용형 UI 위젯의 레이아웃을 만들어 버튼을 클릭했을 때 실행되는 스크립트를 만들도록 하겠습니다.

단계

  1. KeypadDisplayWB 를 열고 계층구조 패널의 Canvas PanelSize Box 로 둘러싼 TextBox 로 대체합니다.

    Keypad04a.png

  2. Size Box 의 경우, Desired on Screen 으로 설정하고 WidthHeight100x50 으로 설정합니다.

    Keypad04.png

  3. Text Box 의 경우 Hint Text1212 로 설정하고, Font Size28 로 설정합니다.

    Keypad05.png

    예를 들어 플레이어는 키패드를 사용하여 1212 텍스트를 입력해야 입력 성공 신호를 보내는 것이지만, 값은 아무렇게나 해도 괜찮습니다.

  4. KeypadWB 를 열고 계층구조 에 Button 을 셋 만들어 그 위에 아래와 같이 텍스트 0, 1, 2 가 표시되도록 구성합니다.

    Keypad06.png

    계층구조 내 각 버튼에 F2 키를 눌러 버튼 이름을 적당히 지어주는 것이 좋을 것입니다.

  5. 두 번째 Horizontal Box 를 추가하고 그 안에 Button 을 둘 추가합니다. 그 중 하나에는 텍스트를 Del 로, 다른 하나에는 Ent 로 설정합니다.

    Keypad07.png

    키패드는 숫자 버튼 셋과 입력 내용 삭제 (Del) 또는 확인 (Ent) 버튼 둘로 구성됩니다.

  6. Ctrl 키를 누르고 각 버튼을 선택한 뒤, 각각에 대해 Is Focusable 옵션을 False 로 설정합니다.

    Keypad08.png

    이 구성의 정상 작동을 위해서는, 상호작용이 가능한 다른 위젯이 Keypad Display 위젯에서 포커스를 앗아가지 않도록 해 줄 필요가 있습니다. 이들을 true 로 놔둔 상태에서 버튼을 클릭하면, Keypad Display 는 포커스를 잃고 버튼으로 전환되어 키 눌림 및 값을 Keypad Display 로 전송할 수 없게 될 것입니다.

  7. 그래프 에서 각 버튼에 대해 OnClicked 이벤트를 추가합니다.

    Keypad09.png

  8. 변수 를 둘 생성합니다. String 유형의 CharToSendWidgetInteractionComponent 유형의 WidgetInteraction 입니다.

    Keypad10.png

  9. Alt 키를 누르고 CharToSend 를 끌어 놓은 뒤 OnClicked 이벤트에 언결하고 아래와 같이 변수 값을 설정합니다.

    Keypad11.png

  10. Ctrl 키를 누른 상태에서 WidgetInteraction 을 끌어 놓고 거기에 Send Key Char 를 연결한 뒤, CharToSendOnClicked 이벤트를 연결합니다.

    Keypad12.png

    여기서 Send Key Char 함수를 사용하는 이유는, 슬레이트의 텍스트 박스에는 키를 바로 전송할 수 없기 때문입니다. 예를 들어 A 키가 눌렸다고 인식하여 A 를 전송할 수가 없는 것입니다. 그 대신 Send Char 에 대해 리슨 상태로 대기하는데, 그렇게 하면 로우 레벨 시스템 운영 코드로 A 키를 누를 때 Shift 가 눌렸는지 아니면 A 를 누를 때 Caps Lock 이 켜져 있었는지 알아낼 수 있습니다.

  11. Del OnClicked 이벤트에는 WidgetInteraction 변수에서 Backspace 로 설정된 Press and Release Key 를 사용합니다.

    Keypad13.png

  12. 이벤트 디스패처 를 생성하여 EnterPressed 라 하고 OnClicked(Ent) 에서 호출합니다.

    Keypad14.png

최종 결과

키패드와 키패드 디스플레이 표시를 위한 위젯 블루프린트 구성이 완료되었습니다. 다음에는 이들을 액터 블루프린트에 위젯 컴포넌트로 추가시켜 레벨에 나타나도록 만들겠습니다. 다음 단계가 끝날 즈음이면 시스템을 테스트하고 게임을 플레이하면서 두 요소를 상호작용해 볼 수 있을 것입니다.

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