본 캠프 3일차(UMG의 제작 및 연동)

3D 게임 개발이 처음이어도 언리얼 블루프린트로 쉽게 배우는 3D 게임 개발 강의 6-1

UMG의 제작 및 연동

위젯 블루프린트를 생성한다.

캔버스

위젯 블루프린트는 UI를 만들 수 있는 블루프린트인데 우선 캔버스 패널을 추가한다.

팔렛트에서 검색하고 아래로 드래그 하면 추가가 된다.

투명한 캔버스가 생성이 됐다.

텍스트

팔렛트에서 텍스트를 캔버스에 추가하니 캔버스에 텍스트 블럭이 생성됐다.

텍스트 블럭을 누르고 디테일 창을 보면 앵커(Anchors)가 있는데 정렬하는 기능이다.

앵커를 가운데로 했지만 텍스트 블럭은 그대로 있고 좌표만 바뀌었다.

좌표 값을 0,0으로 해주어야 텍스트 블럭이 가운데로 이동한다.

텍스트 블럭의 왼쪽 위를 기준으로 캔버스의 가운데 정렬이 됐다. 텍스트 블럭이 아예 캔버스의 중앙으로 옮기고 싶다면 정렬(Alignment을 0.5 0.5로 해야한다.

디테일 - Content - Text에서 글자를 바꾸면 다른 글자가 출력된다.

디테일 - 폰트에서 폰트에셋, 크기, 글자 간격 등을 변경할 수 있다.

이미지

이미지를 추가하면 캔버스 위에 이미지를 넣고 텍스처를 할당할 수 있다.

이미지도 앵커가 있는데 앵커를 전체화면으로 설정하면 오프셋 수치를 변경할 수 있는데 이는 좌 우 상 하단에서 얼마나 떨어질 것인지를 정하는 것이다. 즉, 모두 0으로 하면 화면이 꽉차게 이미지가 들어간다.

디테일 - 외형(Appearance) - 브러시(Brush) - 이미지에서 텍스처를 넣는다.

이미지를 넣으니 텍스트 블럭이 사라졌는데 디테일의 Z순서(ZOrder)를 바꿔주면 다시 나타난다.(Z순서가 클 수록 위에 있음.)

ZOrder를 1로 변경하니 이미지 위로 올라왔다. 변경전엔 0이였다.

버튼

버튼을 추가하고 버튼을 이용해 어떠한 이벤트가 발생하도록 구현하기 위해 디테일에 변수 여부에 체크를 한다.

이벤트 로직을 구현하기 위해 오른쪽 위의 그래프로 넘어가서 변수가 된 버튼을 드래그하여 이벤트 그래프에 배치한다.

버튼 이름이다.

버튼 핀에서 드래그해서 assign On Clicked를 생성하면 이 버튼이 눌렸을 때 이벤트를 발생하게 하는 Bind Event to On Clicked 노드와 이벤트 노드가 같이 생성된다.

버튼이 눌렸을 때 OnClicked_Event에 연결된 로직이 실행된다.

만든 위젯을 화면에 추가, 해제하는 방법

위젯은 주로 게임모드에서 다룬다.

전 강의에서 만들었던 BP_GameMode를 실행하여 함수 AddUI를 생성한다.

먼저 create widget 노드를 생성하여 위젯을 실존하게 만들어야한다.

Class에 만들어둔 위젯 넣기

위젯을 화면에 나타났다가 사라졌다가 시키기 위해 ReturnValue를 변수로 승격하고 이름을 Main Widget으로 변경한다.

위젯을 이 게임에 실존하게 만들었으니 화면에 보이도록 Add to Viewport 노드를 생성한다.

함수가 실행 될 때마다 위젯을 새로 생성하게 되는데 이미 있을때 필요가 없으므로 실행될 때 Branch와 Is Valid? 노드를 이용하여 이 문제를 해결한다.

이제 화면에서 위젯이 사라지는 함수 SubtractUI를 만든다.

Main Widget이 존재하면 Remove from Parent 노드로 위젯을 제거하여 사라지게 한다.

캐릭터가 소환될 때 위젯이 보이도록 구현하기

BP_Character에서 BeginPlay에 위젯이 나타나게 하는 함수가 있는 BP_Gamemode를 캐스팅하고 함수를 호출한다.

실행을 하니 만든 위젯이 잘 보인다(뒤에 캐릭터 살짝 보임)

위젯을 제거하려면 게임모드의 반대 함수인 SubtractUI를 호출하면 된다.