UI와 게임플레이 기본 상호작용

UI와 게임플레이 로직 간의 효과적인 상호작용은 원활한 사용자 경험을 제공하는 데 핵심적입니다.

언리얼 엔진에서는 블루프린트를 통해 이러한 상호작용을 쉽게 구현할 수 있습니다.

UI 이벤트에 따른 게임플레이 상태 변경

버튼 클릭 이벤트 처리

예 : 체력 회복 아이템 사용 버튼

Widget Blueprint: WBP_InventoryItem
 
Event: Use Button Clicked
    |
[Get Player Character] --> [Cast To MyCharacter]
                               |
                    [Call Use Health Potion]

** 슬라이더 조절 이벤트 처리**

예 : 게임 음량 조절

Widget Blueprint: WBP_Settings
 
Event: Volume Slider Value Changed
    |
[Get Game Instance] --> [Cast To MyGameInstance]
                             |
                  [Set Master Volume]

게임플레이 이벤트에 따른 UI 업데이트

플레이어 상태 변화 반영

예 : 체력바 업데이트

Character Blueprint: BP_PlayerCharacter
 
Event: Health Changed
    |
[Get Player HUD] --> [Update Health Bar]
 
Widget Blueprint: WBP_PlayerHUD
 
Function: Update Health Bar
Input: New Health Value
    |
[Set Progress Bar Percentage]

게임 진행 상황 표시

예 : 퀘스트 완료 알림

Blueprint: BP_QuestManager
 
Event: Quest Completed
    |
[Get Player HUD] --> [Show Quest Completion Notification]
 
Widget Blueprint: WBP_PlayerHUD
 
Function: Show Quest Completion Notification
Input: Quest Name
    |
[Create Widget(WBP_Notification)] --> [Add to Viewport]
                                  --> [Play Animation(FadeIn)]

게임 상태에 따른 UI 표시/숨김 처리

메뉴 전환

Blueprint: BP_GameMode
 
Function: Switch Game State
Input: New State (Enum)
    |
[Switch on New State]
    |
[Case: InGame] --> [Hide Main Menu] --> [Show HUD]
    |
[Case: Pause] --> [Show Pause Menu] --> [Hide HUD]
    |
[Case: GameOver] --> [Show Game Over Screen] --> [Hide HUD]

컨텍스트 기반 UI 표시

예 : 상호작용 가능한 오브젝트 근처에서 프롬프트 표시

Character Blueprint: BP_PlayerCharacter
 
Event Tick
    |
[Line Trace for Interactable] --> [Branch: Hit?]
                                    |
                      [Show Interact Prompt] <-- [True]
                                    |
                      [Hide Interact Prompt] <-- [False]

플레이어 입력과 UI 상호작용 처리

키보드 / 마우스 입력 처리

Blueprint: BP_PlayerController
 
Event: Input Mode Changed
    |
[Branch: Is Game Only?]
    |
[Set Input Mode UI Only] <-- [False]
    |
[Set Input Mode Game Only] <-- [True]

게임패드 입력 처리

Widget Blueprint: WBP_MainMenu
 
Event: Receive Focus
    |
[Set Up Menu Navigation]
 
Function: Set Up Menu Navigation
[Set First Focus Widget] --> [Bind Navigation Events]

UI를 통한 게임 데이터 표시 및 수정

인벤토리 시스템

Widget Blueprint: WBP_Inventory
 
Event: Construct
    |
[Get Player Inventory] --> [For Each Item]
                               |
                    [Create Item Widget] --> [Add to Grid Panel]
 
Event: Item Widget Clicked
    |
[Show Item Details] --> [Enable Use/Discard Options]

캐릭터 스탯 수정

Widget Blueprint: WBP_CharacterStats
 
Event: Stat Increase Button Clicked
Input: Stat Type
    |
[Get Player Character] --> [Increase Stat]
                       --> [Update Stat Display]

UI와 게임플레이 로직 분리 및 관리 팁

인터페이스 활용

UI와 게임플레이 로직 간의 직접적인 참조 대신 인터페이스 사용

Interface: BPI_UIInteraction
 
Function: UpdatePlayerHealth
Function: NotifyQuestCompleted
 
Character Blueprint: Implements BPI_UIInteraction
HUD Blueprint: Calls BPI_UIInteraction functions

이벤트 디스패처 사용

게임플레이 이벤트를 UI에 전파하는 데 사용

Blueprint: BP_GameMode
 
Event Dispatcher: OnGameStateChanged
 
HUD Blueprint: Bind to OnGameStateChanged

데이터 모델 분리

UI에 표시될 데이터를 별도의 구조체나 클래스로 관리

Struct: S_PlayerStats
Variables: Health, Mana, Experience, Level
 
Function: Update Player HUD
Input: S_PlayerStats
    |
[Update Health Bar]
[Update Mana Bar]
[Update Level Display]

UI 관리자 클래스 생성

중앙집중식 UI 관리를 위한 전용 클래스 사용

Blueprint: BP_UIManager
 
Functions:
- Show Menu
- Hide Menu
- Update HUD
- Show Notification

게임 상태 기반 UI 로직

게임 상태에 따라 UI 동작을 체계적으로 관리

Enum: E_GameState (MainMenu, Playing, Paused, GameOver)
 
Function: Update UI Based on Game State
Input: E_GameState
    |
[Switch on Game State]
    |
[Show/Hide Relevant UI Elements]

예제 : 전투 시스템 UI

Character Blueprint: BP_PlayerCharacter
 
Variables:
- Health
- Mana
- ActiveSkills (Array)
 
Event: Take Damage
    |
[Update Health] --> [Notify UI of Health Change]
 
Event: Use Skill
    |
[Reduce Mana] --> [Notify UI of Mana Change]
              --> [Start Skill Cooldown]
 
Widget Blueprint: WBP_CombatHUD
 
Functions:
- Update Health Bar
- Update Mana Bar
- Update Skill Cooldowns
 
Event: Receive Update from Character
    |
[Update Relevant UI Elements]
 
Event: Skill Button Clicked
    |
[Get Player Character] --> [Call Use Skill]

이 예제에서는 플레이어 캐릭터의 상태 변화(체력, 마나)가 UI에 실시간으로 반영되며, UI를 통해 스킬 사용 등의 게임플레이 액션을 트리거할 수 있습니다.

UI와 게임플레이 로직 간의 효과적인 상호작용은 사용자 경험을 크게 향상시킬 수 있습니다. 두 요소를 적절히 분리하면서도 유기적으로 연결하는 것이 중요합니다. 인터페이스, 이벤트 디스패처, 데이터 모델 분리 등의 기법을 활용하여 유지보수가 용이하고 확장성 있는 시스템을 구축할 수 있습니다. 또한, 성능 최적화를 위해 불필요한 업데이트를 최소화하고, UI 요소의 생성과 파괴를 효율적으로 관리하는 것도 중요합니다. 지속적인 테스트와 사용자 피드백을 통해 UI와 게임플레이 간의 상호작용을 지속적으로 개선해 나가는 것이 좋습니다.

UI 애니메이션 구현하기 간단한 인벤토리 시스템 구현