간단한 인벤토리 시스템 구현

아이템 데이터 구조체: F_ItemData (5장 2절에서 생성)

• ItemName (Text)
• ItemIcon (Texture2D Soft Object Reference)
• Description (Text)
• AttackPower (Integer)
• Weight (Float)

플레이어 캐릭터 블루프린트: BP_PlayerCharacter (또는 여러분의 플레이어 캐릭터)

• PlayerInventory (변수 타입: F_ItemData 구조체의 배열 Array)

아이템 획득용 액터: BP_PickupItem (새로 생성)

• Overlap 이벤트 발생 시 F_ItemData를 플레이어에게 전달

인벤토리 슬롯 위젯: WBP_InventorySlot (새로 생성)

• 개별 아이템을 표시하는 UI (아이콘, 이름)
• 아이템 데이터를 받아 자신을 업데이트하는 함수 포함

메인 인벤토리 위젯: WBP_InventoryScreen (새로 생성)

• 인벤토리 슬롯들을 동적으로 추가할 Grid Panel 포함
• 인벤토리 데이터를 받아 슬롯을 새로고침하는 함수 포함

액터 블루프린트 생성: BP_PickupItem (부모 클래스: Actor)

컴포넌트 추가

• Static Mesh Component (예: Shape_Sphere 또는 실제 아이템 메시)
• Sphere Collision Component (Is Overlap Events Enabled 체크)

변수 추가

• ItemInfo (변수 타입: F_ItemData)
• 디테일 패널에서 ItemInfo 변수를 선택하고 Instance Editable 및 Expose on Spawn을 체크합니다. 이렇게 하면 월드에 배치된 BP_PickupItem 인스턴스마다 다른 아이템 정보를 직접 입력할 수 있습니다.

이벤트 그래프 로직

• Sphere Collision의 On Component Begin Overlap 이벤트 노드를 가져옵니다.
• Other Actor가 BP_PlayerCharacter인지 Cast To BP_PlayerCharacter 노드로 확인합니다.
• 캐스팅이 성공하면, BP_PlayerCharacter의 AddItemToInventory 함수 (다음 단계에서 생성) 를 호출하고 ItemInfo 변수(Get 노드)를 전달합니다.
• 아이템을 주웠으므로, Destroy Actor 노드를 호출하여 자신을 제거합니다.
• 컴파일 및 저장합니다.

월드 배치: 메인 에디터로 돌아와 BP_PickupItem 인스턴스를 월드에 여러 개 배치하고 각 인스턴스에 다른 ItemInfo를 입력해봅니다. (예: ItemName "골드", ItemIcon 골드 아이콘 텍스처 등)

변수 추가: PlayerInventory (변수 타입: F_ItemData의 배열 Array)

함수 추가: AddItemToInventory

• 입력 핀: NewItem (타입: F_ItemData)
• 로직
  • PlayerInventory 변수에서 드래그하여 Add 노드를 호출합니다. NewItem을 연결합니다.
  • (선택 사항) Print String 노드를 연결하여 "아이템 [NewItem.ItemName] 획득!" 메시지를 출력합니다.
  • Get Player Controller 노드를 가져옵니다.
  • Get Player Controller에서 Get Widget of Class 노드를 호출합니다. Widget Class는 WBP_InventoryScreen을 선택합니다.
  • Get Widget of Class의 Return Value를 Cast To WBP_InventoryScreen으로 캐스팅합니다.
  • 캐스팅이 성공하면, WBP_InventoryScreen의 RefreshInventoryUI 함수 (다음 단계에서 생성) 를 호출하고, PlayerInventory 변수(Get 노드)를 RefreshInventoryUI의 입력 핀에 연결합니다.
• 컴파일 및 저장합니다.

위젯 블루프린트 생성: WBP_InventorySlot (부모 클래스: User Widget)

디자이너 탭

• Size Box를 캔버스 패널에 배치하고 Width Override, Height Override를 100x100 등으로 설정하여 슬롯 크기를 고정합니다.
• Size Box의 자식으로 Border를 배치하여 배경색을 줍니다.
• Border의 자식으로 Vertical Box를 배치합니다.
• Vertical Box의 자식으로 Image (이름: ItemIcon, Is Variable 체크)와 Text (이름: ItemNameText, Is Variable 체크)를 배치합니다.
• Image와 Text의 정렬 및 패딩을 조절하여 아이콘과 텍스트가 잘 보이도록 합니다.

그래프 탭

• 함수 추가: UpdateSlotInfo
  • 입력 핀: ItemData (타입: F_ItemData)
  • 로직
    • ItemData (입력 핀)에서 Break F_ItemData 노드를 가져옵니다.
    • ItemNameText 변수(Set 노드)의 Text 핀에 ItemName (Break F_ItemData의 출력)을 연결합니다.
    • ItemIcon 변수(Set Node)의 Brush 핀에 Make Brush From Texture 노드를 연결합니다.
    • Make Brush From Texture의 Texture 핀에 ItemIcon (Break F_ItemData의 Soft Texture2D Object Reference 출력)을 직접 연결합니다. (언리얼 엔진이 소프트 레퍼런스를 자동으로 로드하여 사용합니다. 명시적 Load Asset 노드가 필요 없는 경우도 있지만, 안전하게는 Load Asset 이후 연결하는 것이 좋습니다.)
    • 컴파일 및 저장합니다.

위젯 블루프린트 생성: WBP_InventoryScreen (부모 클래스: User Widget)

디자이너 탭

• Canvas Panel에 Border를 배치하여 인벤토리 창의 배경을 만듭니다. (크기와 색상 조절)
• Border의 자식으로 Grid Panel을 배치하고 이름을 InventoryGrid로 지정한 후 Is Variable을 체크합니다. (이 패널에 슬롯 위젯들이 추가됩니다.)
• Grid Panel의 Slot 설정에서 Column Fill 또는 Row Fill을 조절하여 그리드 크기를 설정할 수 있습니다.

그래프 탭

• 함수 추가: RefreshInventoryUI
  • 입력 핀: CurrentInventory (타입: F_ItemData의 배열 Array)
  • 로직
    • InventoryGrid 변수(Get 노드)에서 드래그하여 Clear Children 노드를 호출합니다. (기존 슬롯들을 모두 제거하여 새로 그립니다.)
    • CurrentInventory (입력 핀)에서 드래그하여 For Each Loop 노드를 가져옵니다.
    • Loop Body 핀 뒤에:
      • Create Widget 노드를 호출합니다. Widget Class는 WBP_InventorySlot을 선택합니다. Owning Player는 Get Owning Player를 연결합니다.
      • Create Widget의 Return Value를 Cast To WBP_InventorySlot으로 캐스팅합니다.
      • 캐스팅이 성공하면, WBP_InventorySlot의 UpdateSlotInfo 함수를 호출하고 For Each Loop의 Array Element (현재 아이템 데이터)를 연결합니다.
      • InventoryGrid 변수(Get 노드)에서 드래그하여 Add Child to Grid 노드를 호출합니다.
        • Target은 InventoryGrid를 연결합니다.
        • Content는 Cast To WBP_InventorySlot의 As WBP Inventory Slot 출력 핀을 연결합니다.
        • Row와 Column 핀은 For Each Loop의 Index를 활용하여 계산합니다. (예: 5칸짜리 그리드라면 Column = Index % 5, Row = Index / 5와 같이 계산)
    • 컴파일 및 저장합니다.

블루프린트 열기: BP_PlayerController

변수 추가: InventoryScreenRef (타입: WBP_InventoryScreen Object Reference)

이벤트 그래프 로직

• Event BeginPlay 뒤에:
  • Create Widget 노드로 WBP_InventoryScreen을 생성합니다. Owning Player는 Self (Player Controller 자신)를 연결합니다.
  • Create Widget의 Return Value를 Set InventoryScreenRef 변수에 연결하여 참조를 저장해둡니다.
  • 컴파일 및 저장합니다. (초기에는 화면에 추가하지 않습니다.)
• Event I (또는 인벤토리 키) 입력 노드를 추가합니다.
  • InventoryScreenRef 변수(Get 노드)에서 Is Valid 노드를 연결하여 위젯이 유효한지 확인합니다.
  • Branch 노드(Is Valid의 출력)의 True 핀 뒤에:
    • InventoryScreenRef에서 Is Visible 노드를 호출하여 현재 보이는지 확인합니다.
    • Branch 노드(Is Visible의 출력)로 분기합니다.
      • True (현재 보임): 인벤토리 닫기 로직
        • InventoryScreenRef에서 Remove From Parent 노드를 호출하여 화면에서 제거합니다.
        • Set Input Mode Game Only 노드를 호출합니다.
        • Set Show Mouse Cursor 노드를 호출하고 bShowMouseCursor를 해제합니다.
      • False (현재 숨겨짐): 인벤토리 열기 로직
        • InventoryScreenRef에서 Add to Viewport 노드를 호출하여 화면에 추가합니다.
        • Set Input Mode UI Only 노드를 호출합니다.
        • Set Show Mouse Cursor 노드를 호출하고 bShowMouseCursor를 체크합니다.
        • InventoryScreenRef에서 RefreshInventoryUI 함수를 호출하고, BP_PlayerCharacter의 PlayerInventory 변수를 가져와 연결합니다. (플레이어 캐릭터의 인벤토리 데이터를 UI에 전달)

모든 블루프린트를 컴파일하고 저장합니다.

메인 에디터의 월드에 BP_PlayerCharacter와 여러 BP_PickupItem 인스턴스들을 배치합니다.

게임을 플레이합니다.

BP_PickupItem에 겹치면 아이템을 획득하고 메시지가 출력되는 것을 확인합니다.

I 키를 누르면 인벤토리 창이 나타나고, 획득한 아이템들이 그리드에 동적으로 표시되는 것을 확인합니다.

I 키를 다시 누르면 인벤토리 창이 닫히고 마우스 커서가 사라지는 것을 확인합니다.