[언리얼]배틀 그라운드 따라 만들기 #32 UI 만들기

안녕하세요 유랑입니다.

실력향상을 위해서 이번 시간부터는 유료 강의를 따라하면서 공부하겠습니다.

블루프린트와 엔진 버전은 4.18.3을 사용합니다^^

1. 배틀 그라운드 만들기

이번 강의는 얼론데브와 인프런에 있는 배틀 그라운드(로얄)을 만드는 강좌이며,

유료로 돈을 지불해야만 강의를 들을 수 있습니다.

저는 돈을 지불하였고, 스킬업을 위해서 복습겸 글을 올리겠습니다.

얼론데브 => https://alonedev.com/

인프런 => https://www.inflearn.com/

2. UI 만들기

오늘은 UI를 만들어 보겠습니다.

아이템을 주울 때 해당 정보를 알려주면 좋겠죠?ㅎㅎ

2-1) UI 만들기 -㉠위젯 블루프린트

UI작업을 위해 위젯 블루프린트를 만들어 주겠습니다.

이름은 'WidgetBP_Interaction'이라고 정해줄게요.

2-2) UI 만들기 -㉡Overlay

이미지랑 텍스트가 겹쳐야하니깐 Overlay 패널을 추가해 주세요.

자식으로 텍스트를 넣어줄텐데, 

텍스트 크기만큼 Overlay도 늘려주려면

'Size To Content'를 체크해 주시면 됩니다.

2-3) UI 만들기 -㉢Image

Image를 추가해 주시고 이름은 'Background'

검은색 배경이라고 생각하시면 되고,

늘려주어야 하기에 Alignment는 다음과 같이 설정해 주세요.

투명도는 절반 정도 맞춰주었습니다.

2-4) UI 만들기 -㉣Text

텍스트를 가로로 배치하기 위해 Horizontal Box를 추가하고,

그 밑에 텍스트 2개를 넣어주세요.

각각 내용은 다음과 같습니다.

패딩을 설정하여 간격을 조절하고,

Size는 30으로 늘려주겠습니다.

인터랙션내용은 아이템에 따라 수정을 해야하기에 

바인딩 생성을 해주겠습니다.

밖에서 텍스트를 건들 수 있는거죠!!

2-5) UI 만들기 -㉤바인딩

'InteractionText'라는 스트링 변수를 만들고

해당 변수를 바탕으로 텍스트 값을 변경하는 것이죠.

2-6) UI 추가 -㉠위젯 생성

플레이어 클래스로 가셔서 만든 위젯을 적용해 주겠습니다.

캡슐을 선택하고 'Widget'을 추가하고 이름을 변경해 주겠습니다.

위치를 캐릭터 우측편으로 수정하고,

위젯 클래스와 피벗들을 조절해 위치 조절을 하겠습니다.

위젯이 뜨는거 확인!!!

2-7) UI 추가 -㉡텍스트 변경

위젯을 화면에 띄었으면 이제 텍스트를 바꿀 수 있는지 확인해 보겠습니다.

BeginPlay 이벤트에서

위젯 클래스로 형변환 후

위젯의 있는 텍스트 부분을 가져와

값을 바꿔줍니다~~

값이 바뀌었네요ㅎㅎ

3. 마무리

오늘 강의는 여기까지입니다.

배틀그라운드를 따라하면서 UI를 만들고 적용해 보았습니다.

오늘도 고생하셨습니다.

감사합니다.

수업자료: 배틀 그라운드 따라 만들기 #32 UI 만들기