GoogleVR 터치패드 사용

Google VR 모션 컨트롤러 터치패드 구성법입니다.

Windows
MacOS
Linux

HTGVRMCTouchpad_Hero_Image.png

GoogleVR Motion Controller (Google VR 모션 컨트롤러, MC) 터치패드는 속성상 정확도가 높아, 정밀도를 요하는 모든 종류의 다양한 상호작용을 하는 데 사용할 수 있습니다. 일련의 메뉴 옵션 스크롤이나 맵에서 정확한 위치를 집는 등, 터치패드를 사용하여 가상 세계와 상호작용하는 방법은 수도 없이 많습니다. 여기서는 Google VR 모션 컨트롤러 터치패드로 터치한 현재 위치를 구한 뒤 표시하는 방법을 살펴보도록 하겠습니다.

여기서는 이미 VR 카메라와 모션 컨트롤러 지원이 추가된 폰을 가지고 시작합니다. 이미 없으신 분들은, 페이지 상단의 사전 필수 토픽 목록의 문서를 먼저 확인하시기 바랍니다.

단계

여기서는 Google Daydream 모션 컨트롤러의 터치패드를 구성하는 방법을 살펴봅니다.

  1. 먼저 플레이어 폰 블루프린트를 엽니다. 컴포넌트 탭에서 Text Render 컴포넌트를 둘 새로 추가하고, X_PositionY_Position 이라 합니다. 둘 다 아래 그림처럼 GoogleVRMotion Controller 컴포넌트를 부모 설정해 줍니다.

    HTGVRMCTouchpad_00.png

  2. Text 컴포넌트에 클릭한 뒤, 디테일 패널 에서 다음 프로퍼티에 대해 X 와 Y 텍스트 양쪽에 대한 값을 다음과 같이 설정합니다:

    클릭하면 이미지 원본을 확인합니다. 참고로 Y_Position 프로퍼티만 표시하고 있습니다. X_Position 프로퍼티의 경우 아래 표를 참고하세요.

    프로퍼티 이름

    Location X Text

    X = 20, Y = 0, Z = 0

    Location Y Text

    X = 20, Y = 0, Z = 5

    Rotation X & Y

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

    Horizontal Alignment X & Y

    Center

    Vertical Alignment X & Y

    Text Center

    World Size X & Y

    5

  3. 블루프린트 로직을 만들기에 앞서, 먼저 터치패드의 X Y 입력 위치를 저장하고 표시하는데 쓸 변수를 둘 만들어야 합니다. 변수 섹션에서 Text Variables 를 둘 만들어 XPositionTextYPositionText 라 합니다.

    HTGVRMCTouchpad_02.png

  4. 터치패드에서 눌린 현재 위치를 표시하기 위해, 먼저 현재 터치 입력의 X Y Axis Value 를 구한 뒤 저장해야 합니다. 그리고 Set Text 노드를 사용해서 Google VR 모션 컨트롤러에 추가한 Text Render 컴포넌트를 통해 그 정보를 표시하면 됩니다. 블루프린트에서 이 작업을 하기 위해, 다음 노드와 변수를 이벤트 그래프에 추가합니다:

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

    노드 / 변수 이름

    MotionController(R)Thumbstick X

    없음

    ToText(Float)

    없음

    SET_ XPosition_Text(Float)

    없음

    Set Text

    없음

    X_Positiont

    없음

    XPositionText

    없음

    Append

    A Input: X:

    ToText(string)

    없음

  5. 모션 컨트롤러에 붙인 텍스트를 사용하여 입력 위치를 표시하는 로직을 만들어야 합니다. 그러기 위해 MotionController (R)Thumbstick X 의 Axis Value 를 구한 뒤 XPositionText 변수에 저장합니다. 이제 그 정보가 있으면 X_Postion 텍스트를 사용하여 표시할 수 있습니다. 완성된 블루프린트는 다음 그림과 같습니다:

    Copy Node Graph

    이미지를 클릭하면 블루프린트 코드를 복사합니다.

  6. X 축 입력 값이 생겼으니, Y 축 입력 값을 구하는 데도 같은 로직에 MotionController(R)Thumbstick 과 변수만 Y 축을 사용하도록 해주면 됩니다. 완성된 전체 블루프린트는 다음 그림과 같습니다:

    Copy Node Graph

    이미지를 클릭하면 블루프린트 코드를 복사합니다.

  7. 다음, Google VR MC 가 움직일 때 따라가도록 Text Render 컴포넌트를 둘 붙여야 합니다. 블루프린트에서 그 작업을 하기 위해, 다음과 같은 노드를 이벤트 그래프 에 추가하고 그림처럼 연결합니다:

    노드 / 변수 이름

    AttachToComponent

    없음

    X_Position

    없음

    Y_Position

    없음

    Get Motion Controller

    없음

    Google Motion Controller

    없음

최종 결과

블루프린트를 컴파일하고 저장한 뒤, 프로젝트를 스마트폰에 디플로이하고서 Google VR HMD 와 모션 컨트롤러를 집어듭니다. 이제 터치패드를 터치하면 다음 비디오처럼 현재 터치 위치와 수치가 업데이트되는 것이 보일 것입니다:

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

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

태그

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

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

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

네이버 카페
공식 포럼