Language:
Page Info
Engine Version:
The translation of this page is out of date. Please see the English version for the latest version of the page.

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

  1. アンリアルエディタ[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-2017 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-2017 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-2017 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-2016 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-2016 Epic Games, Inc. All Rights Reserved.

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

void AHowTo_UMGPlayerController::BeginPlay()
{
    Super::BeginPlay();
    SetInputMode(FInputModeGameAndUI());
}