[ Unreal Engine 4 ] UI_User Interface

목차 1. UI 개요 2. Unreal Engine UI 적용

 

---

 

1. UI 개요

 

User Interface 란 ?

- 사용자가 버튼을 조작하거나, 콘텐츠가 정보를 제공하는 것을 통해 사용자와 콘텐츠가 서로 인터렉션 할 수 있도록 도와주는 것. 즉, 중간다리 역할을 한다.

 

Inter + Face Inter는 서로 상호간의 라는 뜻. Face는 얼굴. 즉, 서로 대화하게 만든다는 뜻.

 

2. Unreal Engine UI 만들기

 

UI 에셋을 적용시키기 위한 언리얼엔진 도구 위젯블루프린트를 사용한다.

위젯 블루프린트는 블루프린트 비주얼 스크립팅 를 사용하여 레이아웃을 디자인하고, 버튼을 클릭했을 때나 값이 변하는 등의 상황에서 어떻게 하는지와 같은 UI 요소의 스크립트 함수 기능도 짤 수 있다.

 

위젯블루프린트 생성

 

위젯블루프린트의 모습

 

 

3. UI 적용하기

 

중요한 노드 - Create Widget - Add to Viewport

 

위젯블루프린트는 말그대로, 위젯의 개념을 가지고 있기 때문에 레벨블루프린트에 미리 만들어놓은 UI를 담을 수 있도록 Create Widget을 만들어 담아야한다. 그리고 마지막으로, 화면에 보이게 하기 위해 Add to Viewport로 보이게 한다.

 

Create Widget 과 Add to Viewport

 

---

 

 

4. 전체 이미지 배치, 기준점 잡기 ( Anchor )

 

기존의 기준점은 화면 왼쪽 상단에 위치해있기 때문에, 그 기준대로 화면이 커지고 작아진다.

따라서, 작은 모니터로 플레이하면 비율이 달라지기 때문에 기준점을 동일하게 맞춰주어야한다.

디테일패널에서 오른쪽하단에 퍼지는 기준점을 설정 해줄 수 있다.

 

퍼지는 기준점을 선택하면, 오프셋 값들을 설정 할 수 있다.

오프셋이란, 기준점에서 얼만큼 떨어져있는지를 의미한다. 따라서, 이미지를 전체적으로 배치하려면 모든 오프셋 값을 0으로 맞춰주면 꽉 찬 화면을 설정 할 수 있다.

 

 

5. 서브이미지배치

 

원본 사이즈 그대로 사용하고 싶으면, 디테일 패널에 Size To Content 를 체크해주면 된다.

---

 

6. 버튼 만들고, 작동하기

 

6-1. 버튼 디자인

 

티테일 패널 - > Appearance -> Style 에서 버튼을 누르거나 마우스 커서를 올려두었을 때의 디자인 요소를 정할 수 있다.

 

6-2. 버튼을 누르면 다른 레벨로 가게하기

 

먼저, 만들어진 UI Level 과 UI Level에서 Start Button 버튼을 누르면 나올 다음 레벨을 준비한다.

Level 들

 

위젯블루프린트안에 만들어진 버튼의 디테일 패널을 들어가면, 맨 하단에 버튼을 클릭했을 때에 이벤트를 설정 할 수 있다.

 

Event

 

 

---

7. 텍스트 넣고, 애니메이션 플레이하기

 

왼쪽하단에서 +Animation 버튼으로 애니메이션을 추가하고, 타임라인에서 +Track 버튼으로 애니메이션을 부여할 대상을 선택한다. 그리고 만들어진 트랙에서 어떤 이벤트를 추가할지 선택한다.

 

시퀀서와 동일한 구조다.

 

만들어 놓은 애니메이션을 블루프린트로 언제 플레이할지 설정한다.

 

만들어 놓은 애니메이션을 플레이 할 것이기 때문에, 참조는 해당 애니메이션이다.

그 다음으로, 해당 애니메이션을 언제 플레이 할지 정해주는 것이다.

Event Construct 노드로 해당 레벨이 실행될때 플레이하도록 한다.

 

 

---

8. 바인딩

 

게임 상 화면에 캐릭터의 체력과 능력 등을 표시하는 UI를 만들어보자.

캐릭터의 상태에 관한 것이기 때문에 캐릭터와 UI의 연결(바인딩)이 필요하다.

 

8-1. UI를 만들고, 레벨블루프린트로 화면에 표시한다.

UI를 만들고, 레벨블루프린트로 화면에 표시한다.

 

8-2. 해당 캐릭터 블루프린트에 UI와 연결시킬 변수를 만들어준다.

MYHP

 

8-3. UI에서 바인딩 시켜주기

 

캐릭터의 상태에 관한 것이기 때문에 캐릭터와 UI의 연결(바인딩)이 필요하다.

디테일 패널에 Bind

 

Create Bind를 누르면, 새 스크립트 창이 뜬다.

첫번째 블럭이 지속적으로 신호를 보내고, 두번째 블럭이 반환 값을 반환한다.