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

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

Windows
MacOS
Linux
목차
  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

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼