TrickyDroneDelivery: UI 구현

이전에는 GameMode/GameState를 이용해서 간단한 게임 룰을 만들어봤다. 하지만 단순 로그로 게임 진행상황을 표시하는 정도로는 게임이 아쉬울 것이다. 이번엔 UI를 추가하여 더 게임스럽게 만들어보자.

HUD 생성

UMG(Unreal Motion Graphic)을 이용하면 손쉽게 UI를 구성할 수 있다. HUD(Head-Up Display)로 남은 목숨(부서져도 되는 상자), 남은 상자, 남은 시간을 표시하도록 해보자.

WBP_HUD를 만들고 캔버스에 텍스트 블록들을 추가해줬다. 왼쪽 위에는 레벨과 점수, 오른쪽 위에는 남은 시간와 목숨을 표시한다. 단순 텍스트만 띄우는 것으론 의미가 없을 것이다. 이전에 추가해놓은 델리게이트를 이용해 일정시간마다 UI를 업데이트 하도록 해보자. 매 틱마다 업데이트한다면 지금 수준의 간단한 게임은 상관 없겠지만 성능에 꽤나 부하를 줄 수 있을 것이다.

//DronePlayerController.h
//...
UCLASS()
class TRICKYDRONEDELIVERY_API ADronePlayerController : public APlayerController
{
	GENERATED_BODY()
public:
  //...
	UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = UI)
	TSubclassOf<UUserWidget> HUD;


	virtual void BeginPlay() override;
};

PlayerController에 UserWidget클래스를 저장할 수 있는 변수를 UPROPERTY()로 선언하고 에디터에서 등록해줬다. 그리고 UI를 업데이트 하는 함수 UpdateHUD()를 만들고 델리게이트에 등록, 0.1초마다 호출되어 시간과 점수등 정보가 업데이트된다.다. 플레이해보면 진행에 따라 숫자가 바뀌는 것을 볼 수 있다.

시작 메뉴

게임을 시작하자마자 게임화면부터 보이면 갑작스러울 것이다. 시작화면을 추가해보자. 새로운 레벨을 생성해주고 시작버튼을 가지는 UI, 스플래시로 쓰던 그림을 배경화면으로 사용하겠다.

게임 시작 버튼이 StartLevel() 함수와 연결되어 새로운 레벨을 불러오는 것을 볼 수 있다.

게임오버 메뉴

이전에 이미 게임 오버 조건들에 대해 만들어놓고 로그 출력을 넣어놨다. 게임오버 UI를 만들고 로그 대신 UI를 띄우도록 만들어보자.

게임오버 조건을 만족했을 때 PlayerContoller에 등록 된 게임오버 UI를 호출하도록 구성했다. 재시작 버튼을 누르면 메인화면으로 돌아가 게임을 진행할 수 있다.