언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

GoogleVR 터치패드 사용

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

Choose your operating system:

Windows

macOS

Linux

필요한 사전지식

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

HTGVRMCTouchpad_Hero_Image.png

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

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

단계

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

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

    HTGVRMCTouchpad_00.png

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

    HTGVRMCTouchpad_01.png

    클릭하면 이미지 원본을 확인합니다. 참고로 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 를 둘 만들어 XPositionText 및 YPositionText 라 합니다.

    HTGVRMCTouchpad_02.png

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

    HTGVRMCTouchpad_03.png

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

    노드 / 변수 이름

    값

    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

    HTGVRMCTouchpad_04.png

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

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

    Copy Node Graph

    HTGVRMCTouchpad_05.png

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

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

    노드 / 변수 이름

    값

    AttachToComponent

    없음

    X_Position

    없음

    Y_Position

    없음

    Get Motion Controller

    없음

    Google Motion Controller

    없음

최종 결과

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

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

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

태그
GoogleVR
언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
취소