[Unreal]18.UI 알아보기 #1 - 위젯 만들기

안녕하세요 유랑입니다.

오늘부터 언리얼에 쓰이는 UI에 대해 알아보겠습니다.

UI는 어떻게 만들어 질까요?

1. 위젯 만들기

위젯블루프린트를 사용해서 간단한 UI를 제작해 보겠습니다.

1-1) 프로젝트 준비

블루프린트 내려보기 템플릿을 사용해서 프로젝트를 생성해 주겠습니다.

1-2) 위젯 블루프린트 - ㉠생성

블루프린트 폴더에다가 위젯을 만들어 보도록 하겠습니다.

마우스 우측 버튼을 이용해 위젯 블루프린트를 생성해 주세요^^

위젯의 에디터 화면은 다음과 같습니다.

위젯은 UI 디자인을 할 수 있는 디자이너와 기능을 구현하기 위한 그래프가 존재합니다.

1-3) 위젯 블루프린트 - ㉡Text

팔레트에는 다양한 UI 기능들이 존재합니다.

그 중에서 Text를 추가해 주겠습니다~~~

추가한 Text는 캔버스 패널 밑으로 들어가게 됩니다.

이 부분은 천천히 알아볼게요.

우측에 보이는 디테일 패널을 보시면 Text의 위치와 이름변경도 가능합니다.

사이즈도 바꿔주겠습니다!!!

1-4) 위젯 블루프린트 - ㉢Text Box

이번에는 Text Box를 추가해 주세요.

크기와 위치는 밑에 보이는 그림처럼 지정해 줬습니다.

1-5) 위젯 블루프린트 - ㉣Button

버튼도 추가해 줄텐데요.

이제 어느정도 형태가 만들어졌네요.

TextBox에 무언가 입력을 하고, 버튼을 클릭하면 입력된 값이 출력되는 기능을 구현중이랍니다.

Button은 이름을 쓰는 기능을 갖고있지 않아요.

그렇기에 Button 자식으로 Text를 추가해 주겠습니다.

이름뿐만 아니라 색깔 또한 바꿔주겠습니다.

짜잔 이제 위젯은 완성되었습니다.

1-6) 위젯 생성

만든 위젯을 띄어볼텐데요.

띄우는 로직잡업을 TopDownController에다가 해주겠습니다.

컨트롤러 => 이벤트 그래프로 가신 후 BeginPlay를 추가해 주세요.

게임 시작시 위젯 생성을 하기위해서 BeginPlay를 사용하겠습니다.

CreateWidget 기능을 사용하면 위젯 생성이 가능해 집니다.

꼭 클래스에다가 Widget_UI를 추가해 주세요.

그래야 해당 위젯이 생성이 됩니다.

위젯 생성은 되었지만 화면에는 보여지지 않습니다.

Add to Viewport를 사용해야 화면에 만든 위젯이 보여지게 됩니다.

2. 마무리

오늘은 위젯 블루프린트를 이용해 간단한 UI를 만들어보았습니다.

언리얼 UI 생각보다 어렵지 않네요ㅎㅎ

다음 시간에도 UI에 대해 알아보도록 하겠습니다.

오늘도 고생하셨습니다.

감사합니다.

수업자료: https://github.com/YouRang12/-Tistory-Unreal---Basic