[UE5] 블루아카이브 TPS게임 개발일지 (12) - 크로스헤어 제작

이어서 조준선을 제작할 것이다.

 

언리얼 엔진에서 UI를 만들기 위한 도구는 UMG이다.

https://docs.unrealengine.com/5.3/ko/umg-ui-designer-quick-start-guide-in-unreal-engine/

UMG UI 디자이너 퀵스타트 가이드

 

 

 

UMG를 화면에서 사용하기 위해서는 우선 블루프린트를 만들어야 한다.

 

 

블루프린트 생성 메뉴에서 부모 클래스를 고를 때, All Classes 탭에 'UserWidget'을 검색하여 선택하자.

 

 

 

생성한 위젯 블루프린트를 연 화면

 

좌측 Palette 패널에서 필요한 UI들을 좌측 하단 Hierarchy 혹은 비주얼 디자이너(가운데 큰 화면)으로 가져올 수 있다.

 

 

화면 구성에 대해서는 여기를 참고하자.

https://docs.unrealengine.com/5.3/ko/widget-blueprints-in-umg-for-unreal-engine/

위젯 블루프린트

 

 

 

우선, 검색창에 canvas를 입력해 Canvas Panel을 가져와주었다.

큰 사각형이 생긴 것을 볼 수 있다.

 

Canvas Panel은 위젯을 위에 배치하여 앵커(기준점)을 설정할 수 있는 패널이다.

 

 

유니티의 Canvas와 같다. 유니티와 마찬가지로 자식의 순서에 따라 렌더링 순서가 결정된다. (밑에 있는 것이 더 위에 렌더링)

 

 

Canvas 아래에 위젯들 추가, 각종 설정 및 이벤트 그래프 제작은 다음 영상을 따라하였다.

https://www.youtube.com/watch?v=55c6q8oY5x0&ab_channel=UnrealVox

 

 

 

 

CrosshairSpread 변수를 이용하여, 크로스헤어의 벌어짐을 조절할 수 있다.

 

 

이제 캐릭터 블루프린트에서 Crosshair 블루프린트를 참조하고, CrosshairSpread 변수를 조절하여 조준선이 벌어지고 줄어들게 할 것이다.

 

영상에서는 항상 조준선이 보이도록 하였지만, 본 프로젝트에서 수정할 것은 다음과 같다.

• 조준선은 조준을 하고 있을 때만 표시한다.
• 총을 발사하면 순간적으로 조준선이 크게 벌어진다.

 

 

BeginPlay에서는 크로스헤어 위젯 블루프린트를 호출하고, Crosshair에 할당한다. 그리고 Add to Viewport를 수행하여 위젯 블루프린트를 화면 상에 그린다.

 

영상과 다른 점은, Set Visibility에서 Visibility를 Hidden으로 설정함으로써 조준선이 보이지 않는 것을 초기 상태로 한 것이다.

 

 

IA_Aim의 Triggered에서 크로스헤어 표시로 이어진다.

 

영상과 마찬가지로 Get Velocity로 캐릭터의 이동 벡터 획득, 벡터의 길이를 구하여 Map Range Clamped로 값을 변환한다.

(0 ~ 450을 10 ~ 100으로 매핑하였다)

Vector Length의 값을 그대로 쓰기에는 너무 큰 상황인데, 이럴 때 Map Range Clamped를 통해 새로운 스케일로 값을 매핑해줄 수 있다.

 

매핑된 값을 Crosshair(앞서 만든 위젯 블루프린트의 참조)의 CrosshairSpread에 Set해준뒤, Crosshair를 Set Visibility를 통해 화면에 표시한다.

 

 

캡쳐를 위해 잠시 노드를 옮겼다.  IA_Aim의 Completed에서 크로스헤어 비활성화로 이어지고 있는 것을 볼 수 있다.

 

별다른 작업 없이 Set Visibility를 통해 크로스헤어를 꺼주었다.

 

 

 

새로 추가한 기능.

 

현재 Crosshair Spread는 캐릭터의 이동 속도 단 하나에 의해 좌우되고 있다.

 

총을 쏘면 크로스헤어가 순간적으로 벌어져야 보는 맛이 있을 것 같아, 그렇게 바꿔보았다.

 

 

일전에 부드러운 수평 조준 이동을 구현했던 것 처럼(https://ciel45.tistory.com/15)(포스팅 후반부),

Lerp 노드를 이용하고, 그 Alpha 값을 Timeline을 통해 전달받도록 하였다.

 

Fire 인풋이 들어가면 조준선의 초기 spread를 저장해놓고, Lerp 노드의 B(목표 값)으로 설정해 준다.

Lerp노드의 A(시작 값)은 임의로 적당히 큰 150으로 설정해주었다.

 

Timeline은 진행됨에 따라 내부에서 0에서 1로 서서히 증가하는 Alpha 값을 뱉어준다. 이것을 Lerp의 Alpha에 연결시켜 A에서 B로 서서히 변화하는 값을 만들어줄 수 있다.

Timeline의 Update 핀을 Set Crosshair Spread으로 연결시켜줌에 따라, Spread가 A에서 B로 부드럽게 바뀌게 하였다.

 

Timeline의 내부. 0.2초의 시간 동안 0에서 1로 증가하는 트랙이 들어가있다.

 

 

총을 쏠 때 크로스헤어가 벌어지는 것을 확인할 수 있다.