3.Menu Widget ブループリントの作成

メニュー画面として使用する Widget ブループリントを作成します。

Windows
MacOS
Linux
On this page
  1. Unreal Editor[Compile (コンパイル)] ボタンを押して新規コードをビルドします。ビルドすると、ユーザー ウィジェット をメニューとして利用できるようになります。

    CompileFromEditor.png

  2. Game Mode でメニューとして使用する ユーザー ウィジェット を作成します。コンテンツ ブラウザ[Add New (新規追加)] ボタンを使用します。Widget Blueprint クラスは User Interface カテゴリにあります。1 つは MainMenu 、もう1つは NewGameMenu と名前を付けてウィジェットを 2 つ作成します。メイン メニューでゲームが開始して、New Game Menu へ進むオプションが表示されます。

    CreateWidgetBP.png

  3. 作成したばかりの MainMenu ウィジェット をダブルクリックすると、メニューレイアウトを作成することができる ブループリント デザイナ へ移動します。

  4. [Palette] パネル[Common (コメント)] セクションから [Button][Text]グラフ へドラッグしましょう。このボタンは最終的に New Game Menu を開くために使用します。

    AddButtonAndTextBlock.png

  5. レイアウトを正しく表示するために、最初にボタンの位置とサイズを調整します。以下の変更を加えます。 size を 200x200 に設定します。 position を (200, 100) に設定します。 * 後に機能を接続する際にすぐわかるように、名前を「NewGameButton」に変更します。

    ButtonDetails.png

  6. ボタン用に画像のカスタムセットを描画しないため、テキスト ブロックをドロップして名前をつけて、以下の変更を行うこともできます。 「New Game」 と入力します。 Visibility を [Hit Test Invisible] に変更すると、テキスト ブロックが下のボタンのクリックを妨げません。 * 名前を「NewGameText」に設定します。必須ではありませんが習慣として推奨します。

    TextBlockDetails.png

  7. 次に 2 番目のボタンとテキストブロックで "Quit" 機能を作成します。New Game のボタンとテキストブロックと同じ方法で設定しますが、以下の点は異なります。 [QuitButton] 用のボタン名を設定します。 Position を (600, 100) に設定します。 * [QuitText] 用のボタン名を設定します。

  8. その後、ボタンをクリックするとコードを実行するようにボタンに イベント を追加することができます。[Details (詳細)] パネル で、適切なイベント名の横にある "+" を検索し、クリックして追加します。この例では、OnClicked が唯一使用できるイベントです。このイベントを [NewGameButton] ウィジェットと [QuitButton] ウィジェットの両方に作成します。

    CreateOnClickedEvent.png

    デザイナーはここで ブループリント スクリプティングを利用して機能を構築することができます。もしくは、 C++ プログラマーは公開された関数を呼び出すノードを接続することも出来ます。

  9. OnClicked(NewGameButton) という名前のイベントに以下の設定を行います。 以前 Game Mode に追加した関数を使用するために ChangeMenuWidget ノードを接続します。 ChangeMenuWidget ノードの [New Widget Class] 入力フィールドに "NewGameMenu" アセットを設定します。

    OnClicked_NewGame.png

  10. OnClicked(QuitButton) Event に以下を設定します。 * **Quit Game** ノードに接続します。

    OnClicked_Quit.png


メインメニューを作成したら、レベルが開始すると同時にロードを行う Game Mode アセットを設定することができます。

完成コード

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 (スレート 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