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

2. 위젯 블루프린트 구성

여기서는 상호작용형 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

최종 결과

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