icon안동민 개발노트

동적 UI 요소 생성 및 기본 관리


 게임 개발에서 동적 UI는 사용자 경험을 향상시키고 다양한 게임 상황에 유연하게 대응할 수 있게 해줍니다.

 블루프린트를 사용하여 런타임에 UI 요소를 생성하고 관리하는 방법을 살펴보겠습니다.

런타임에 위젯 생성 및 화면에 추가

 1. 위젯 생성

  • 'Create Widget' 노드 사용
  • 위젯 클래스 지정

 2. 화면에 추가

  • 'Add to Viewport' 노드 사용
[Create Widget] --> [Add to Viewport]
   |
[Widget Class: WBP_Notification]

동적 위젯 제거

  • 'Remove from Parent' 노드 사용
  • 위젯 참조 필요
[Get Widget Reference] --> [Is Valid?] --> [Branch]
                                            |
                              [Remove from Parent] <-- [True]

동적으로 위젯 속성 변경

  1. 텍스트 변경
[Get Text Block Reference] --> [Set Text]
                                 |
                     [Text to Set] <-- [Dynamic Text]
  1. 이미지 변경
[Get Image Reference] --> [Set Brush]
                              |
                  [Texture to Set] <-- [Dynamic Texture]
  1. 가시성 변경
[Get Widget Reference] --> [Set Visibility]
                              |
                  [Visibility State] <-- [Condition]

위젯 풀링 기법

 위젯 풀링은 자주 사용되는 UI 요소를 미리 생성하고 재사용하는 기법입니다.

  1. 풀 초기화
Function: InitializeWidgetPool
[For Loop: Pool Size] --> [Create Widget]
                        --> [Add to Array]
                        --> [Set Visibility (Hidden)]
  1. 위젯 가져오기
Function: GetWidgetFromPool
[Find Available Widget in Array] --> [Set Visibility (Visible)]
                                 --> [Return Widget]
  1. 위젯 반환
Function: ReturnWidgetToPool
[Set Widget Properties to Default] --> [Set Visibility (Hidden)]
                                    --> [Add to Available Array]

위젯 인스턴스 관리

 효율적인 위젯 인스턴스 관리를 위한 팁

 1. 중앙 관리자 사용

  • UI 관리자 클래스 생성
  • 모든 동적 위젯 참조 저장 및 관리

 2. 참조 추적

  • 생성된 위젯의 참조를 배열이나 맵에 저장
  • 필요 시 쉽게 접근 및 수정 가능

 3. 생명주기 관리

  • 더 이상 필요 없는 위젯은 즉시 제거
  • 메모리 누수 방지
Class: BP_UIManager
Variables:
  - ActiveWidgets (Array of Widget References)
 
Function: CreateAndManageWidget
[Create Widget] --> [Add to Viewport]
                --> [Add to ActiveWidgets]
 
Function: RemoveWidget
[Remove from Parent] --> [Remove from ActiveWidgets]

메모리 효율성을 고려한 동적 UI 관리

 1. 지연 로딩 활용

  • 필요한 시점에 위젯 생성
  • 초기 로딩 시간 단축

 2. 위젯 재사용

  • 동일한 유형의 위젯 재활용
  • 불필요한 생성/제거 작업 최소화

 3. 리소스 정리

  • 사용하지 않는 위젯은 메모리에서 완전히 제거
Function: CleanupUnusedWidgets
[For Each ActiveWidget] --> [Check Usage]
                        --> [Remove If Unused]

동적 UI 생성 시 주의사항

 1. 성능 영향 고려

  • 많은 수의 위젯을 동시에 생성하지 않도록 주의
  • 필요한 경우 생성 작업을 여러 프레임에 걸쳐 분산

 2. 동기화 문제

  • 멀티스레드 환경에서 UI 수정 시 동기화 주의
  • 메인 스레드에서 UI 조작 수행

 3. 에러 처리

  • 위젯 생성 실패에 대한 예외 처리
  • 널 체크 및 유효성 검사 수행
[Create Widget] --> [Is Valid?] --> [Branch]
                                     |
                       [Handle Error] <-- [False]
                                     |
                  [Continue Process] <-- [True]

성능 최적화 팁

 1. 드로우 콜 최소화

  • 동적으로 변경되는 부분만 업데이트
  • 정적 요소는 별도의 위젯으로 분리

 2. 캐싱 활용

  • 자주 접근하는 위젯 참조 캐싱
  • 불필요한 검색 작업 감소

 3. 지연 업데이트 사용

  • 매 프레임 대신 일정 간격으로 UI 업데이트
  • 'Timers' 활용
Function: UpdateUIWithDelay
[Set Timer by Function Name] --> [Function: ActualUpdate]
                              --> [Delay: 0.1 seconds]

 4. 배치 처리

  • 여러 UI 업데이트를 한 번에 처리
  • 'Construct' 이벤트 대신 'Tick' 이벤트 활용

예제 : 동적 인벤토리 시스템

Class: BP_InventoryManager
Variables:
  - ItemSlots (Array of WBP_ItemSlot)
  - InventoryContainer (Widget Container Reference)
 
Function: InitializeInventory
[For Each Slot Count] --> [Create Widget (WBP_ItemSlot)]
                      --> [Add to ItemSlots Array]
                      --> [Add to InventoryContainer]
 
Function: UpdateInventoryItem
Inputs: SlotIndex, ItemData
[Get Widget from ItemSlots] --> [Call UpdateItemDisplay]
 
Function: AddNewItem
[Find Empty Slot] --> [Create New Item Widget]
                  --> [Add to Inventory]
                  --> [Update UI]
 
Event: OnItemClicked
[Get Clicked Item Data] --> [Show Item Details]
                        --> [Enable Use/Discard Options]

 이 예제에서는 동적으로 인벤토리 슬롯을 생성하고 관리합니다.

 아이템 추가, 업데이트, 상호작용 등이 모두 동적으로 처리됩니다.

 동적 UI 요소의 생성과 관리는 게임 UI의 유연성과 반응성을 크게 향상시킬 수 있습니다.