Gear VR HMD 터치패드 사용

Gear VR HMD 터치패드 구성법입니다.

Windows
MacOS
Linux
Prerequisite Topics

This page assumes you have prior knowledge of the following topics. Please read them before proceeding.

HTTouchPad.png

Gear VR HMD 측면에는 터치패드가 있으며, 사용자는 이 터치패드를 두드리거나(tap) 그어(swipe) 현재 보고 있는 VR 프로젝트와 상호작용할 수 있습니다. 여기서는 여러가지 터치패드 입력에 따라 다른 텍스트를 표시하도록 Gear VR HMD 터치패드를 구성하는 법을 살펴보겠습니다.

단계

아래는 Gear VR 터치패드에 어떤 종류의 작업을 하고있는지 표시할 수 있도록 플레이어 폰을 구성하는 단계별 방법입니다.

  1. 플레이어 폰 블루프린트를 열고 컴포넌트 탭에서 TextRender 컴포넌트를 새로 추가하고 부모를 VRCamera 로 설정한 뒤 다음과 같이 설정하여 나중에 어떤 동작을 수행했는지 확인할 수 있도록 합니다.

    HTTouchPad_Pawn_Setup.png

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

    프로퍼티 이름

    기본값

    Location

    X:100 Y:0 Z:0

    Rotation

    X:100 Y:0 Z:180

    Text

    TEMP TEMP TEMP

    Horizontal Alignment

    Center

    Vertical Alignment

    Text Center

  2. 입력이 탭인지 스와이프인지 알아내기 위해 터치의 처음과 마지막 위치 사이 거리를 트래킹해야 합니다. 그 거리가 일정 수치 미만이면 탭이, 이상이면 스와이프가 일어납니다. 그러기 위해 변수 섹션에서 Vector 2D 변수를 둘 만들어 이름을 다음과 같이 짓습니다:

    HTTouchPad_Var_Setup.png

    • TouchStart

    • TouchEnd

  3. 그리고 Text 변수를 다섯 개 추가하여 탭 또는 스와이프가 일어났는지, 스와이프는 어느 방향인지 표시하기 위해 사용합니다. Text 변수를 다음과 같은 이름과 값으로 GearVR_Pawn 블루프린트에 추가합니다.

    HTTouchPad_Var_TouchSwipe.png

    노드 이름

    기본값

    TouchTap

    TouchTap

    SwipeLeft

    SwipeLeft

    SwipeRight

    SwipeRight

    SwipeUp

    SwipeUp

    SwipeDown

    SwipeDown

폰에 필수 컴포넌트와 변수를 전부 추가했으니, 다음에는 탭인지 스와이프인지 알아내기 위해 해야 할 작업을 살표보겠습니다.

터치 & 스와이프 입력 구성

여기서는 사용자가 방금 터치패드를 탭했는지 스와이프했는지 알아내기 위한 초기 로직을 GearVR_Pawn 블루프린트에 구성하는 방법을 살펴보겠습니다.

  1. 이벤트 그래프에 우클릭하고 다음과 같은 블루프린트 노드를 검색하여 추가합니다:

    HTTouch_TouchStartEndNodes.png

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

    노드 이름

    기본값

    Touch

    N/A

    Set Touch Start

    N/A

    Set Touch End

    N/A

    Get Player Controller

    N/A

    Get Input Touch State

    N/A

    Make Vector 2D

    N/A

  2. 터치 첫 위치와 마지막 위치를 기록하여 저장한 뒤 나중에 그 둘 사이 거리를 사용하여 탭인지 스와이프인지를 확인할 것입니다. 그러기 위해 먼저 Get Player Controller 노드를 Get Input Touch Start 에 연결하여 사용자의 첫 입력 위치를 트래킹합니다. 작업을 쉽게 하기 위해, Location X 와 Y 를 Make Vector 2D 노드에 연결한 뒤 Make Vector 2D 노드 출력을 Touch Start 와 Touch End 변수의 입력에 연결합니다. 터치 시작과 끝을 쉽게 저장할 수 있도록 도와줍니다. 마지막으로, Input Touch Pressed 를 Touch Start 변수에 연결한 뒤 Input Touch Released 를 Touch End 변수에 연결합니다. 이 작업을 완성한 블루프린트는 다음과 같습니다.

    HTTouch_TouchStartEndSetup.png

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

  3. Touch Start 와 Touch End 변수에 데이터가 채워졌으니, 탭인지 스와이프인지 결정을 돕는 로직을 구성할 차례입니다. 먼저 이벤트 그래프에 다음과 같은 노드를 추가합니다.

    HTTouch_TapSwipeNodes.png

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

    노드 이름

    기본값

    Touch Start

    N/A

    Touch End

    N/A

    Vector2d - Vector2d

    N/A

    Vector 2d Length

    N/A

    Break Vector 2D

    N/A

    Absolute (Float)

    N/A

    float < float

    N/A

    float > float

    N/A

  4. 탭인지 스와이프인지 알아내기 전, 먼저 Touch Start 와 Touch End 변수의 차이를 구해 그 거리를 알아내야 합니다. 블루프린트에서 그 작업을 하기 위해, Touch Start 와 Touch End 변수 둘 다 Vector2d - Vector2d 노드 입력에 연결합니다.

    HTTouch_TapOrSwipeLogic_01.png

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

  5. 탭인지 스와이프인지 구분하기 위해서는 Touch Start 와 Touch End 변수의 길이 또는 세기를 측정하면 됩니다. 두 변수의 길이가 X 보다 낮으면 탭을, 크면 스와이프가 일어납니다. 블루프린트에서는 Vector2d - Vector2d 노드의 출력을 받아 Vector 2d Length 노드의 입력에 연결합니다. 그리고 Vector 2d Length 의 Return Value 를 float > float 의 첫 번째 입력에 연결하고 두 번째 입력에는 20 을 입력합니다. 탭과 스와이프를 가르는 거리 기준이 됩니다.

    HTTouch_TapOrSwipeLogic_02.png

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

    float > float 노드의 두 번째 입력 수치를 조절하는 것으로 터치냐 스와이프냐 결정하는 거리를 늘이고 줄일 수 있습니다.

  6. 스와이프 좌우 방향을 확인하기 위해서는, Touch Start 와 Touch End 거리 X 값이 0 보다 작은지 큰지를 확인해야 합니다. 거리가 0 보다 크면 왼쪽 스와이프, 그렇지 않으면 오른쪽 스와이프입니다. 그러기 위해 먼저 Vector2d - Vector2d 노드 출력을 Break Vector 2D 노드 입력에 연결합니다. 그리고 Break Vector 2D 노드의 X 출력을 float < float 노드 첫째 입력에 연결하고 둘째 입력은 값 0 으로 놔둡니다.

    HTTouch_TapOrSwipeLogic_03.png

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

  7. 스와이프 상하 방향을 확인하기 위해서는, Touch Start 와 Touch End 거리 Y 값이 1 보다 작은지 큰지를 확인해야 합니다. Y 값이 1 보다 크면, 위쪽 스와이프, 그렇지 않으면 아래쪽 스와이프입니다. 그러기 위해 Break Vector 2D 노드의 Y 출력을 float > float 노드의 첫째 입력에 연결한 뒤 float > float 노드의 둘째 입력은 1 로 설정합니다.

    HTTouch_TapOrSwipeLogic_04.png

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

탭인지 스와이프인지 구분하는 블루프린트 로직이 완성되었으니, 다음에는 이를 통해 사용자가 탭을 했는지 스와이프를 했는지, 스와이프는 어느 방향에서 시작했는지 알려주는 텍스트를 표시하는 방법을 살펴보겠습니다.

탭 & 스와이프 구분

여기서는 탭과 스와이프를 구분하고, 어떤 유형의 동작이 일어났는지 텍스트도 표시하도록 블루프린트를 구성해 보겠습니다.

  1. 탭인지 스와이프인지 알아내기 위해 이벤트 그래프에 Branch 노드를 추가하고 Set Touch End 출력을 Branch 노드 입력에 연결합니다. 그리고 float > 20 노드의 Return Value 를 Branch 노드의 Condition 입력에 연결합니다. 완료되면 이 로직은 Touch Start 와 Touch End 사이 거리를 검사하여 20 언리얼 유닛 (UU) 미만이면 탭이 일어납니다. 20 UU 이상이면 스와이프가 일어납니다.

    HTTouch_TapOrSwipeSetup_01.png

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

  2. 탭과 스와이프 차이를 알았으니, 다음에는 스와이프 상하좌우를 알아내야 합니다. 먼저 Absolute(Float) 노드와 float > float 노드 중 하나를 복제하여 아래 그림처럼 연결합니다. 블루프린트 이 부분은 X 와 Y 절대치를 비교하여 어느쪽이 크고 작은지 알아낸 뒤 그에 따라 다른 동작을 합니다. 예를 들어 X 와 Y 절대치 중 X 가 크다면 좌우 스와이프가, 작다면 상하 스와이프가 일어난 것입니다.

    HTTouch_TapOrSwipeSetup_02.png

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

    두 벡터의 길이를 비교할 때는, 항상 벡터 절대치를 사용하도록 해야합니다. 그래야 음수 부호를 제거하고 양수값만 비교할 수 있습니다.

  3. 기존 Branch 노드의 True 출력을 끌어 놓고 실행가능 액션 목록에서 Branch 노드를 검색하여 추가합니다. 그리고 float > float 노드의 Return Value 를 끌어 새로 만든 Branch 노드의 Condition 에 연결합니다. 이제 사용자가 좌우 스와이프를 하면 True 옵션이, 상하면 False 옵션이 발동됩니다.

    HTTouch_TapOrSwipeSetup_03.png

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

  4. 이벤트 그래프에 Branch 노드를 두 개 더 추가한 뒤 그 입력을 이전 단계에서 추가한 Branch 노드의 True 와 False 출력에 연결합니다. 이 두 Branch 노드는 사용자가 특정 방향으로 스와이프할 때 표시할 것을 제어합니다. True 입력에서 오는 Branch 노드는 좌우 스와이프, False 는 상하 스와이프입니다.

    HTTouch_TapOrSwipeSetup_04.png

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

  5. 마지막으로 좌우 스와이프를 구분하기 위해 float < 0 를 지난 번 추가한 첫 Branch 노드의 Condition 에 연결합니다. 그리고 상하 스와이프 구분을 위해 float < 1 을 둘째 Branch 노드 Condition 입력에 연결합니다.

    HTTouch_TapOrSwipeSetup_05.png

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

블루프린트 탭과 스와이프 기능이 구성되었으니, 다음에는 Gear VR 터치패드에 적용된 입력 유형에 따라 다른 텍스트를 표시하는 법을 살펴보겠습니다.

터치 & 스와이프에 따라 다른 동작 수행

탭과 스와이프를 구분 뿐만 아니라 스와이프 방향까지도 구분하는 기능이 추가되었으니, 이제는 GearVR_Pawn 블루프린트에 어떤 유형의 입력이 일어났는지 표시하도록 구성해 보겠습니다.

  1. 탭인지 스와이프인지 처리하는 첫 Branch 노드의 False 출력을 끌어놓고 실행가능 액션 목록에서 Set Text (TextRender) 노드를 검색하여 추가합니다.

    HTTouch_TapOrSwipeDisplayText_01.png

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

  2. TouchUp Text 변수를 끌어 이벤트 그래프에 놓고 Get 옵션을 선택합니다. 그리고 그것을 Set Text 노드의 Value 입력에 연결합니다.

    HTTouch_TapOrSwipeDisplayText_04.png

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

  3. Up, Down, Left 방향에 대해서도 전 단계를 반복합니다. 이 작업이 완성된 블루프린트는 다음과 같습니다:

    Copy Node Graph

    HTTouch_TapOrSwipeDisplayText_02.png

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

    Copy Node Graph (노드 그래프 복사) 옵션을 클릭하고 블루프린트에 붙여넣으면 이 블루프린트 완성 버전을 복사할 수 있습니다.

최종 결과

GearVR_Pawn 블루프린트를 컴파일 및 저장한 후, UE4 프로젝트를 삼성 갤럭시 스마트폰에 디플로이하고 Gear VR HMD 에 폰을 넣습니다. 손가락으로 터치패드를 탭 또는 스와이프하면, 아래 비디오처럼 수행한 동작이 텍스트로 표시될 것입니다.

Gear VR 터치패드 탭 또는 스와이프를 했는데 텍스트가 표시되지 않는다면, Text 변수의 Default Value 에 텍스트를 입력했는지 확인하시기 바랍니다.

HTTouch_TapOrSwipeDisplayText_03.png

UE4 프로젝트 다운로드

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

Tags
GearVR
Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback