Unreal Engine 제작한 위젯 사용하는 방법

 

지난 글에서 위젯의 프론트엔드(Front End), 즉 디자인 작업을 완료했으니 이제 위젯이 제대로 작동할 수 있도록 백엔드(Back End) 로직을 구현해 보겠습니다.

---

1. 위젯을 게임 화면에 표시하기

위젯은 2D 객체이므로 단순히 씬(Scene) 에 드래그 앤 드롭 할 수 없습니다. 위젯을 화면에 띄우고 작동하게 하려면 별도의 블루프린트 클래스를 만들어 관리해야 합니다.

 

위젯 관리용 블루프린트 클래스 생성

1. 블루프린트 클래스 생성: 콘텐츠 브라우저에서 마우스 오른쪽 버튼을 클릭하고 블루프린트 클래스(Blueprint Class) 를 선택합니다.
2. 부모 클래스로 가장 일반적인 액터(Actor) 를 선택하고 이름을 BP_MyMenu라고 지정합니다.
3. BP_MyMenu를 더블 클릭하여 에디터를 엽니다.

 

게임 시작 시 위젯 실행 로직

1. 이벤트 삭제: 이벤트 그래프(Event Graph) 에서 기본으로 제공되는 Event Tick과 Event ActorBeginOverlap 노드는 삭제합니다.
2. Event BeginPlay 노드: 게임이 시작될 때 단 한 번 실행되는 Event BeginPlay 노드를 사용합니다.
3. Create Widget 노드: Event BeginPlay의 실행 핀에서 드래그하여 Create Widget 노드를 추가합니다.
4. 클래스 지정: Create Widget 노드의 Class 드롭다운 메뉴에서 이전에 작업했던 메뉴 위젯(Menu Widget) 클래스를 선택합니다.
5. Add to Viewport 노드: Create Widget 노드의 반환 값(Return Value) 핀에서 드래그하여 Add to Viewport 노드를 연결합니다. 이 노드가 위젯을 뷰포트에 추가하여 화면에 표시합니다.
6. 컴파일 및 저장: Compile 및 Save를 클릭합니다.

 

씬에 배치 및 테스트

1. BP_MyMenu 배치: 생성한 BP_MyMenu 액터를 레벨 씬에 드래그 앤 드롭합니다.
2. 플레이: 게임을 실행(Play)하면 이제 위젯이 화면에 완벽한 비율로 나타나는 것을 확인할 수 있습니다.

---

2. 위젯의 시각적 요소 조정 및 상호작용 구현

 

배경 투명도 조정 및 정리

1. 배경 제거: 위젯 블루프린트로 돌아가서, 이전 작업 시 사용했던 Main BG Trace와 같은 배경 트레이스(Background Trace) 요소를 이제 필요 없으므로 삭제합니다. (Transcript에서는 완전히 Delete했습니다.)
2. 배경 불투명도 조정: 메인 배경 요소의 불투명도(Opacity) 를 예를 들어 1.0(100%) 또는 0.8~0.9 정도로 조정하여 원하는 시각적 효과(배경이 완전히 선명해지거나 약간 반투명하게 유지)를 얻습니다.

 

버튼 하이라이트 및 클릭 상태 수정

• 버튼 상태 통일: 메뉴 위젯으로 돌아가서 Sitting Room(거실) 아이콘에 적용했던 Hovered 및 Pressed 상태의 색상(Color) 을 Living Room(생활 공간), Kitchen(주방) 아이콘에도 복사 및 붙여넣기하여 모든 버튼의 Hover(마우스 오버) 와 Clicked(클릭됨) 상태가 통일되도록 수정합니다.
• Pressed 문제 수정: 오디오/음악 관련 버튼 등에서 클릭 상태가 제대로 작동하지 않는 문제가 있다면, 해당 버튼의 On Pressed 이벤트에서 연결된 로직이 제대로 작동하는지 확인하고 수정합니다. (Transcript에서는 Music 관련 로직을 수정하여 클릭 시 색상 문제가 해결되었습니다.)

 

키 입력으로 UI/게임 모드 전환 및 마우스 제어

이제 Tab 키를 누를 때마다 UI 전용 모드와 게임 전용 모드를 전환하고, 마우스 커서를 보이게/숨기게 하는 기능을 구현합니다. 이 로직은 다시 BP_MyMenu의 이벤트 그래프에서 구현합니다.

1. Player Controller 가져오기: Get Player Controller 노드를 가져옵니다.
2. 입력 활성화: Event BeginPlay에 이어서 Get Player Controller를 타겟으로 Enable Input 노드를 연결합니다.

 

1. Tab 키 이벤트: 마우스 오른쪽 버튼을 클릭하고 Keyboard에서 Tab 키 이벤트를 추가합니다.

1. Flip Flop: Tab 키 이벤트의 실행 핀에서 Flip Flop 노드를 연결합니다.
   • Flip Flop은 한 번 실행되면 A 핀을, 다음 번 실행되면 B 핀을 번갈아 실행하게 해주는 노드입니다.
2. 입력 모드 설정 (A 핀):
   • A 핀에 Set Input Mode UI Only 노드를 연결합니다.
   • 이 노드는 위젯에만 입력이 집중되도록 합니다.
   • Player Controller를 타겟으로 연결합니다.
3. 입력 모드 설정 (B 핀):
   • B 핀에 Set Input Mode Game Only 노드를 연결합니다.
   • 이 노드는 모든 입력을 다시 게임 플레이에 집중시킵니다.
   • Player Controller를 타겟으로 연결합니다.

1. 마우스 커서 표시/숨기기:
   • Set Input Mode UI Only에 이어서 Show Mouse Cursor 노드를 추가하고 Show Mouse Cursor를 체크(True) 합니다.
   • Set Input Mode Game Only에 이어서 Show Mouse Cursor 노드를 복사/붙여넣기하여 추가하고 Show Mouse Cursor를 체크 해제(False) 합니다.
2. 이 로직은 다음과 같이 작동합니다:
   • 첫 번째 Tab: Set Input Mode UI Only가 실행되어 마우스 커서가 나타나고 위젯 상호작용만 가능해집니다.
   • 두 번째 Tab: Set Input Mode Game Only가 실행되어 마우스 커서가 사라지고 게임 조작이 가능해집니다.

 

포커스 모드 문제 해결

Tab 키를 눌렀을 때 언리얼 내부의 포커스(Focus) 모드로 인해 화면이 이상해지는 문제를 해결해야 합니다.

1. 위젯 선택: 메뉴 위젯으로 돌아가서 모든 버튼 및 상호작용 가능한 요소를 선택합니다.
2. Is Focusable 비활성화: Details(세부 정보) 패널에서 Focus 관련 설정을 찾아 Is Focusable 속성을 체크 해제(Off) 합니다.

 

이렇게 하면 위젯의 사용자 인터페이스는 Tab 키로 완벽하게 작동하고, Shift + F1을 누를 필요 없이 게임 내에서 Tab 키로 마우스 커서를 활성화하여 위젯을 조작할 수 있습니다.