UMG를 이용한 타이틀화면, Pause 그리고 HUD 구현하기

BP용으로 FPS를 생성한다.

Widget blueprint로 MainMenuWidget을 생성한다.

Background Image 구현.

anchors를 다음과 같이 설정하여 전체화면에 채운다.

원하는 이미지로 다음과 같이 설정한다.

타이틀을 넣기위해 text를 다음과 같이 생성한다.

다음과 같이 엥커를 설정한다.

버튼을 넣을 버티컬 패널을 먼저 생성한다.

다음과 같이 버튼2개를 생성해서 패널안에 생성한다.

텍스트 위젯도 버튼안에 넣어 생성한다.

각 버튼 padding을 다음과 같이 준다.

버튼의 텍스트를 다음과 같이 변경한다.

이젠 Play 버튼을 눌렀을때 게임을 실행하도록 다음과 같이 한다.

 

그래프를 누른후 다음과 같이 누른다.

 

이제 실행이 되는지 확인하기 위해

새로운 Empty레벨을 생성한다.

생성후 레벨을 더블클릭해서 Empty레벨을 띄운다.

그후, Widget을 생성하기 위해 다음과 같이 설정한다.

위와 같이 블루프린트 작업후 레벨로 돌아가 다음과 같이 게임모드를 변경한다.

그후 플레이 버튼을 누르면 다음과 같이 메인메뉴 화면이 나타난다.

 

하지만 마우스가 보이지 않는다.

다음과 같이 레벨 블루프린트를 설정한다.

컴파일후 게임을 실행하면.

마우스가 보이고 버튼을 클릭할 수 있다.

 

 

이젠 나머지 Quit 버튼도 블루프린트를 작성한다.

이젠 버튼을 누르면 게임이 종료 된다.

 

하지만 Play 버튼을 눌러 게임을 을 실행하면 더이상 캐릭터가 움직이지 않는다.

Ui Input 모드를 다시 변경해 주어야 한다.

다음과 같이 블루프린트 작성을 한다.

 

이젠 게임화면으로 넘어가면 캐릭터를 움직일 수 있다.

 

마지막으로 게임시작이 메인 메뉴에서 실행하도록 다음과 같이 설정을 변경한다.

 

이젠 캐릭터 HUD를 만들어보자

우선, 캐릭터의 총알수를 다음과 같이 10개로 제한한다.

 

캐릭터 블루프린터를 연다.

다음과 같이 변수를 생성한다.

그후 총알수를 제한하기 위해, 기존 InputActionFire 이벤트에 다음과 같이 중간에 추가한다.

총알을 발살할때마다 1씩 줄인다.

그후 플레이를 하면 10발만 사용가능하다.

 

이젠 AmmoLeft를 HUD에 연결하여 남은 총알갯수를 볼 수 있도록 하자.

 

PlayerHudWidget을 다음과 같이 만든다.

실행하여, 다음과 같이 위젯을 더한다.

 

 

다음과 같이 텍스트를 넣는다.

IsVariable을 채크하면 해당 텍스트를 변수로 참조가능하다.

 

이젠, 해당 HUD를 화면에 붙여보자

 

 

 

FirstPersonCharacter Blueprint를 연다.

다음과 같이 BeginPlay수정한다.

Promote to variable을 선택하면 다음과 같이 변수로 레퍼런스가 저장된다.

 

 

이젠 실행해보면 다음과 같이 보인다.

 

이젠 총알을 발사 할때마다 갯수를 줄여보자.

 

PlayerHUDWidget에 다음과 같이 함수를 추가한다.

이젠 이 함수를 캐릭터에서 총알을 발살할때마다 불러준다.

InputActionFire에 다음과 같이 추가한다.

 

이젠 플레이해보면 총알이 발사될때마다 갯수가 주는것을 볼 수 있다.

 

또한 Widget의 bind라는 기능을 사용 할 수 있지만, 매 틱마다 부르기 때문에 비용면에서 좋지 않다고한다.

 

 

다음은 Pause 화면을 구현해보자.

 

우선, Pause Widget을 생성한다.

 

다음과 같이 UI를 만든다.

BackgroundBlur는 일반적으로 우리가 생각하는 blur 처리이다.

 

이젠 Resume과 Quit 버튼의 OnClick을 다음과 같이 구현한다.

 

 

이젠 P키를 누르면 Pause화면이 생성되도록 만들어 보자.

 

FirstPersonCharacter Blueprint에 다음과 같이 추가한다.

컴파일후 플레이를 하면 P를 누르면 다음과 같이 Pause화면이 보인다.