게임 시작 화면 타이틀 UI 제작.

오늘은 게임 시작 시 플레이어에게 보여질 메인 메뉴 UI를 제작 해보겠습니다. 

해당 UI는 게임 시작, 설정, 종료 기능을 담당하고 구현 순서는 다음과 같습니다.

 

구현 과정

1. 영상 파일 배치 

2. Media Player & Media Texture 생성

3. Material 생성 및 설정 

4. Widget Blueprint에서 UI 구성 

5. Player Controller 에서 Create UI 

6. Level 전환

구현 결과

 

영상 파일 배치

영상 파일 배치 폴더 구조

 

미디어 파일(mp4,avi,bk2)은 언리얼의 일반 에셋과 달리 .uasset 포맷으로 변환이 불가능하다.

 

언리얼은 빌드 시 모든 에셋을 .pak 파일로 압축하는데, 동영상은 스트리밍 방식으로 읽어야 하기 때문에 .pak 안에 포함시킬 수 없다.

 

따라서 동영상 파일은 원본 그대로 사용해야 하며, 언리얼은  Contents/Movies/ 폴더에 한해서만 원본 파일을 그대로 패키징하도록 파일 로딩 방식을 정해두었다.

 

만약 다른 폴더에 넣을 경우 에디터에서는 정상 동작 할 수 있지만, 실제 빌드(패키징)후에는 파일이 포함되지 않아 영상이 재생되지 않으므로, 영상은 반드시 Content/Movies/ 폴더 안에 배치하도록 하자. 

 

 

Media Player & Media Texture 생성

Media Player & Texture 생성

 

 

Media Player : 영상 파일을 재생하는 플레이어 역할을 한다. 영상을 열고, 재생/정지/반복 등을 제어하는 역할만 담당하며 화면에 
                          직접 출력하는 기능은 없다.

 

Media Texture :  Media Player가 재생하는 영상을 매 프레임마다 텍스처로 변환해주는 역할을 한다. 

                            즉, 영상을 UI나 3D 오브젝트에 그림처럼 붙일 수 있는 형태로 만들어주는 것이다. 

 

흐름으로 보면 다음과 같다.

 

Media UI Flow Chart

 

 

Material 생성 및 설정

Material 설정

 

Material Domain 목록은 다음과 같다.

 

• Surface :  3D 오브젝트 및 Mesh 
• User Interface : UMG Widget, UI에 적용
• Post Process : 후처리 효과에 적용 

현재 Widget에 해당 자료를 사용할 것이므로 User Interface로 설정해주자. 

그래야만,  UMG Widget에서 해당 Material을 인식하고 사용할 수 있게 되기 때문이다. 

 

 

Widget Blueprint에서 UI 구성 

Image에 Material 적용하기

 

Player Controller 에서 Create UI 

Player Controller

 

PlayerController는 언리얼에서 플레이어의 입력과 화면을 관리하는 주체입니다. 

UI는 플레이어에게 종속된 것이므로 해당 UI를 입력과 화면을 관리하는 주체인 Player Controller에서 Create Widget으로 Widget을 생성하고 Add ViewPort로 화면에 출력했습니다.

 

 

Button을 통한 레벨 전환

umap의 FName 가져오기

 

Open Level 노드의 Level Name에 이동할 레벨 이름을 입력하면 해당 문자열이 FName으로 변환되여 지정한 레벨로 전환된다.

 

이렇게 배경 영상 재생부터 버튼을 통한 레벨 전환까지, 게임 시작 화면 타이틀 UI를 구현해보았습니다.