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와 게임플레이 로직 분리 및 관리 팁

1. 인터페이스 활용

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

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

2. 이벤트 디스패처 사용

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

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

3. 데이터 모델 분리

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]

4. UI 관리자 클래스 생성

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

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

5. 게임 상태 기반 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와 게임플레이 로직 간의 효과적인 상호작용은 사용자 경험을 크게 향상시킬 수 있습니다.

이전으로 다음으로