새해에도 열심히 달립니다!
VR에서는 컴퓨터처럼 키보드, 마우스가 없기에 컨트롤러를 이용하여 UI를 직접 제작해야 합니다.
그 중에서도 가장 익숙한 UI는 컨트롤러부터 쏘아져 나가는 레이저를 통하여 버튼을 클릭하는 것이죠.
이번 포스트에서는 간단하게 레이저를 마우스처럼 이용하는 UI를 제작하겠습니다.
먼저 예제로 사용할 UI를 만들겠습니다.
VR에 사용되는 UI는 자주 사용해왔던 평범한 User Widget과 똑같이 만듭니다.
그리고 VR이기 때문에 카메라 전면 또는 Map 안에 UI가 보이도록 배치해줍니다.
그리고 사용하는 Motion Controller Blueprint 창을 열어 'Widget Interaction' Component를 추가해줍니다.
Widget Interaction은 Widget과 상호작용 가능한 Component를 말합니다.
Widget Interaction은 일직선이기 때문에 손의 방향과 일치해야 하므로 'Mesh' 또는 'Motion Controller'에 속하도록 추가해줍니다.
그리고 Widget Interaction의 Interaction 옵션 중 Distance를 길게 잡아줍니다.
Distance를 길게 잡아주는 이유는 클릭할 수 있는 범위를 말하는 것이기 때문에 길게 잡아주는 것이 좋습니다.
Widget Interaction을 추가해주었으면 마우스 좌클릭과 같은 설정을 해주기 위해 Event Graph로 넘어갑니다.
먼저 컨트롤러의 입력을 받는 Event Node를 추가합니다.
Grip, Trigger 등 원하는 것으로 하면 됩니다.
그리고 추가한 노드가 Widget과 상호작용을 할 수 있도록 'Point Key' 노드를 추가합니다.
Press는 눌렀을 때, Release는 떼었을 때입니다.
저는 마우스와 같은 설정을 원하기 때문에, 먼저 Left Mouse Button으로 Key 값을 설정하였습니다.
위의 노드가 실행될 때, Widget Interaction은 Left Mouse Button을 누르고 떼는 작용과 같은 역할을 하게 됩니다.
위처럼 설정한 후 실행하면 클릭은 되지만 어디를 가리키는지 전혀 보이지 않습니다.
때문에 레이저와 같은 역할을 하기 위해 Material과 Particle System을 추가하겠습니다.
[Material과 Particle 설정에 대한 건 저도 잘 모르기에 따라만 했습니다...]
Material과 Particle System을 추가하여 레이져와 같은 효과를 주기 위한 설정을 넣어줍니다.
Material의 설정은 아래 사진과 같습니다.
Particle System도 마찬가지로 설정해줍니다.
먼저 Emitters에 마우스 우클릭을 하여 위의 사진처럼 추가해줍니다.
[Add]
TypeData -> Beam Data
Beam -> Source, Target
Color -> Initial Color
[Delete]
Color Over Life
Emitters의 설정은 아래의 사진과 같습니다.
[Required] * 위에 생성한 Material
[Initial Size]
[Initial Color]
[Source]
[Target]
Emitters의 설정을 완료하였으면 이제 레이저를 그리는 일만 남았습니다.
레이저를 그리기 위해 다시 컨트롤러의 Event Graph 창을 엽니다.
Component로 생성한 Particle System을 추가합니다.
그리고 Event Tick 노드에 'Line Trace By Channel' 노드를 생성하여 연결해줍니다.
Start의 값으로는 컨트롤러의 위치, End의 값으로는 컨트롤러의 Forward x 길이를 넣어주시면 됩니다.
다음으로 Particle System Component의 Beam Target Position 노드에는 레이저의 끝
Beam Source Point 노드에는 레이저의 시작 값을 설정하면 컨트롤러의 위치에 따라 레이저가 그려집니다.
[Line Trace By Channel]
[Draw Trace]
Widget이나 벽에 부딪힌 효과는 (Out Hit -> Location - Get Forward Vector)를 하면 부딪힌 위치가 나옵니다.
그 위치에 원하는 효과를 추가해주시면 됩니다.
이를 이용하여 원하는대로 UI를 제작하여 활용하시면 됩니다!!