Unreal Engine 나침반 바: AI로 나침반 HUD 만들기

Unreal Engine의 나침반 바는 세 가지 작은 아이디어로 이루어집니다. 카메라가 바라보는 방향을 각도로 나타낸 값, 각 글자가 제 각도에 맞는 위치에 놓인 글자 한 줄, 그리고 가운데 근처의 글자만 보이게 하는 창입니다. 카메라가 회전하면 글자 줄이 옆으로 미끄러지듯 움직입니다. 가장 쉬운 방법은 AI에게 HUD 요소 전체를 한 번의 요청으로 맡기는 것입니다.

이 튜토리얼에서는 Ultimate Engine CoPilot이 화면 위쪽에 N, E, S, W를 금색으로 표시하는 나침반 바를 만듭니다. 정확한 프롬프트, AI가 네 방향을 모두 테스트한 방법, 그리고 나침반 바의 작동 원리에 대한 쉬운 설명을 확인할 수 있습니다.

완성된 나침반이 하는 일

화면 위쪽의 얇은 바가 지금 바라보는 방향을 보여 줍니다. 카메라를 돌리면 글자가 옆으로 미끄러지듯 움직이는데, 게임에서 흔히 보는 나침반 그대로입니다. 금색 N 다음에 E, 그다음 S, 그다음 W가 오고, 마커 아래의 작은 숫자가 방위각을 도 단위로 알려 줍니다.

Blizzard 박스 아래에서 카메라를 따라 움직이는 나침반 바.

프롬프트

아래 내용을 복사해서 표시되는 각도 범위나 색상을 바꾼 뒤, AI가 무엇을 만드는지 확인해 보세요.

Make a compass bar. Create WBP_CompassBar in /Game/Series/EP37_Compass, a thin horizontal bar at the very top of the screen, 600 pixels wide and centred, below the existing Blizzard box. It shows the direction the player's camera is facing as letters that slide sideways as the camera turns: N, NE, E, SE, S, SW, W, NW, with a small white triangle marker in the middle. The letters for the main directions N, E, S and W are larger and gold, the in-between ones smaller and white. Also show the heading in degrees as a number under the marker, for example 90. Create BP_CompassController in the same folder, an actor that I place once, that adds the widget to the screen and updates it every frame from the player camera's yaw. Treat world +X as North and world +Y as East. Keep the bar width and the number of visible degrees as variables. Place the actor near the player start. Then play test it: turn the camera to face +X and check the heading reads 0 with N in the middle, turn it to +Y and check 90 with E, turn it to -X and check 180 with S, turn it to -Y and check 270 with W, and fix anything that does not work.

중요한 부분은 설정의 마지막 문장인 “Treat world +X as North and world +Y as East”(월드 +X를 북쪽, 월드 +Y를 동쪽으로 취급)입니다. Unreal에는 북쪽이 없고 축만 있습니다. 어느 축이 북쪽인지 알려 주지 않으면 AI가 하나를 골라야 하고, 엉뚱한 방향을 가리키는 나침반이 나올 수 있습니다. 그러니 항상 명시하세요.

AI가 나침반을 만드는 과정

AI는 먼저 프로젝트를 읽습니다. HUD 위쪽에 있는 Blizzard 박스를 찾아 어디서 끝나는지 측정하고, 그 바로 아래에 바를 둘 수 있게 합니다. 그러면 에셋이 나타납니다. 나침반 바 위젯과 컨트롤러 Blueprint입니다.

컨트롤러의 로직은 이렇습니다. Begin Play에서 위젯을 추가하고, Tick에서 카메라의 Yaw를 읽어 글자를 움직입니다. 바의 양 끝으로 갈수록 글자가 서서히 사라지므로 갑자기 튀어나오거나 사라지지 않습니다.

컨트롤러 그래프: 위젯을 추가한 다음, 매 Tick마다 카메라 값으로 갱신합니다.

플레이 테스트

AI는 먼저 카메라를 돌려야 하므로 그 방법부터 찾습니다. 그런 다음 네 방향을 확인합니다.

• +X를 바라볼 때: 방위각은 0이고 N이 가운데에 있습니다.
• +Y를 바라볼 때: 90과 E.
• -X를 바라볼 때: 180과 S.
• -Y를 바라볼 때: 270과 W.

숫자는 컨트롤러에서, 글자는 스크린샷에서 읽는데, N을 둘러싼 NW와 NE처럼 양옆의 이웃 글자도 올바른 위치에 놓여 있습니다. 네 방향 모두 통과합니다.

스크린샷에서 작은 문제가 하나 보였습니다. 마커 삼각형이 가운데 글자의 윗부분에 닿아 있었습니다. 그래서 AI는 바의 높이를 40에서 46픽셀로 조금 키우고 글자를 아래로 옮겼습니다.

리포트

만든 내용과 알아 둘 사항.

바의 너비(600)와 표시되는 각도 범위(180)는 배치한 액터의 변수입니다. 리포트는 몇 가지를 솔직하게 밝힙니다.

• 마지막 변경인 바 높이 증가는 다른 플레이 세션에서 테스트하지 않았습니다. 레이아웃은 컴파일되지만 추가 실행은 하지 않았습니다.
• 바는 Blizzard 박스를 피하기 위해 y=150의 고정된 높이에 있는데, 이 박스는 텍스트가 패널 밖으로 넘칩니다. 이 오프셋은 HUD와 연결되어 있지 않으므로, 박스를 옮겨도 나침반은 따라 움직이지 않습니다.
• 레벨이 저장되지 않았습니다.
• 메인 메뉴 때문에 스크린샷이 어둡게 찍혔습니다. 그래서 영상에서는 한 바퀴를 완전히 도는 실제 플레이 장면도 함께 보여 줍니다.

나침반 바의 작동 원리, 쉽게 설명하면

컨트롤러는 매 프레임 카메라의 Yaw를 가져와 0에서 360까지의 방위각으로 바꿉니다. 0은 +X이고, 우리가 북쪽으로 정한 방향입니다. 각 글자에는 각도가 있습니다. N은 0, E는 90, 이런 식입니다.

컨트롤러는 글자마다 방위각에서 얼마나 떨어져 있는지 계산하고, 이를 바 위의 픽셀 위치로 바꿉니다. 표시 범위를 벗어난 글자는 숨기고, 가장자리 근처의 글자는 서서히 흐려집니다. 바의 너비와 표시 각도 범위가 변수이므로, 숫자 두 개만 바꿔서 넓은 나침반이나 좁은 나침반을 만들 수 있습니다.

확장 아이디어

• 나침반 위의 마커. 바를 따라 움직이는 퀘스트 마커 같은 것입니다. Unreal Engine 목표 마커를 참고하세요.
• 마커 아래에 미터 단위로 표시되는 마커까지의 거리.
• 카메라를 움직이지 않을 때 서서히 사라지는 바.

나침반 프롬프트를 위한 네 가지 팁

1. 월드의 어느 축이 북쪽인지 적으세요.
2. 바의 크기와 위치를 적으세요.
3. 어떤 글자를 크게, 어떤 글자를 작게 할지 적으세요.
4. 네 방향을 모두 테스트하도록 AI에게 요청하세요.

자주 묻는 질문

Unreal Engine 5에서 나침반 바는 어떻게 만드나요?

매 프레임 카메라의 Yaw를 0에서 360까지의 방위각으로 읽고, 각 글자의 각도와 방위각의 차이에 따라 글자 줄의 위치를 정한 뒤, 표시 범위 밖의 글자는 숨기세요.

Unreal Engine에서 북쪽은 어느 방향인가요?

Unreal에는 북쪽이 없고 축만 있습니다. 하나를 골라 요청에 적어 주세요. 여기서는 +X가 북쪽, +Y가 동쪽입니다.

AI는 왜 바를 더 높게 만들었나요?

스크린샷에서 마커 삼각형이 가운데 글자의 윗부분에 닿아 있었기 때문입니다. AI는 바의 높이를 40에서 46픽셀로 키우고 글자를 아래로 옮겼습니다.

프로젝트에서 직접 사용해 보세요

Ultimate Engine CoPilot으로 무엇을 만들 수 있는지 제품 페이지에서 확인하거나, Fab에서 받아 보세요. AI Blueprint 생성기가 어떻게 작동하는지 확인해 보세요.

이 시리즈의 다른 빌드: Unreal Engine 목표 마커, Unreal Engine 패스트 트래블, 그리고 Unreal Engine 줌 시점.