[Unreal] 19.UI_Inventory

04 Aug 2024 in Develop on C++, Unreal Last modified at: 2024-08-11

본 문서는 어소트락 언리얼엔진 게임프로그래머 양성과정의 강의를 토대로 필기한 내용입니다

• UI_Inventory
  • UI_리스트 뷰
  • 아이템 매니저
    • ItemManager.h
    • ItemManager.cpp
    • InventoryListWidget.cpp
    • InventoryListEntryWidget.cpp
    • ItemInfoWidget.cpp

UI_Inventory

• 리스트 뷰 : 수천 개의 항목을 하나의 가상화된 목록에서 볼 수 있도록 해 줌
  • 항목(List)과 요소(Entry)의 구분이 필요
  • 반드시 IUserObjectListEntry 인터페이스에서 상속을 받아야지 리스트 뷰에서 위젯 사용 가능
  • 언리얼 엔진은 기본적으로 다중 상속을 지원하지 않음
  • 인터페이스를 활용하여 다중 상속과 같은 효과를 낼 수 있다
• 타일 뷰 : 콘텐츠를 모두 일정한 크기의 타일로 표시하는 플로우 패널
• 트리 뷰 : 요소의 계층구조 트리를 표시할 수 있음

UI_리스트 뷰

출처: https://husk321.tistory.com/423 [껍데기방:티스토리]

• ListView에 들어가는 각 요소(Entry)는 IUserObjectListEntry 인터페이스를 상속받은 클래스여야 함
• IUserObjectListEntry를 상속받은 뒤 NativeOnListItemObjectSet() 함수를 재정의하면 이 요소(엔트리)가 Set 될 때 행동을 정의 가능하다
• ListView는 TArray<TObjectPtr<UObject>> 로 이루어져 있음
  • 때문에 TArray를 그대로 전달할 수도 있음
    • 이때는 SetListItems() 함수 활용
  • 내부적으로 TArray의 함수를 활용하므로 단순 Add, Remove를 해주면 다 처리를 해 줌
  • 또한 각 요소가 UObject로 전달되기에 각 요소들의 NativeOnListItemObjectSet()에서는 캐스팅을 해줘야 함
    • NativeOnInitialized() 함수에서 한번에 캐스팅하는 것이 비용적으로 이득  

아이템 매니저

• 아이템 매니저를 이용해서 아이템 관리 UObject 타입으로 생성
• 데이터 테이블 구조체로 항목 관리 테이블 만들기
  • 각 아이템은 ItemDataEntry로 만들기
  • 그 구조체는 GameInfo에 선언
• 마우스 오버 시 리스트 엔트리 위젯의 변화를 주는 처리 하기
  • UI 컨버스 패널에서 Select 이미지를 만들고 Z order를 1로 두고(맨 위로) 컬러 & Opacity에서 색조 변경

ItemManager.h

• UDataTable* 타입으로 데이터 테이블 멤버변수로 선언
• 생성자에서 데이터 테이블 정보 불러오기

ItemManager.cpp

• 데이터 테이블 멤버변수 전방 선언
• FindItem() 함수 만들어서 아이템 테이블의 FindRow() 함수
• GetItemCount() 함수로 아이템 개수 리턴 하는 함수 만들기

InventoryListWidget.cpp

인벤토리 항목(List)를 보여주는 위젯. 리스트에는 항목(엔트리)이 하나씩 들어 있는 구조

• NativeOnInitialized() 위젯 블루프린트에서 만든 각 이미지, 버튼, 리스트 뷰 각 타입으로 캐스팅 한 후 초기화
• [아이템 생성] - [UObject 생성] - [엔트리에 등록]
• 버튼(Close, Clear)의 경우 Open / Close 델리게이트 등록
• mSelect 멤버변수를 만들고, 선택된 항목을 저장해 두는 변수로 사용
• 마우스 오버
  • InventoryItemHovered(UObejct* Item, bool Hovered) 함수 만들고 리스트 뷰에 존재하는 OnItemIsHoveredChanged().AddUObject() 델리게이트에 등록
    • 아이템을 ItemDataEntry로 캐스팅 하고 (UObject 타입이기 때문에 캐스팅 필요) 선택한 아이템인지 확인하기
    • 연결된 EntryWidget을 얻어오기
    • 마우스 스테이트에 따라 색조 및 불투명도 조정 함수 만들기 SetMouseOn()
• 마우스 클릭
  • InventoryItemSelect(UObject* Item) 함수를 만들고 리스트 뷰에 존재하는 OnItemSelectionChanged().AddUObject() or OnItemClicked().AddUObject() 델리게이트에 등록
• 마우스 더블클릭
  • IventoryItemDoubleClick(UObject* Item) 함수를 만들고 리스트 뷰에 존재하는 OnItemDoubleClicked().AddUObject() 델리게이트에 등록
• 제거
  • ClearListItem() : 리스트의 아이템(엔트리)을 전부 제거
  • RemoveItem(아이템) : 아이템(엔트리) 하나 제거
• ItemInfo
  • NativeOnMouseMove()
    • USlateBlueprintLibrary 헤더 추가
    • 마우스 오버 상태라면, 아이템 정보창의 CanvasPanelSlot을 얻어 오고,
    • 마우스의 스크린에서의 위치를 얻어온다.
    • 스크린에서의 마우스 위치를 현재 이 위젯에서의 위치로 변경

InventoryListEntryWidget.cpp

항목(List)에 들어가는 실제 요소(Entry) 를 나타내는 위젯. 아이템 정보는 따로 아이템 매니저를 통해 UObject로 만들고 캐스팅해서 사용할 것

• IUserObjectListEntry 인터페이스를 상속받은 클래스

ItemInfoWidget.cpp

아이템 정보를 보여주는 위젯

• 초기화
  • NativeOnInitialized() 함수에서 각 위젯 초기화
• 할당
  • FInventoryItemData에 있는 데이터를 SetItemData()을 통해 할당
• 동적 위젯 생성
  • 가변적으로 내용을 추가, 제거를 할 수 있어야 한다
  • 위젯에서 마우스 위치를 추적해서, 위젯이 따라 움직이는 것과 같은 효과를 낼 수 있음
  • 마우스 오버 되있는지 확인하는 멤버변수 mHovered 추가