Google Daydream 터치패드 버튼 사용

Google Daydream 모션 컨트롤러 터치패드 버튼을 사용하도록 구성합니다.

Windows
MacOS
Linux
필요한 사전지식

이 글은 다음 주제에 대한 지식이 있는 분들을 대상으로 합니다. 계속하기 전 확인해 주세요.

HTGVRTouchpad_Hero_Image.png

Google Daydream Motion Controller (Google Daydream 모션 컨트롤러, MC) 의 터치패드 애는 버튼이 여럿 있어 언리얼 엔진에서 여러가지 다양한 입력 작업을 처리하도록 구성할 수 있습니다. 여기서는 터치패드를 구성하고 사용하는 방법을 살펴봅니다.

여기서는 이미 VR Camera 와 모션 컨트롤러 지원이 추가된 을 가지고 시작합니다. 이미 없으신 분들은 이 페이지 상단의 Prerequisite Topics (사전 필수 토픽) 부분의 문서를 확인하시기 바랍니다.

단계

아래는 Google Daydream 모션 컨트롤러 터치패드 사용 방법 관련 정보입니다.

  1. 먼저, 플레이어 폰 블루프린트를 열고, 컴포넌트 탭에서 Text Render 컴포넌트를 새로 추가한 뒤 이름을 FaceButtonPressed 라 하고, 아래 그림처럼 Motion Controller 컴포넌트와 부모 설정을 해줍니다.

    HTGVRTouchpad_00.png

  2. Text Render 컴포넌트를 클릭한 뒤, 디테일 패널에서, 다음 프로퍼티를 표에 해당하는 값으로 설정합니다.

    이미지를 클릭하면 원본을 확인합니다.

    프로퍼티 이름

    위치

    X = 20, Y = 0, Z = 0

    회전

    X = 0, Y = 0, Z = -180

    Horizontal Alignment

    Center

    Vertical Alignment

    Text Center

    World Size

    13.0

  3. 다음, 모션 컨트롤러 터치패드에서 현재 눌린 버튼을 저장하고 표시하는 데 사용할 Text 변수를 새로 만들어야 합니다. 변수 목록에서 Text 변수를 새로 만들고 ButtonText 라 합니다.

    HTGVRTouchpad_02.png

  4. Google Daydream 모션 컨트롤러 터치패드에는 사용할 수 있는 버튼이 다섯 개 있습니다. 그 중 다섯개는 터치패드의 상하좌우를 누르는 것으로 가동됩니다. 다섯 번째 버튼은 사용자가 터치패드 표면을 터치할 때 발동됩니다. 블루프린트에서 이러한 구성을 하려면, 이벤트 그래프에 다음 다섯 개의 Motion Controller (R) FaceButton 이벤트 노드를 추가합니다.

    이미지를 클릭하면 원본을 확인합니다.

    노드 이름

    기본 값

    Motion Controller (R) FaceButton1

    N/A

    Motion Controller (R) FaceButton2

    N/A

    Motion Controller (R) FaceButton3

    N/A

    Motion Controller (R) FaceButton4

    N/A

    Steam Touch 0

    N/A

  5. 이제 터치패드의 어느 버튼이 눌렸는지 표시하는 로직을 구성하려 합니다. ButtonText 변수를 끌어 이벤트 그래프에 놓고 Set 옵션을 선택합니다. 표시 텍스트를 설정할 것이기 때문입니다.

    이미지를 클릭하면 원본을 확인합니다.

  6. Motion Controller (R) FaceButton1 이벤트 노드의 Pressed 출력을 Set Button Text 노드의 입력에 연결한 뒤, Button Text 칸에 다음 텍스트를 입력합니다:

    • Face Button 1 Touch Pad UP

    이미지를 클릭하면 원본을 확인합니다.

  7. 지금은 Motion Controller Face Button 1 버튼을 눌러도 아무 일도 벌어지지 않습니다. 아직은 표시할 텍스트를 입력할 수 있는 기능만 구성했기 때문입니다. 텍스트를 표시하려면, 먼저 이벤트 그래프에 우클릭하고 Set Text 노드를 검색합니다. Set Button Text 변수 값을 표시할 텍스트를 설정해줄 것입니다. Set Text 노드를 검색할 때, SetText(FaceButtonPressed) 옵션을 선택하여 "Face Button Pressed" Text Render 컴포넌트에 대한 레퍼런스를 자동 추가하도록 합니다.

    이미지를 클릭하면 원본을 확인합니다.

  8. Set Button Text 노드를 Set Text 노드에 연결하여 터치패드 버튼을 누르면 Set Button Text 노드의 텍스트 입력이 표시되도록 해줘야 합니다. Set Button Text 노드의 양쪽 출력을 Set Text 노드의 가용 입력에 연결합니다. 완성된 블루프린트는 다음과 같은 모습일 것입니다:

    이미지를 클릭하면 원본을 확인합니다.

  9. 나머지 버튼 방향에 대해서도 이 작업을 반복합니다. 그 때, Set Face Button Text 에 눌린 버튼을 반영하도록 입력 텍스트를 바꿔주도록 합니다. 이 단계가 끝난 블루프린트 모습은 다음과 같습니다:

    Copy Node Graph

    이미지를 클릭하면 원본을 확인합니다.

  10. 마지막으로, 어느 모션 컨트롤러가 눌렸는지 알리는 텍스트를 모션 컨트롤러에 붙여서 모션 컨트롤러가 움직일 때 텍스트도 따라가도록 해줘야 합니다. 다음과 같은 노드를 이벤트 그래프에 추가합니다:

    노드 이름

    기본 값

    GoogleVRMotionController

    없음

    FaceButtonPressed

    없음

    Get Motion Controller

    없음

    AttachToComponent

    없음

    노드를 추가했으면, AttachToComponent 노드를 SetRelativeLocation 노드 출력에 연결합니다. 그리고 FaceButtonPressed 를 AttachToComponent 노드의 Target 입력에 연결합니다. 마지막으로 GoogleVRMotionController 를 GetMotionController 노드에 연결하고, 그 출력을 AttachToComponent 노드 Parent 입력에 연결합니다. 완성된 블루프린트는 다음 그림과 같습니다:

    Copy Node Graph

    이미지를 클릭하면 원본을 확인합니다.

최종 결과

블루프린트를 컴파일 및 저장한 뒤 실행 버튼을 사용하여 프로젝트를 스마트폰에 디플로이하고 실행시킵니다. 프로젝트가 폰에 디플로이되었으면, Google VR HMD 에 폰을 넣고 Daydream 모션 컨트롤러를 집어듭니다. 이제 터치패드에서 직선 방향쪽을 누르면, 다음 비디오처럼 눌린 버튼이 표시될 것입니다:

언리얼 엔진 프로젝트 다운로드

이 예제를 만드는 데 사용된 언리얼 엔진 프로젝트를 다운로드할 수 있는 링크입니다.

태그
Select Skin
Light
Dark

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼