3. 메뉴 위젯 블루프린트 생성

메뉴 화면으로 사용할 위젯 블루프린트를 만듭니다.

Windows
MacOS
Linux
On this page
  1. 언리얼 에디터 에서 컴파일 버튼을 누르면 새 코드를 빌드합니다. 이를 통해 유저 위젯 을 메뉴로 사용할 수 있게됩니다.

    CompileFromEditor.png

  2. 이제 게임 모드 가 메뉴로 사용할 유저 위젯 을 생성하겠습니다. 콘텐츠 브라우저 의 "신규 추가 버튼으로 시작합니다. Widget Blueprint** (위젯 블루프린트) 클래스는 "유저 인터페이스" 카테고리에서 찾을 수 있습니다. 이걸 두 개 만들어야 하는데, 이름을 하나는 "MainMenu" (메인 메뉴), 다른 하나는 "NewGameMenu" (새 게임 메뉴)라 합니다. 게임은 메인 메뉴에서 시작하며, 새 게임 메뉴로 진행하는 옵션이 있을 것입니다.

    CreateWidgetBP.png

  3. 방금 만든 "메인 메뉴" 위젯 을 더블클릭하면 블루프린트 디자이너 창이 열리며, 여기서 메뉴 레이아웃을 만들 수 있습니다.

  4. 팔레트 패널 의 "일반" 섹션에서 Button (버튼)과 Text (텍스트)를 끌어 그래프 에 놓읍시다. 이 버튼 은 새 게임 메뉴를 여는 데 사용될 것입니다.

    AddButtonAndTextBlock.png

  5. 제대로 된 레이아웃을 만드는 첫걸음은, 버튼 위치와 크기를 조정하는 것입니다. 다음과 같이 변경해 줘야 할 것입니다: 크기를 200x200 으로 설정합니다. 위치를 (200, 100) 으로 설정합니다. * 이름을 "NewGameButton" 으로 변경, 나중에 함수성 연결을 해 줄 때 알아보기 쉽게 하기 위해서입니다.

    ButtonDetails.png

  6. 버튼 에 대한 이미지 커스텀 세트를 그리고 있지는 않으므로, 그 위에 Text Block (텍스트 블록)을 끌어놓고 다음과 같이 변경하여 라벨을 붙여주면 됩니다: 텍스트를 "New Game" 이라 설정합니다. 비저빌리티를 Hit Test Invisible 로 변경합니다. 그러면 그 아래 버튼 을 누르려는 마우스 클릭을 텍스트 블록 이 가로채지 않습니다. * 이름을 "NewGameText" 라 합니다. 필수는 아니지만 들여두면 좋은 습관입니다.

    TextBlockDetails.png

  7. 다음, 둘째 버튼텍스트 블록 으로 "Quit" (종료) 기능을 만들고자 합니다. 다음을 제외하고는 "New Game" 버튼텍스트 블록 과 비슷한 방식으로 구성합니다: 버튼 이름은 QuitButton 으로 설정합니다. 버튼 위치를 600, 100 으로 설정합니다. * 텍스트 블록 이름을 QuitText 로 설정합니다.

  8. 그 다음, 버튼 을 클릭했을 때 코드를 실행하도록 버튼이벤트 를 추가해 줍니다. 디테일 패널 에서 적합한 이벤트 이름 옆의 "+" 버튼을 찾아 누르면 됩니다. 이 경우 "OnClicked" (클릭시) 가 찾는 이벤트 입니다. NewGameButton 및 QuitButton 위젯 둘 다에 대해 이 이벤트를 생성합니다.

    CreateOnClickedEvent.png

    여기서 디자이너는 블루프린트 스크립트로 함수성을 만들거나, C++ 프로그래머는 노출된 함수를 호출하는 노드를 연결하면 됩니다.

  9. "OnClicked(NewGameButton)" 라는 이벤트 에 대해, 다음과 같은 작업을 합니다: ChangeMenuWidget 노드를 연결하여 앞서 게임 모드 에 추가한 함수를 사용합니다. ChangeMenuWidget 노드의 New Widget Class 칸을 "NewGameMenu" 애셋으로 설정합니다.

    OnClicked_NewGame.png

  10. "OnClicked(QuitButton)" 이벤트 에 대해서는: * "Quit Game" 노드를 연결합니다.

    OnClicked_Quit.png


메인 메뉴를 만들었으니, 레벨이 시작되면 메인 메뉴를 로드하는 게임 모드 애셋을 구성해 주면 되겠습니다.

완성 코드

HowTo_UMG.Build.cs

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.

using UnrealBuildTool;

public class HowTo_UMG : ModuleRules
{
    public HowTo_UMG(TargetInfo Target)
    {
        PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "UMG" });

        //PrivateDependencyModuleNames.AddRange(new string[] {  });

        // Uncomment if you are using Slate UI
        PrivateDependencyModuleNames.AddRange(new string[] { "Slate", "SlateCore" });

        // Uncomment if you are using online features
        // PrivateDependencyModuleNames.Add("OnlineSubsystem");
        // if ((Target.Platform == UnrealTargetPlatform.Win32) || (Target.Platform == UnrealTargetPlatform.Win64))
        // {
        //      if (UEBuildConfiguration.bCompileSteamOSS == true)
        //      {
        //          DynamicallyLoadedModuleNames.Add("OnlineSubsystemSteam");
        //      }
        // }
    }
}

HowTo_UMGGameMode.h

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.

#pragma once

#include "Blueprint/UserWidget.h"
#include "GameFramework/GameModeBase.h"
#include "HowTo_UMGGameMode.generated.h"

/**
    * 
    */
UCLASS()
class HOWTO_UMG_API AHowTo_UMGGameMode : public AGameModeBase
{
    GENERATED_BODY()

public:
    /** Remove the current menu widget and create a new one from the specified class, if provided. */
    UFUNCTION(BlueprintCallable, Category = "UMG Game")
    void ChangeMenuWidget(TSubclassOf<UUserWidget> NewWidgetClass);

protected:
    /** Called when the game starts. */
    virtual void BeginPlay() override;

    /** The widget class we will use as our menu when the game starts. */
    UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "UMG Game")
    TSubclassOf<UUserWidget> StartingWidgetClass;

    /** The widget instance that we are using as our menu. */
    UPROPERTY()
    UUserWidget* CurrentWidget;
};

HowTo_UMGGameMode.cpp

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.

#include "HowTo_UMG.h"
#include "HowTo_UMGGameMode.h"

void AHowTo_UMGGameMode::BeginPlay()
{
    Super::BeginPlay();
    ChangeMenuWidget(StartingWidgetClass);
}

void AHowTo_UMGGameMode::ChangeMenuWidget(TSubclassOf<UUserWidget> NewWidgetClass)
{
    if (CurrentWidget != nullptr)
    {
        CurrentWidget->RemoveFromViewport();
        CurrentWidget = nullptr;
    }
    if (NewWidgetClass != nullptr)
    {
        CurrentWidget = CreateWidget<UUserWidget>(GetWorld(), NewWidgetClass);
        if (CurrentWidget != nullptr)
        {
            CurrentWidget->AddToViewport();
        }
    }
}

HowTo_UMGPlayerController.h

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.

#pragma once

#include "GameFramework/PlayerController.h"
#include "HowTo_UMGPlayerController.generated.h"

/**
    * 
    */
UCLASS()
class HOWTO_UMG_API AHowTo_UMGPlayerController : public APlayerController
{
    GENERATED_BODY()

public:
    virtual void BeginPlay() override;
};

HowTo_UMGPlayerController.cpp

// Copyright 1998-2018 Epic Games, Inc. All Rights Reserved.

#include "HowTo_UMG.h"
#include "HowTo_UMGPlayerController.h"

void AHowTo_UMGPlayerController::BeginPlay()
{
    Super::BeginPlay();
    SetInputMode(FInputModeGameAndUI());
}
Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback