언리얼 엔진 5 마우스 움직임의 위치를 위젯(Widget)에 출력하기

 지난 블로그에서는 언리얼 엔진 5에서 마우스의 움직임을 반영한 좌표 값을 출력하였다. 이번에는 블루프린트의 프린트 스트링 노드 말고 위젯을 사용하여 좌표 값을 출력해 보았다.

 

 먼저 언리얼 엔진의 콘텐츠 브라우저를 누르고 아래 사진처럼 오른쪽 마우스 버튼을 누른 뒤 유저 인터페이스-위젯 블루프린트(Widget Blueprint) 순서로 누른다.

 

 

 생성한 위젯 블루프린트를 누른 뒤 아래 사진의 왼쪽처럼 PANEL을 찾은 뒤 Grid Panel을 누른다. 그러면 사진의 중앙에 초록색 직사각형이 형성된다. 

 

 그리드 패널 안에는 아래 그림 좌측의 COMMON에서 Text라는 기능을 드래그한 뒤 그리드 패널 안에 집어넣는다. 아래의 사진은 4개의 텍스트를 집어넣었다. 원래는 그리드 패널 말고 아래 사진 좌측에 보이는 COMMON에 보이는 Border기능을 활용해 텍스트를 집어넣으려고 했으나 텍스트가 한 개만 넣을 수 있다. 그래서 그리드 패널을 활용해 여러 개의 텍스트를 넣었다.

 

 아까 언급한 텍스트에는 마우스의 좌표 값이 들어간다. 이를 위해 아래의 사진 우측처럼 Graph 버튼을 누른 뒤 사진의 좌측에 보이는 Variable에서 변수를 생성한다. 이 변수는 Text 형으로 지정한다. 

 

 4개의 텍스트 중 한 개를 선택 한 뒤 아래 사진 우측의 Binding 버튼을 누르면 Graph에서 생성한 변수를 불러올 수 있다. 그러면 해당 텍스트의 문구는 변수에 따라 결정이 된다.

 

 이러한 방법을 이용해 아래의 사진처럼 꾸몄다. 그리트 패널 안 텍스트들의 이름들을 각각 X axis, Y axis, --X--, --Y-- 로 지었다. --X-- 와 --Y-- 에는 아까 언급한 그래프에서 변수를 생성하는 방법을 활용해 각각 Widget Text -x축, Widget Text -y축이라는 변수를 바인딩하였다. 그리드 패널 안에는 아래 사진 좌측에 보이는 Border를 집어넣고 색상을 연한 초록색을 입혔다.

 

 위에서 언급한 변수에 마우스 움직임의 좌표 값을 넣기 위해 아래의 사진처럼 구성했다. Create 위젯 노드를 이용하여 만들어진 위젯을 찾아 넣는다. 그 후 위젯 안에서 만든 변수인 Widget Text -x축, Widget Text -y축을 검색하여 불러온다. 이 변수들에는 각각 라운드 노드를 사용한다. 라운드 노드는 입력 값의 반올림한 값을 출력해 준다. 반올림하는 이유는 마우스 움직임의 좌표 값을 출력할 때 소수점까지 나오게 되면 보기 힘들어서 사용하게 되었다. Add to Viewport는 언리얼 엔진 화면 즉, 뷰포드 상에 해당 위젯이 보이게 해 준다. 2개의 변수 및 애드 투 뷰포트 노드의 타깃은 모두 Create 위젯의 리턴 밸류에 연결해 준다.

 

 저번 블로그에 만들어 둔 마우스 움직임을 출력해 주는 노드 구성을 이번에 만든 노드 구성과 연결시켰다. 아래의 사진은 그러한 구성을 알려준다. Get mouse Position on Viewport 노드에서 나온 x, y 축 데이터를 각각 Widget Text -x축, Widget Text -y축에 연결한다.

 

 위의 구성을 토대로 아래의 영상을 제작하였다. 현실의 마우스 움직임에 따라 언리얼 엔진 상의 마우스 움직임이 변화하는 모습이 보인다. 또한 마우스 위치 값에 해당하는 데이터가 위젯을 통해 출력된다. 언리얼 엔진 속 뷰포트의 왼쪽 맨 위가 좌표상에서 (0,0)이다. 이를 기준으로 마우스가 아래로 내려가면 Y축이 증가하고 오른쪽으로 가면 x축이 증가한다. 물론 x축은 -0.05를 곱해서 증가하는 게 아니라 감소하는 모습으로 영상 안에는 비친다. 참고로 위젯은 내가 뷰포트 상에서 마우스로 이리저리 돌아다녀도 화면에 고정되어 있다. 움직이지 않으며 계속해서 x, y축 데이터를 출력한다.