UI와 게임플레이 기본 상호작용
이벤트 디스패처와 함수 호출·데이터 바인딩으로 UI 입력과 게임 상태를 양방향 연결하고 입력 모드를 설정합니다.
앞선 절들에서 위젯 블루프린트를 이용해 UI를 디자인하고, 동적으로 요소를 생성하며, 애니메이션을 적용하는 방법을 배웠습니다.
이제 가장 중요한 단계로, UI와 실제 게임플레이 로직이 어떻게 상호작용하는지에 대해 알아보겠습니다.
UI는 단순히 정보를 표시하는 것을 넘어, 플레이어의 입력을 받아 게임 상태를 변경하거나, 게임 상태 변화에 따라 UI가 업데이트되는 양방향 소통이 이루어져야 합니다.
UI와 게임플레이 상호작용의 중요성
- 플레이어 입력 처리: UI의 버튼 클릭, 슬라이더 조작, 텍스트 입력 등은 게임플레이에 직접적인 영향을 미쳐야 합니다. (예: 게임 시작 버튼 클릭 시 레벨 로드, 볼륨 조절 슬라이더 조작 시 게임 사운드 변경)
- 게임 상태 반영: 플레이어의 체력 감소, 아이템 획득, 퀘스트 완료 등 게임 내의 변화가 UI에 실시간으로 반영되어야 합니다. (예: 체력 바 업데이트, 인벤토리 아이템 목록 갱신)
- 몰입감 및 반응성: UI와 게임플레이 간의 매끄러운 상호작용은 플레이어에게 높은 반응성과 몰입감을 제공합니다.
UI에서 게임플레이로 데이터 전달 (입력 처리)
UI 위젯에서 발생한 이벤트를 게임플레이 로직으로 전달하는 가장 일반적인 방법은 다음과 같습니다.
이벤트 디스패처 (Event Dispatcher) 활용
이벤트 디스패처는 특정 이벤트가 발생했을 때 여러 곳에서 해당 이벤트를 수신하여 반응할 수 있도록 해주는 강력한 브로드캐스트 시스템입니다.
UI에서 게임플레이로 이벤트를 전달하는 데 매우 유용합니다.
예시: UI 버튼 클릭 시 플레이어의 스킬 발동WBP_SkillButton) 생성 및 설정WBP_SkillButton위젯 블루프린트를 생성하고,Button위젯을 추가한 후Is Variable을 체크하여SkillCastButton으로 이름을 지정합니다.- 그래프 탭으로 이동합니다.
- 변수 패널 위쪽의
+ 이벤트 디스패처(+ Event Dispatcher)버튼을 클릭하여 새 이벤트 디스패처를 생성합니다. 이름을OnSkillButtonClicked로 지정합니다. OnSkillButtonClicked이벤트 디스패처에 입력 파라미터를 추가할 수 있습니다. (예: 어떤 스킬이 발동되었는지 알려주는SkillID(Integer) 입력 파라미터 추가)SkillCastButton의On Clicked이벤트 노드를 가져옵니다.- 디스패처를 그래프로 끌어와
Call노드를 만들고On Clicked의 실행 선을 연결합니다.SkillID핀에 적절한 스킬 ID를 연결합니다. - 컴파일하고 저장합니다.
BP_PlayerCharacter)에서 이벤트 수신BP_PlayerCharacter블루프린트를 엽니다.Event BeginPlay또는 UI 위젯을 생성하는 시점에서 다음 로직을 추가합니다.Create Widget노드로WBP_SkillButton을 생성합니다.Create Widget의Return Value핀에서 드래그하여Assign OnSkillButtonClicked노드를 검색하여 연결합니다. (이벤트 디스패처 이름 앞에Assign이 붙습니다.)Assign으로 함께 생성한 커스텀 이벤트를 사용합니다. 별도로 구성하려면Bind Event to OnSkillButtonClicked와 시그니처가 맞는 커스텀 이벤트를 연결합니다. 두 방식을 중복으로 만들 필요는 없습니다.- 이제 이 커스텀 이벤트 뒤에 스킬 발동 로직(예:
Print String으로 스킬 ID [SkillID] 발동!)을 구현합니다. Add to Viewport노드를 연결하여WBP_SkillButton을 화면에 추가합니다.
- 컴파일하고 저장합니다.
이제 게임을 플레이하고 UI의 스킬 버튼을 클릭하면, WBP_SkillButton에서 이벤트 디스패처가 호출되고, BP_PlayerCharacter에서 이를 수신하여 스킬 발동 로직이 실행됩니다.
직접 함수 호출
UI 위젯에서 특정 게임플레이 블루프린트(예: Player Character, Player Controller, Game Mode)의 함수를 직접 호출하는 방법입니다.
이 방법은 UI 위젯이 해당 게임플레이 블루프린트의 참조를 가지고 있어야 합니다.
예시: 인벤토리 창에서 아이템 사용 버튼 클릭 시 플레이어 캐릭터의 함수 호출WBP_InventoryItem) 생성 및 설정WBP_InventoryItem을 생성하고Button위젯을 추가한 후UseButton으로 이름을 지정합니다.- 그래프 탭으로 이동합니다.
UseButton의On Clicked이벤트 노드를 가져옵니다.WBP_InventoryItem에PlayerCharacterRef(변수 타입:BP_PlayerCharacter Object Reference) 변수를 추가하고Expose on Spawn및Instance Editable을 체크합니다. (이 변수에 나중에 플레이어 캐릭터 참조를 넣어줄 것입니다.)On Clicked에서PlayerCharacterRef를IsValid로 검사한 뒤 유효한 분기에서만BP_PlayerCharacter에 정의된UseItem(ItemData)와 같은 함수를 검색하여 호출합니다.ItemData핀에 해당 아이템의 정보를 연결합니다.- 컴파일하고 저장합니다.
WBP_InventoryScreen) 또는 플레이어 컨트롤러에서 위젯 생성 시 참조 전달WBP_InventoryScreen에서WBP_InventoryItem을 동적으로 생성하는 로직으로 이동합니다.Create Widget노드에서WBP_InventoryItem을 선택하면,PlayerCharacterRef입력 핀이 나타납니다.- 해당 로컬 플레이어의 Pawn을 얻어
BP_PlayerCharacter로 캐스트하고 성공 결과를 이 핀에 전달합니다. 기본 Character 참조를 사용자 정의 하위 타입 핀에 그대로 연결하지 않습니다. - 컴파일하고 저장합니다.
이 방법은 이벤트 디스패처보다 설정이 간단할 수 있지만, UI 위젯이 특정 게임플레이 블루프린트에 직접적인 의존성을 가지게 되므로, UI와 게임플레이 로직 간의 결합도가 높아진다는 단점이 있습니다.
게임플레이에서 UI로 데이터 전달
게임플레이 상태 변화에 따라 UI를 업데이트하는 방법은 주로 데이터 바인딩과 직접 함수 호출을 통해 이루어집니다.
데이터 바인딩 (Data Binding)
위젯의 특정 속성(예: 텍스트 내용, 진행 바의 퍼센트)을 게임플레이 블루프린트의 변수에 직접 연결하는 방식입니다.
일반 UMG 속성 바인딩은 값을 반복해서 읽어 표시합니다. 변경된 순간에만 호출되는 이벤트 알림과 구별하고, 빈번한 표시 갱신은 상태 변경 뒤 Set Percent 같은 함수를 호출하는 방식도 검토합니다.
WBP_HealthBar) 생성 및 설정WBP_HealthBar를 생성하고Progress Bar위젯을 추가합니다.Progress Bar를 선택한 후 디테일 패널에서Percent속성 옆의바인딩(Bind)버튼을 클릭하고새 바인딩 생성(Create Binding)을 선택합니다.- 새로 생성된 함수(예:
GetPercent_0)의 그래프로 이동합니다. - 위젯의 로컬 소유자에 해당하는 Pawn을 얻어
BP_PlayerCharacter로 캐스트합니다. 캐스트 실패 시 표시할 기본값(예: 0)을 반환합니다. - 캐스팅된
BP_PlayerCharacter에서 플레이어의 현재 체력 변수(예:CurrentHealth)와 최대 체력 변수(예:MaxHealth)를 가져옵니다. MaxHealth > 0인 경로에서만CurrentHealth / MaxHealth를 계산해 0~1로 Clamp한 값을 반환합니다. 그렇지 않은 경로는 0을 반환해 0으로 나누지 않도록 합니다.- 컴파일하고 저장합니다.
BP_PlayerCharacter)에서 체력 변수 관리BP_PlayerCharacter에CurrentHealth(Float),MaxHealth(Float) 변수를 생성합니다.CurrentHealth값이 변경될 때마다 (Event AnyDamage등) 이 변수를 업데이트합니다.
이제 플레이어의 체력 변수가 변경되면, WBP_HealthBar의 Progress Bar가 자동으로 업데이트되어 화면에 반영됩니다.
직접 함수 호출
게임플레이 블루프린트에서 UI 위젯의 함수를 직접 호출하여 UI를 업데이트하는 방법입니다.
예시: 아이템 획득 시 인벤토리 UI에 새 아이템 추가WBP_InventoryScreen)에 함수 정의WBP_InventoryScreen에AddItemToUI(F_ItemData ItemData)와 같은 커스텀 함수를 정의합니다.- 이 함수 안에서
WBP_InventorySlot을 동적으로 생성하고,ItemData를 전달하여 슬롯을 설정한 후,InventoryGrid에 추가하는 로직을 구현합니다. (2절 동적 UI 요소 생성 및 기본 관리 참조) - 컴파일하고 저장합니다.
BP_PlayerCharacter)에서 UI 함수 호출BP_PlayerCharacter에서 아이템 획득 로직으로 이동합니다.- 위젯을 만든 로컬 컨트롤러에 저장한
InventoryScreenRef를 가져옵니다.Get Widget of Class라는 단일 검색 노드를 가정하지 않습니다. - 타입이 지정된 참조가 유효한 경우
AddItemToUI를 호출합니다. 화면이 아직 생성되지 않았다면 게임 데이터는 유지하고, 나중에 화면을 열 때 최신 인벤토리로 초기화합니다. - 컴파일하고 저장합니다.
입력 모드 설정 (Input Mode)
UI와 게임플레이 간의 상호작용에서 입력 모드(Input Mode)는 매우 중요합니다.
언리얼 엔진은 세 가지 주요 입력 모드를 제공합니다.
입력 모드는 UI가 열리는 순간의 편의 기능이 아니라, 플레이어 입력이 어느 시스템으로 전달되는지를 정하는 기준입니다.
입력 모드별 전달 경로
| 모드 | 입력 처리 | 함께 설정할 것 |
|---|---|---|
| Game Only | Player Controller의 게임 입력 중심 | 필요한 커서 숨김과 게임 조작 복구 |
| UI Only | UI가 입력을 처리 | UI 내부의 닫기 입력, 포커스, 커서 표시 |
| Game And UI | UI가 먼저 처리하고 미처리 입력은 게임에 전달 | 어떤 키를 UI가 소비할지, 이동·시점 제한 여부 |
- 모드: Game Only
- 입력 처리: Player Controller의 게임 입력 중심
- 함께 설정할 것: 필요한 커서 숨김과 게임 조작 복구
- 모드: UI Only
- 입력 처리: UI가 입력을 처리
- 함께 설정할 것: UI 내부의 닫기 입력, 포커스, 커서 표시
- 모드: Game And UI
- 입력 처리: UI가 먼저 처리하고 미처리 입력은 게임에 전달
- 함께 설정할 것: 어떤 키를 UI가 소비할지, 이동·시점 제한 여부
커서 표시와 월드 일시정지는 입력 모드와 별도 설정입니다.
메뉴에만 집중시키려면 UI Only를, 채팅처럼 게임 조작도 일부 유지하려면 Game And UI를 검토합니다. 다만 텍스트 입력창이 소비한 키를 게임 쪽이 다시 받는다고 가정하면 안 됩니다.
일반적인 사용 흐름게임 시작 시: Set Input Mode Game Only (혹은 Game And UI if needed)
메뉴 열 때: Set Input Mode UI Only (마우스 커서 보이기)
메뉴 닫을 때: Set Input Mode Game Only (마우스 커서 숨기기)
입력 모드는 해당 로컬 Player Controller에 설정합니다. 포커스할 위젯도 지정하고, UI Only로 바꿨다면 게임 쪽 키 이벤트에만 닫기를 맡기지 말고 UI의 닫기 버튼이나 키 처리 경로를 제공해야 합니다. 입력 모드 변경만으로 월드가 일시정지되거나 서버 규칙이 검증되는 것은 아닙니다.
UI와 게임플레이 간의 상호작용은 게임의 핵심적인 사용자 경험을 결정합니다.
적절한 데이터 전달 방식과 입력 모드 설정을 통해 플레이어가 직관적이고 만족스러운 방식으로 게임을 즐길 수 있도록 해야 합니다.
이번 절에서는 UI와 게임플레이 로직이 어떻게 데이터를 주고받고 상호작용하는지에 대한 기본 개념과 주요 활용법을 알아보았습니다.
이벤트 디스패처, 직접 함수 호출, 데이터 바인딩, 그리고 입력 모드 설정은 UI 개발의 필수적인 요소들입니다.