icon
6장 : UI 개발

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

앞선 절들에서 위젯 블루프린트를 이용해 UI를 디자인하고, 동적으로 요소를 생성하며, 애니메이션을 적용하는 방법을 배웠습니다. 이제 가장 중요한 단계로, UI와 실제 게임플레이 로직이 어떻게 상호작용하는지에 대해 알아보겠습니다. UI는 단순히 정보를 표시하는 것을 넘어, 플레이어의 입력을 받아 게임 상태를 변경하거나, 게임 상태 변화에 따라 UI가 업데이트되는 양방향 소통이 이루어져야 합니다.

UI와 게임플레이 상호작용의 중요성

  • 플레이어 입력 처리: UI의 버튼 클릭, 슬라이더 조작, 텍스트 입력 등은 게임플레이에 직접적인 영향을 미쳐야 합니다. (예: "게임 시작" 버튼 클릭 시 레벨 로드, "볼륨 조절" 슬라이더 조작 시 게임 사운드 변경)
  • 게임 상태 반영: 플레이어의 체력 감소, 아이템 획득, 퀘스트 완료 등 게임 내의 변화가 UI에 실시간으로 반영되어야 합니다. (예: 체력 바 업데이트, 인벤토리 아이템 목록 갱신)
  • 몰입감 및 반응성: UI와 게임플레이 간의 매끄러운 상호작용은 플레이어에게 높은 반응성과 몰입감을 제공합니다.

UI에서 게임플레이로 데이터 전달 (입력 처리)

UI 위젯에서 발생한 이벤트를 게임플레이 로직으로 전달하는 가장 일반적인 방법은 다음과 같습니다.

이벤트 디스패처 (Event Dispatcher) 활용

이벤트 디스패처는 특정 이벤트가 발생했을 때 여러 곳에서 해당 이벤트를 '수신'하여 반응할 수 있도록 해주는 강력한 브로드캐스트 시스템입니다. UI에서 게임플레이로 이벤트를 전달하는 데 매우 유용합니다.

예시: UI 버튼 클릭 시 플레이어의 스킬 발동

  1. 위젯 블루프린트 (WBP_SkillButton) 생성 및 설정

    • WBP_SkillButton 위젯 블루프린트를 생성하고, Button 위젯을 추가한 후 Is Variable을 체크하여 SkillCastButton으로 이름을 지정합니다.
    • 그래프 탭으로 이동합니다.
    • 변수 패널 위쪽의 + 이벤트 디스패처(+ Event Dispatcher) 버튼을 클릭하여 새 이벤트 디스패처를 생성합니다. 이름을 OnSkillButtonClicked로 지정합니다.
    • OnSkillButtonClicked 이벤트 디스패처에 입력 파라미터를 추가할 수 있습니다. (예: 어떤 스킬이 발동되었는지 알려주는 SkillID (Integer) 입력 파라미터 추가)
    • SkillCastButton의 On Clicked 이벤트 노드를 가져옵니다.
    • On Clicked 이벤트 뒤에 OnSkillButtonClicked 이벤트 디스패처 변수(Get 노드)를 가져와 Call 노드를 연결합니다. SkillID 핀에 적절한 스킬 ID를 연결합니다.
    • 컴파일하고 저장합니다.

  2. 플레이어 캐릭터 (BP_PlayerCharacter)에서 이벤트 수신

    • BP_PlayerCharacter 블루프린트를 엽니다.
    • Event BeginPlay 또는 UI 위젯을 생성하는 시점에서 다음 로직을 추가합니다.
      • Create Widget 노드로 WBP_SkillButton을 생성합니다.
      • Create Widget의 Return Value 핀에서 드래그하여 Assign OnSkillButtonClicked 노드를 검색하여 연결합니다. (이벤트 디스패처 이름 앞에 Assign이 붙습니다.)
      • Assign OnSkillButtonClicked 노드의 빨간색 Event 핀에서 드래그하여 Add Custom Event 를 선택합니다. (이벤트 디스패처의 입력 파라미터가 자동으로 생성됩니다.)
      • 이제 이 커스텀 이벤트 뒤에 스킬 발동 로직(예: Print String으로 "스킬 ID [SkillID] 발동!")을 구현합니다.
      • Add to Viewport 노드를 연결하여 WBP_SkillButton을 화면에 추가합니다.
    • 컴파일하고 저장합니다.

이제 게임을 플레이하고 UI의 스킬 버튼을 클릭하면, WBP_SkillButton에서 이벤트 디스패처가 호출되고, BP_PlayerCharacter에서 이를 수신하여 스킬 발동 로직이 실행됩니다.

직접 함수 호출 (간접 참조)

UI 위젯에서 특정 게임플레이 블루프린트(예: Player Character, Player Controller, Game Mode)의 함수를 직접 호출하는 방법입니다. 이 방법은 UI 위젯이 해당 게임플레이 블루프린트의 참조를 가지고 있어야 합니다.

예시: 인벤토리 창에서 아이템 사용 버튼 클릭 시 플레이어 캐릭터의 함수 호출

  1. 위젯 블루프린트 (WBP_InventoryItem) 생성 및 설정

    • WBP_InventoryItem을 생성하고 Button 위젯을 추가한 후 UseButton으로 이름을 지정합니다.
    • 그래프 탭으로 이동합니다.
    • UseButton의 On Clicked 이벤트 노드를 가져옵니다.
    • WBP_InventoryItem에 PlayerCharacterRef (변수 타입: BP_PlayerCharacter Object Reference) 변수를 추가하고 Expose on Spawn 및 Instance Editable을 체크합니다. (이 변수에 나중에 플레이어 캐릭터 참조를 넣어줄 것입니다.)
    • On Clicked 이벤트 뒤에 PlayerCharacterRef 변수(Get 노드)를 가져와 드래그한 후, BP_PlayerCharacter에 정의된 UseItem(ItemData)와 같은 함수를 검색하여 호출합니다. ItemData 핀에 해당 아이템의 정보를 연결합니다.
    • 컴파일하고 저장합니다.

  2. 부모 위젯 (WBP_InventoryScreen) 또는 플레이어 컨트롤러에서 위젯 생성 시 참조 전달

    • WBP_InventoryScreen에서 WBP_InventoryItem을 동적으로 생성하는 로직으로 이동합니다.
    • Create Widget 노드에서 WBP_InventoryItem을 선택하면, PlayerCharacterRef 입력 핀이 나타납니다.
    • 이 핀에 Get Player Character 노드를 연결하여 현재 플레이어 캐릭터의 참조를 넘겨줍니다.
    • 컴파일하고 저장합니다.

이 방법은 이벤트 디스패처보다 설정이 간단할 수 있지만, UI 위젯이 특정 게임플레이 블루프린트에 직접적인 의존성을 가지게 되므로, UI와 게임플레이 로직 간의 결합도가 높아진다는 단점이 있습니다.

게임플레이에서 UI로 데이터 전달

게임플레이 상태 변화에 따라 UI를 업데이트하는 방법은 주로 데이터 바인딩과 직접 함수 호출을 통해 이루어집니다.

데이터 바인딩 (Data Binding)

위젯의 특정 속성(예: 텍스트 내용, 진행 바의 퍼센트)을 게임플레이 블루프린트의 변수에 직접 연결하는 방식입니다. 변수 값이 변경되면 UI가 자동으로 업데이트됩니다.

예시: 플레이어 체력 변화에 따른 체력 바 업데이트

  1. 위젯 블루프린트 (WBP_HealthBar) 생성 및 설정

    • WBP_HealthBar를 생성하고 Progress Bar 위젯을 추가합니다.
    • Progress Bar를 선택한 후 디테일 패널에서 Percent 속성 옆의 바인딩(Bind) 버튼을 클릭하고 새 바인딩 생성(Create Binding)을 선택합니다.
    • 새로 생성된 함수(예: GetPercent_0)의 그래프로 이동합니다.
    • 여기서 Get Player Character 노드를 가져와 Cast To BP_PlayerCharacter로 캐스팅합니다.
    • 캐스팅된 BP_PlayerCharacter에서 플레이어의 현재 체력 변수(예: CurrentHealth)와 최대 체력 변수(예: MaxHealth)를 가져옵니다.
    • CurrentHealth를 MaxHealth로 나누고, 그 결과를 Return Node의 ReturnValue 핀에 연결합니다.
    • 컴파일하고 저장합니다.

  2. 플레이어 캐릭터 (BP_PlayerCharacter)에서 체력 변수 관리

    • BP_PlayerCharacter에 CurrentHealth (Float), MaxHealth (Float) 변수를 생성합니다.
    • CurrentHealth 값이 변경될 때마다 (Event AnyDamage 등) 이 변수를 업데이트합니다.

이제 플레이어의 체력 변수가 변경되면, WBP_HealthBar의 Progress Bar가 자동으로 업데이트되어 화면에 반영됩니다.

직접 함수 호출

게임플레이 블루프린트에서 UI 위젯의 함수를 직접 호출하여 UI를 업데이트하는 방법입니다.

예시: 아이템 획득 시 인벤토리 UI에 새 아이템 추가

  1. 위젯 블루프린트 (WBP_InventoryScreen)에 함수 정의

    • WBP_InventoryScreen에 AddItemToUI(F_ItemData ItemData)와 같은 커스텀 함수를 정의합니다.
    • 이 함수 안에서 WBP_InventorySlot을 동적으로 생성하고, ItemData를 전달하여 슬롯을 설정한 후, InventoryGrid에 추가하는 로직을 구현합니다. (2절 "동적 UI 요소 생성 및 기본 관리" 참조)
    • 컴파일하고 저장합니다.

  2. 플레이어 캐릭터 (BP_PlayerCharacter)에서 UI 함수 호출

    • BP_PlayerCharacter에서 아이템 획득 로직으로 이동합니다.
    • 아이템을 획득한 후, 화면에 떠있는 WBP_InventoryScreen의 참조를 가져옵니다. (예: Get Widget of Class 노드 사용)
    • 가져온 WBP_InventoryScreen 참조를 캐스팅한 후, AddItemToUI 함수를 호출하고 획득한 아이템 데이터를 전달합니다.
    • 컴파일하고 저장합니다.

입력 모드 설정 (Input Mode)

UI와 게임플레이 간의 상호작용에서 입력 모드(Input Mode) 는 매우 중요합니다. 언리얼 엔진은 세 가지 주요 입력 모드를 제공합니다.

  • Set Input Mode Game Only
    • 게임플레이에만 입력이 전달됩니다. UI는 마우스 클릭이나 키보드 입력을 받지 않습니다.
    • 주로 게임 플레이 중 (메뉴가 닫혔을 때) 사용됩니다.
    • 마우스 커서가 숨겨집니다.
  • Set Input Mode UI Only
    • UI에만 입력이 전달됩니다. 게임플레이(캐릭터 이동 등)는 입력이 비활성화됩니다.
    • 주로 메인 메뉴, 설정 창, 인벤토리 창 등 UI만 조작해야 할 때 사용됩니다.
    • 마우스 커서가 보입니다.
  • Set Input Mode Game And UI
    • 게임플레이와 UI 모두에 입력이 전달됩니다.
    • 예: 채팅창을 열어 메시지를 입력하면서도 캐릭터를 움직일 수 있는 경우.
    • 마우스 커서가 보입니다.

일반적인 사용 흐름

  1. 게임 시작 시: Set Input Mode Game Only (혹은 Game And UI if needed)
  2. 메뉴 열 때: Set Input Mode UI Only (마우스 커서 보이기)
  3. 메뉴 닫을 때: Set Input Mode Game Only (마우스 커서 숨기기)

이러한 입력 모드 설정은 Player Controller에서 이루어집니다.

UI와 게임플레이 간의 상호작용은 게임의 핵심적인 사용자 경험을 결정합니다. 적절한 데이터 전달 방식과 입력 모드 설정을 통해 플레이어가 직관적이고 만족스러운 방식으로 게임을 즐길 수 있도록 해야 합니다.

이번 절에서는 UI와 게임플레이 로직이 어떻게 데이터를 주고받고 상호작용하는지에 대한 기본 개념과 주요 활용법을 알아보았습니다. 이벤트 디스패처, 직접 함수 호출, 데이터 바인딩, 그리고 입력 모드 설정은 UI 개발의 필수적인 요소들입니다.

UI 애니메이션 구현하기

Previous Page

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

Next Page