Unreal Engine 화면에 메뉴 만들기

 

대표사진 삭제

AI 활용 설정

사진 설명을 입력하세요.

화면에 메뉴를 표시하고 명령을 줄 수 있도록 메뉴창을 만들려고 합니다. 먼저 User Interface 에서 widet Blueprint를 만들어 줍니다.

 

Widget Blueprint (위젯 블루프린트)는 언리얼 엔진의 UMG (Unreal Motion Graphics) UI Designer 시스템을 사용하여 사용자 인터페이스(UI) 요소를 제작하는 데 사용되는 특별한 종류의 블루프린트입니다. 게임의 HUD (체력바, 미니맵 등), 메인 메뉴, 인벤토리, 옵션 창 등 화면에 표시되는 모든 요소를 만드는 데 사용됩니다.

 

1. Widget Blueprint의 구조

Widget Blueprint는 크게 두 가지 핵심 편집 모드로 나뉩니다.

 

A. Designer (디자이너) 

UI 요소를 시각적으로 배치하고 디자인하는 곳입니다.

• Palette (팔레트): 버튼, 텍스트 블록, 이미지, 슬라이더, 패널 등 미리 만들어진 다양한 UI 컴포넌트(위젯) 목록입니다. 이들을 드래그 앤 드롭하여 디자인 영역에 배치합니다.
• Visual Designer (시각 디자이너): 화면의 레이아웃을 미리 볼 수 있는 캔버스입니다. 여기서 위젯의 크기, 위치, 앵커(Anchor) 등을 조정하여 다양한 해상도와 화면 비율에 맞게 UI를 배치합니다.
• Hierarchy (계층 구조): 위젯들이 부모-자식 관계로 어떻게 구성되어 있는지 보여줍니다. 컨테이너 위젯(예: Canvas Panel, Vertical Box)은 자식 위젯을 포함하여 레이아웃을 구조화하는 데 사용됩니다.
• Details (디테일): 선택된 위젯의 속성(색상, 글꼴, 텍스트 내용, 정렬, 바인딩 등)을 세부적으로 설정합니다.

 

B. Graph (그래프) 

UI 요소가 어떻게 작동할지 로직을 구현하는 곳입니다. 일반적인 블루프린트 이벤트 그래프와 동일하게 작동합니다.

• 이벤트: 버튼 클릭 (On Clicked), 슬라이더 값 변경 (On Value Changed) 등 사용자의 입력에 반응하는 이벤트를 생성합니다.
• 바인딩 (Binding): UI의 속성(예: 체력바의 진행률, 점수 텍스트의 내용)을 게임 내 변수와 연결하는 기능입니다. 이 기능을 통해 변수 값이 변경될 때마다 UI가 자동으로 업데이트됩니다.
• 함수 및 커스텀 이벤트: 복잡한 UI 로직(예: 메뉴 열기/닫기, 아이템 사용)을 처리하기 위한 함수나 이벤트를 정의하고 실행합니다.

 

2. Widget Blueprint의 사용 과정

1. 위젯 생성: 콘텐츠 브라우저에서 Add New → User Interface → **Widget Blueprint**를 선택하여 새 위젯 블루프린트를 만듭니다.
2. 디자인: 디자이너 모드에서 필요한 버튼, 텍스트, 이미지를 배치하고 시각적 레이아웃을 완성합니다.
3. 변수화 (Is Variable): 그래프 모드에서 접근하고 싶은 위젯(예: 버튼, 체력바)을 선택하고 디테일 창에서 **Is Variable**을 체크하여 변수화합니다.
4. 로직 구현: 그래프 모드에서 이벤트 노드(예: 버튼의 On Clicked)를 만들고, 해당 이벤트가 발생했을 때 실행할 게임 로직(예: 레벨 로드, 캐릭터 함수 호출)을 블루프린트로 구현합니다.
5. 화면에 추가: 최종적으로, Player Controller나 Character Blueprint와 같은 게임 로직 블루프린트에서 Create Widget노드와 Add to Viewport 노드를 사용하여 완성된 위젯 블루프린트를 게임 화면에 표시합니다.

 

Widget Blueprint를 통해 코딩 없이도 풍부하고 상호작용적인 UI를 효율적으로 구축할 수 있습니다.

대표사진 삭제

AI 활용 설정

사진 설명을 입력하세요.

먼저 Canvas Panel 만들어 화면에 드래그해준다.

대표사진 삭제

AI 활용 설정

사진 설명을 입력하세요.

Image를 Drag 해서 놓습니다.

대표사진 삭제

AI 활용 설정

사진 설명을 입력하세요.

이미지를 넣어준다.

대표사진 삭제

AI 활용 설정

사진 설명을 입력하세요.

Button을 만들어 설정해 준다.

 

위젯 블루프린트에서 Image (이미지) 노드와 Button (버튼) 노드는 UI를 구성하는 가장 기본적인 요소입니다. 두 노드의 기능과 특징에 대해 설명해 드리겠습니다.

---

Image (이미지) 노드

Image 노드는 위젯 블루프린트 화면에 그림, 텍스처, 아이콘 등을 표시하는 데 사용됩니다.

 

주요 역할 및 속성

• 표시: 배경 이미지, 장식용 그래픽, 아이템 아이콘, 플레이어 초상화 등 모든 종류의 시각적 요소를 표시합니다.
• Source (소스): 디테일 창에서 Appearance 섹션의 Brush 속성을 통해 이미지 소스를 지정합니다.
• Texture: 프로젝트에 임포트된 Texture 2D 애셋을 연결하여 이미지를 표시합니다.
• Material: 동적인 효과나 복잡한 애니메이션이 필요한 경우 Material을 연결할 수 있습니다.
• Color and Opacity (색상 및 불투명도): 이미지에 색조를 입히거나 투명도를 조절할 수 있습니다.
• Draw As (그리기 방식): 이미지를 어떻게 표시할지 설정합니다.
• Image: 일반적인 이미지 표시 방식입니다.
• Box: 9-Slice 스케일링을 사용하여 버튼 배경처럼 가장자리는 유지하고 중앙만 늘리는 방식입니다. UI 요소의 크기가 변해도 가장자리의 해상도를 유지할 때 유용합니다.
• Blending (블렌딩): 이미지의 투명도를 설정하여 다른 위젯과 겹쳤을 때의 모양을 제어할 수 있습니다.

---

👆Button (버튼) 노드

Button 노드는 사용자에게 상호작용 가능한 영역을 제공하여 클릭을 감지하고 해당 이벤트에 따라 로직을 실행하는 데 사용됩니다.

 

주요 역할 및 구조

버튼 자체는 시각적으로 버튼의 모양을 담당하며, 일반적으로 그 안에 **Text (텍스트)**나 Image (이미지) 같은 다른 위젯을 자식으로 포함하여 버튼의 내용을 구성합니다.

 

주요 속성 (Style)

버튼의 시각적 모양은 Style 섹션에서 여러 상태에 따라 다르게 설정됩니다.

• Normal (기본): 마우스 커서가 버튼 위에 있지 않을 때의 모양입니다.
• Hovered (호버): 마우스 커서가 버튼 위에 올라왔을 때의 모양입니다. (피드백 제공)
• Pressed (눌림): 버튼이 클릭되는 순간의 모양입니다.

 

주요 이벤트 (Interaction)

버튼 노드는 사용자의 입력에 반응하는 다음과 같은 중요한 이벤트 함수를 Graph 탭에서 제공합니다.

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가
• 2열 선택2열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가
• 4행 선택4행 다음에 행 추가
• 5행 선택5행 다음에 행 추가

셀 전체 선택

열 너비 조절

행 높이 조절

이벤트	발생 시점	용도
On Clicked	마우스를 누른 후 놓을 때 (일반적인 클릭)	메뉴 열기, 게임 시작, 액션 실행 등 주된 로직 실행
On Pressed	마우스 버튼을 누르는 순간	버튼을 누르고 있는 동안 효과음 재생 등
On Released	누르고 있던 마우스 버튼을 뗄 때	On Clicked와 유사하지만, Pressed 상태 이후의 종료 로직에 사용
On Hovered	마우스 커서가 버튼 영역에 진입할 때	버튼 하이라이트 효과, 툴팁 표시
On Unhovered	마우스 커서가 버튼 영역에서 벗어날 때	하이라이트나 툴팁을 제거

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

Button 노드를 사용하면 복잡한 블루프린트 코딩 없이도 사용자 입력에 반응하는 UI를 쉽게 만들 수 있습니다.

 

대표사진 삭제

 

AI 활용 설정

사진 설명을 입력하세요.

Text (텍스트) 노드의 역할과 기능

 

1. 텍스트 표시 (Content)

Text 노드의 가장 기본적인 기능은 화면에 문자열을 표시하는 것입니다.

• Content (내용): 디테일 창에서 Content 섹션의 Text 속성에 직접 원하는 문자열을 입력하여 표시할 수 있습니다.
• Localization (현지화): 텍스트 노드는 현지화(다국어 지원) 시스템을 지원하므로, 여러 언어로 게임을 서비스할 때 자동으로 텍스트를 전환할 수 있습니다.

 

2. 스타일 및 서식 설정 (Appearance)

텍스트의 모양을 세밀하게 조정할 수 있습니다.

• Font (폰트): 사용하려는 글꼴 애셋을 지정하고, 글꼴 크기, 두께, 기울임 등을 설정합니다.
• Color and Opacity (색상 및 불투명도): 텍스트의 색상과 투명도를 설정합니다.
• Justification (정렬): 텍스트 블록 내에서 텍스트를 왼쪽, 오른쪽, 가운데 중 어디에 정렬할지 지정합니다.
• Wrapping (줄바꿈): 텍스트가 노드의 지정된 너비를 초과할 경우 자동으로 다음 줄로 넘어가도록 설정할 수 있습니다.

 

3. 데이터 바인딩 (Binding) 

Text 노드는 게임 내 변수나 함수에서 가져온 실시간 데이터를 표시하는 데 가장 많이 사용됩니다. 이를 **바인딩(Binding)**이라고 합니다.

• 바인딩 설정: 디테일 창의 Content 섹션에 있는 Text 속성 옆의 드롭다운 메뉴를 클릭하고 **Create Binding**을 선택합니다.
• 작동 방식: 이 기능은 위젯 블루프린트의 Graph 탭에 새로운 바인딩 함수를 생성합니다. 개발자는 이 함수 안에 플레이어의 체력 변수, 점수 변수, 또는 탄약 수 등을 가져와 문자열로 변환하고 반환하는 로직을 구현합니다.
• 결과: 게임이 실행되는 동안 언리얼 엔진은 이 바인딩 함수를 매 프레임 또는 주기적으로 호출하여, 변수 값이 변경될 때마다 텍스트 노드에 표시되는 내용이 자동으로 업데이트되도록 합니다.

 

예를 들어, 캐릭터 블루프린트의 체력 변수(Float)를 텍스트 노드에 바인딩하여, 체력이 75%로 떨어지면 텍스트 노드에 "Health: 75"가 표시되도록 설정할 수 있습니다.