[UnrealEngine5] F-18 전투기 날리기(3)-전투기 UI 구성하기(Feat. TOPGUN:MAVERICK)

프로젝트 게시글
[UnrealEngine5] F-18 전투기 날리기(1)-전투기 움직임 구현(Feat. TOPGUN:MAVERICK)
[UnrealEngine5] F-18 전투기 날리기(2)-전투기 모델 적용하기(Feat. TOPGUN:MAVERICK)

[UnrealEngine5] F-18 전투기 날리기(3)-전투기 UI 구성하기(Feat. TOPGUN:MAVERICK)🚩
[UnrealEngine5] F-18 전투기 날리기(4)(完)-미션 생성하기(Feat. TOPGUN:MAVERICK)

 

계획

1. Cube로 비행 움직임 구현(controller까지 받음) ✅
- 힘 방향 계산
- 힘 적용
2. 움직임에 맞게, 기체의 rotation구현 ✅
3. cube를 F-18모델로 변경 ✅
4. F-18모델의 애니메이션을 추가(활성화) ✅
5. 전투기 UI 구성하기 🔨
6. 탑건2에 등장한 마지막 미션 구현하기 👉

이제 F-18이 자유자재로 기동하고, 시각적인 효과들도 구현이 되었다.
하지만 현재 속도, 고도, 기울어진 정도, 등등 비행에 관한 정보들을 직감적으로만 판단하니 조작 난이도가 높다. 따라서 비행을 도와줄 정보들을 UI에 그려보자

진행

5. 전투기 UI 구성하기

- 추가할 정보들

전투기 hud 설명

에이스알파

정말 많다

실제 비행에서 사용하는 모든 정보를 가져올 필요는 없기에, 위 사진에서 필요한 정보만 가져와본다.
1. 표시속도, 고도
- get velocity, get world location 로 계산 가능
2. 가상 지평선
- 실선, 5, 10, 15 형태로 그려진 기수 표시계
- Pitch를 통해 역산 가능
3. Flight Path Maker(그림에서 속도벡터)
- 실제로 기체가 날아가는 방향
- 해당 지점을 계속 바라보고 있다면, 그 지점으로 이동한다
- get velocity가 vector로 나오므로 표시 가능(원점 + get velocity vector를 yz-plane(사용자 화면)에 projection)
4. 현재 G값
- 속도, 각속도를 통해 회전반경을 계산 -> 원심력 계산
- 비행시 중력 가속도에 대한 좋은 포스팅

이정도의 정보만 있어도 플레이하는 데에는 문제가 없을 것 같다. 우선 디자인부터 진행해보자.

- UI 디자인

HUD UI 디자인

좌측에는 속도와 중력가속도, 중앙에는 pitch 표시 및 flight path maker, 우측에는 고도(altitude)를 배치하였다.
pitch Ladder는 하단부를 가리지 않으면 기체위에 표시가 되기 때문에 상단부만을 보여주는 canvas를 만들고 clip bound로 하단을 가렸다.

- 1. 표시속도, 고도

이미 계산된 정보를 widget에서 가져오기만 하면 된다.

표시속도와 고도는 정보는 쉽게 가져올 수 있었다. 하지만 그렇게 가져오니 float의 길이가 너무 길어서 보기에 좋지 않아서, 단위를 붙여주는 매크로를 만들었다.

K단위를 붙이거나 뗄 수 있는 매크로

정말 농담이 아니라 blueprint로 저런 로직 짜려니까 머리가 너무 아프고, 스트레스 받는다. 어서 빨리 C++로 넘어가자..

속도(좌측), 고도(우측) 정보가 표시되고 있다.

- 2. 가상 지평선

우선 widget에서 pitch ladders를 구현할 때, 하나의 canvas밑에 넣어두었다. 따라서 해당 canvas의 angle과 height만 변경해줌으로서 pitch와 roll을 바로 표시할 수 있었다.

roll과 pitch가 표시된다(확인을 위해 clip bound 해제)

widget의 blueprint에서 eventick마다 transform정보를 받아와 변환을 한다.

- 3. Flight Path Maker(그림에서 속도벡터)

이 간단한 구현을 생각해내는데 꽤 걸렸다는게 아이러니.. 벡터 감각을 빨리 예전만큼 올리자

기체의 속도벡터를 기체의 회전값만큼 unrotate시키면 y값이 기체 기준 가로축 움직임, z값이 높이축 움직임으로 path marker의 x,y의 값으로 대응시켜주면 된다. 해당 값은 속도에 비례하므로 화면에 적당히 그려질 수 있도록 값을 곱해준다.

path marker를 한 지점에 고정하면 그 지점으로 계속해서 이동한다.

path marker는 현재 기체의 이동 방향과 속도를 알 수 있는 것 뿐만 아니라, 원하는 지점에 고정시키면 기체가 최종적으로는 그 방향으로 날아가게 된다. 어찌보면 당연할 수 있지만, 생각보다 신기하고, 조종이 편해진다!

- 4. 현재 G값

기존에는 원심력을 계산하여 G값을 구하려했지만, 기체에 걸리는 모든 가속도 값을 구해도 된다고 판단. 속도를 통해서 가속도를 구하면 된다.

최근 속도를 저장하고 현재 속도와의 차이를 통해 가속도를 구한다. z축에 기본 중력가속도도 넣어준다.

G값이 잘 바뀐다. 기존에는 너무 빠른 나머지 G값이 커서, 엔진 출력을 낮춰주었다.

결과

https://youtu.be/qNP0LBags5c

이제 UI 구성이 모두 끝났다. 기존에 있던 문제들도 해결하면서 개발하다보니 생각보다 개발 시간이 더 걸리고 있다. 이제 마지막 미션을 게임으로 구성하러 가보자!!