가상 키보드 상호작용 생성

3D 키패드 또는 가상 키보드를 만들어 플레이어가 지정한 글자를 입력할 수 있도록 하려는 경우, Widget Interaction 컴포넌트와 Widget 컴포넌트를 조합하면 됩니다. Widget Interaction 컴포넌트는 어떤 버튼을 클릭했는지 알아내고, 표시를 담당하는 액터의 Widget 컴포넌트에 글자 전송 처리를 할 수 있도록 합니다.

여기서는 상호작용 가능한 키패드를 만들고 텍스트 박스에 무언가 입력해 보도록 하겠습니다. 그 과정에서 어느 위젯에 포커스를 줄 수 있고 없는지도 알아냅니다. Text Box 의 경우 다양한 버튼이 눌린 상태에서 플레이어가 숫자를 입력해도 포커스를 잃지 않도록 하는 데 중요합니다.

이 안내서를 마칠 때 즈음이면, 3D 게임 월드에 나타나 상호작용이 가능한 키패드와 디스플레이가 생겨 있을 것입니다.

이 가이드에서는 블루프린트 일인칭 템플릿 프로젝트를 사용합니다.

1 - 캐릭터 구성

먼저 캐릭터에 Widget Interaction 컴포넌트를 구성하고 UI 표시용 애셋을 만들어야 합니다.

1. Content > FirstPersonBP > Blueprints 폴더에서 FirstPersonCharacter 블루프린트를 엽니다.

2. WidgetInteraction 컴포넌트를 추가하여 Sphere 에 붙이고, 디테일 패널에서 위치 와 Show Debug (디버그 표시)를 0 초기화합니다.

   

   이제 게임내에서 디버그 마커로 나타나는 총을 플레이어가 가리키고 있는 방향으로 Widget Interaction 컴포넌트가 향하게 됩니다.

3. 이벤트 그래프 에서 Right Mouse Button 이벤트를 추가한 뒤 Widget Interaction 컴포넌트를 끌어 놓습니다.

4. Widget Interaction 을 끌어 놓고 Press Pointer Key 와 Release Pointer Key 를 추가, 둘 다 Left Mouse Button 으로 설정합니다. Right Mouse Button 의 Pressed 및 Released 핀을 각자의 Pointer Key 노드에 연결합니다.

   

   위젯은 좌클릭 또는 터치 컨트롤을 통해 마우스/터치 상호작용에 반응하는데, 그러한 시뮬레이션에는 Press Pointer Key 함수를 사용합니다. 예제에서는 Right Mouse Button 으로 왼쪽 마우스 버튼 클릭을 시뮬레이션하고 있지만, 게임패드 버튼 심지어 모션 컨트롤러 트리거 누름으로도 Press Pointer Key 함수를 발동시킬 수 있습니다.

5. 콘텐츠 브라우저 에서 액터 기반 블루프린트 클래스 를 둘 만들고 이름을 Keypad 및 KeypadDisplay 라 합니다. 그리고 위젯 블루프린트 를 둘 추가하고 KeypadWB 및 KeypadDisplayWB 라 합니다.

   

이제 캐릭터가 월드의 위젯과 상호작용할 수 있게 되었습니다. 다음에는 상호작용형 위젯을 구성해 보도록 하겠습니다.

2 - 위젯 블루프린트 구성

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

1. KeypadDisplayWB 블루프린트를 열고 Canvas Panel 을 삭제합니다. 계층구조에서 TextBox 와 함께 Size Box 를 추가합니다.

   

2. Size Box 의 경우, 프리뷰를 Desired on Screen 으로 설정하고 Width 및 Height 를 100x50 으로 설정합니다.

   

3. Text Box 의 경우 Hint Text 를 1212 로 설정하고, Font Size 를 28 로 설정합니다.

   

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

4. KeypadDisplayWB 블루프린트를 컴파일 및 저장 합니다.

5. KeypadWB 블루프린트를 열고 Canvas Panel 을 삭제합니다. 계층구조 에 Button 을 세 개, 텍스트를 각각 0, 1, 2 로 하여 구성합니다.

   

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

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

   

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

7. Ctrl 키를 누르고 각 버튼을 선택한 뒤, 각각에 대해 Is Focusable 체크를 해제 (False 로 설정)합니다.

   

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

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

   

9. 변수 를 둘 생성합니다. String 유형의 CharToSend 와 WidgetInteractionComponent 유형의 WidgetInteraction 입니다.

   

10. Alt 키를 누르고 각 OnClicked 이벤트에 대해 CharToSend 를 끌어 놓습니다. 변수 값을 기존에 설정한 버튼 텍스트 값 0, 1, 2 로 설정합니다.

    

11. Ctrl 키를 누르고 WidgetInteraction 를 끌어 놓습니다. 핀을 끌어 놓고 Send Key Char 노드를 추가합니다. 이를 CharToSend 변수와 OnClicked 이벤트에 연결합니다.

    

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

12. Del OnClicked 이벤트에서 Press and Release Key 를 사용하고 Key 를 Backspace 로 설정합니다. WidgetInteraction 변수를 Press 및 Release 키 타깃에 연결합니다.

    

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

    

14. KeypadWB 블루프린트를 컴파일 및 저장합니다.

이제 위젯 블루프린트가 키패드 와 키패드 디스플레이를 표시하도록 구성되었습니다.

3 - 액터 구성

다음, 키패드와 키패드 디스플레이 액터를 구성해야 키패드 액터 스크립트 작업을 시작할 수 있습니다.

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

   

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

2. KeypadDisplay 블루프린트를 컴파일 및 저장 합니다.

3. Keypad 블루프린트를 열고 Widget 컴포넌트를 추가, 클래스는 KeypadWB 로 설정하고 Draw at Desired Size 체크합니다. 이 위젯 컴포넌트에는 Window Focusable 옵션을 해제합니다.

   

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

4. WidgetInteraction 컴포넌트를 추가하고 Enable Hit Testing 를 해제(false 로 설정)합니다.

   

이 Widget Interaction 컴포넌트를 추가하는 이유는, 플레이어 캐릭터에 WidgetInteraction 컴포넌트로의 레퍼런스를 구하지 않아도 되도록 하기 위해서이고, Hit Testing 을 끄는 이유는 hover 이펙트를 생성하지 않도록 하기 위해서입니다.

WidgetInteraction 컴포넌트는 생성시 기본적으로 Virtual User Index 0 으로 설정되며, 그 전부 Virtual User Index ID 를 사용하여 통신합니다. 플레이어 캐릭터의 WidgetInteraction 컴포넌트 역시 Virtaul User Index 0 을 사용하고 있으므로, 그에 대한 레퍼런스를 구하는 것과 같습니다.

4 - 키패드 액터 스크립트

이번 최종회에서는 액터에 위젯 블루프린트를 Widget 컴포넌트로 추가하고 플레이어가 Enter 버튼을 눌렀을 때 벌어지는 일을 정의합니다. 게임내 테스트도 구성하여 코드가 맞으면 Success 를 틀리면 Wrong Code 를 출력하도록 하겠습니다.

1. Keypad 블루프린트 이벤트 그래프 에서, Event Begin Play 를 끌어 놓고 Cast to KeypadWB (형변환) 노드를 추가합니다. 그런 다음 Widget 컴포넌트를 추가하고 끌어 놓은 뒤 Get User Widget Object 를 추가합니다. Return Value 를 Cast Object 핀에 연결합니다.

   

2. As Keypad WB 핀을 끌어 놓고 Set Widget Interaction 노드를 추가, Widget Interaction 컴포넌트를 추가한 뒤 Set Widget Interaction 에 연결합니다.

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

   

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

4. Keypad Display Object Reference 변수를 생성하고 TargetDisplay 라 합니다. Instance Editable 을 체크합니다.

   

5. Text 변수를 만들고 GoalText 라 합니다. 블루프린트를 컴파일 하고 Default Value 를 1212 로 설정합니다.

   

6. Ctrl 키를 누르고 TargetDisplay 를 끌어 놓아 Widget 및 Get User Widget Object 를 거쳐 Cast to KeypadDisplayWB (형변환)하고 Return Value 를 Object 에 연결합니다.

   

7. As Keypad Display WB 핀에서, Editable Text Box 와 GetText(Text Box) 를 연결합니다. Return Value 에서 Equals 노드를 추가합니다. Goal Text 를 끌어 놓고 Equals 노드에 연결합니다.

   

   Text Box 이름을 변경했다면, 그 이름으로 검색해서 컴포넌트를 찾아야 합니다.

8. Branch 를 추가하여 두 개의 Print Strings 를 만듭니다. String 텍스트를 Success (True) 로, 다른 하나는 Wrong Code (False) 로 설정합니다

   

9. Keypad 블루프린트를 컴파일, 저장합니다.

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

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

    

12. 저장 하고 플레이를 선택하여 위젯과 상호작용합니다.

최종 결과

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

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