Unreal Engine 아이템 바: AI로 퀵 선택 핫바 만들기

Unreal Engine의 아이템 바는 세 가지 작은 아이디어로 이루어집니다. 저마다 모양이 있는 슬롯 한 줄, 선택된 슬롯을 나타내는 숫자 하나, 그리고 그 숫자를 바꾸는 슬롯별 키입니다. 테두리, 크기, 어두워지는 효과, 이름까지 화면에 보이는 모든 것은 그 숫자 하나에 반응할 뿐입니다. 가장 쉬운 방법은 AI에게 핫바 전체를 한 번의 요청으로 맡기는 것입니다.

이 튜토리얼에서는 Ultimate Engine CoPilot이 1, 2, 3 키로 고르는 슬롯 세 개짜리 퀵 선택 바를 만듭니다. 정확한 프롬프트, AI가 모든 키를 테스트한 방법, 그리고 아이템 바의 작동 원리에 대한 쉬운 설명을 확인할 수 있습니다.

완성된 바가 하는 일

화면 왼쪽 아래에 작은 슬롯 세 개가 있습니다. 빨간 보석, 파란 보석, 초록 보석입니다. 첫 번째 슬롯이 선택되어 있어서 금색 테두리가 둘러져 있고 다른 슬롯보다 조금 크며, 위의 이름에는 “Fire”라고 표시됩니다. 2를 누르면 테두리가 파란 보석으로 옮겨 가고 이름은 “Frost”가 됩니다. 3을 누르면 초록 보석이고 “Heal”입니다. 1을 누르면 다시 Fire로 돌아옵니다.

초록색 Heal 슬롯이 선택된 바: 금색 테두리에 온전한 크기이고, 나머지는 어둡게 처리됩니다.

프롬프트

아래 내용을 복사해서 색상을 바꾸거나 네 번째 슬롯을 추가한 뒤, AI가 무엇을 만드는지 확인해 보세요.

Make a quick-select item bar. Create WBP_ItemBar in /Game/Series/EP38_ItemBar, a row of three square slots at the bottom left of the screen, above the existing ability bar and clear of it, each 72 pixels wide with the key number 1, 2 or 3 in the corner and a coloured gem in the middle: red for Fire, blue for Frost and green for Heal. The selected slot has a gold border and is scaled up to 115 percent, the other two are dimmed to 55 percent. Above the bar, show the name of the selected item, Fire, Frost or Heal. Create BP_ItemBarController in the same folder, an actor that I place once, that adds the widget on BeginPlay and listens for the keys 1, 2 and 3 to select the matching slot. The change animates over 0.15 seconds. Slot 1 is selected at the start. Keep the slot size and the animation time as variables. Place the actor near the player start. Then play test it: check slot 1 is selected at the start, press 2 and check slot 2 is selected and the name reads Frost, press 3 and check Heal, press 1 and check Fire, and fix anything that does not work.

두 숫자 115퍼센트와 55퍼센트를 보세요. “선택된 슬롯을 강조해 주세요”라고만 말하면 AI가 알아서 정합니다. 숫자를 알려 주면 원하는 모습을 처음부터 얻을 수 있습니다. 그리고 작은 디테일이 하나 더 있습니다. “above the existing ability bar and clear of it”(기존 어빌리티 바 위에, 겹치지 않게)입니다. 화면에 이미 UI가 있을 때는 새 UI가 들어갈 위치를 항상 말해 주세요.

AI가 아이템 바를 만드는 과정

AI는 먼저 프로젝트와 HUD를 읽어서 어빌리티 바가 어디에 있는지 확인합니다. 그러면 에셋이 나타납니다. 아이템 바 위젯, 컨트롤러 Blueprint, 그리고 Enhanced Input 액션 세 개(IA_ItemSlot1, 2, 3)와 입력 매핑입니다. 액터에서는 원시 키 이벤트를 쓸 수 없기 때문입니다.

위젯에는 작은 부품이 많습니다. 슬롯 세 개, 보석 세 개, 키 번호, 이름 텍스트, 그리고 선택 애니메이션 세 개입니다. 입력 액션은 키를 소비하지 않도록 설정되어 있어서, 1, 2, 3에 바인딩된 다른 기능도 그대로 작동합니다. 세심한 부분입니다.

컨트롤러 그래프: 각 키가 자신의 번호로 Select Slot을 호출합니다.

플레이 테스트

첫 시도에 통과합니다.

• 시작할 때 컨트롤러는 슬롯 1을 보고하고, 이름은 Fire이며, 스크린샷에는 슬롯 1이 금색 테두리에 더 큰 크기로, 나머지 둘은 어둡게 표시됩니다.
• 2를 누르면 슬롯 2, Frost가 되고 테두리가 옮겨 갑니다.
• 3을 누르면 슬롯 3, Heal입니다.
• 1을 누르면 슬롯 1, 다시 Fire입니다.

네 개의 검사가 모두 통과했고, 고칠 것은 없었습니다.

리포트

에셋은 모두 여섯 개이며, 측정하지 않은 항목에 대한 메모가 함께 있습니다.

리포트는 만든 내용을 나열하는데, 에셋은 모두 여섯 개입니다. 위젯, 컨트롤러, 입력 액션 세 개, 그리고 매핑입니다. 측정하지 않은 항목도 솔직하게 밝힙니다.

• 0.15초 애니메이션은 플레이 중에 시간을 재지 않았습니다. 각 검사는 키를 누르고 약 0.6초 뒤에 읽었으므로 최종 상태만 확인할 수 있습니다.
• 테스트 스크린샷에서는 메인 메뉴가 바를 가리고 있어서 색이 흐릿하게 보입니다.
• SlotSize를 바꿔도 보석이나 레이아웃 박스는 따라 움직이지 않습니다. 슬롯의 크기는 바뀌지만 보석은 26픽셀로 그대로이고 바의 컨테이너는 320 x 130으로 고정되어 있으므로, 슬롯 크기를 훨씬 키우면 넘칩니다.
• 레벨이 저장되지 않았습니다.

아이템 바의 작동 원리, 쉽게 설명하면

위젯은 선택된 인덱스라는 숫자 하나를 가지고 있습니다. 컨트롤러가 2 키 입력을 받으면 위젯에 슬롯 2를 선택하라고 알립니다. 위젯은 그 숫자를 저장합니다. 그런 다음 모든 슬롯이 한 가지를 묻습니다. 내가 선택된 슬롯인가? 그렇다면 선택 애니메이션을 재생합니다. 금색 테두리, 115퍼센트로 확대, 최대 밝기입니다. 아니라면 애니메이션을 거꾸로 재생해 55퍼센트로 어둡게 합니다. 이름 텍스트는 인덱스로 정해집니다. 슬롯 세 개에 이름 세 개입니다.

애니메이션 시간과 슬롯 크기가 변수이므로, 숫자 두 개만 바꿔서 경쾌한 바나 느긋한 바를 만들 수 있습니다.

확장 아이디어

• 마우스 휠로 슬롯 바꾸기.
• 실제로 동작하는 아이템. Fire는 불꽃을 던지고, Frost는 적을 느리게 하며, Heal은 체력을 회복합니다.
• 각 슬롯 위에 쿨다운 스윕을 표시하고, 몇 개를 가지고 있는지 세는 카운터도 추가. Unreal Engine 인벤토리 시스템에서 아이템을 세는 방법을 볼 수 있습니다.

아이템 바 프롬프트를 위한 네 가지 팁

1. 선택된 모습과 어두운 모습을 숫자로 지정하세요.
2. 기존 UI를 기준으로 바가 들어갈 위치를 적으세요.
3. 시작할 때 어느 슬롯이 선택되어 있는지 적으세요.
4. 모든 키를 순서를 섞어서 테스트하도록 AI에게 요청하세요.

자주 묻는 질문

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

위젯에 선택된 인덱스를 하나 두고, 슬롯마다 그 값을 설정하는 키를 추가한 뒤, 모든 슬롯이 자신이 선택된 슬롯인지에 따라 애니메이션으로 반응하게 하세요.

여기서 AI는 왜 Enhanced Input 액션을 사용하나요?

도구를 통해서는 액터에서 원시 키 이벤트를 쓸 수 없기 때문에, 키마다 입력 액션 하나와 매핑을 추가했습니다. 입력을 소비하지 않도록 설정되어 있어서 해당 키에 연결된 다른 바인딩도 그대로 작동합니다.

슬롯 크기를 바꿀 수 있나요?

SlotSize는 변수이지만 보석과 컨테이너는 그에 맞춰 크기가 바뀌지 않습니다. 슬롯을 훨씬 크게 하면 고정된 컨테이너를 넘치므로 레이아웃도 함께 조정하세요.

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

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

이 시리즈의 다른 빌드: Unreal Engine 인벤토리 시스템, Unreal Engine 원거리 무기, 그리고 Unreal Engine 메인 메뉴.