5.セカンド メニューを構築する

新しい機能を搭載したセカンド メニューを構築します。

Windows
MacOS
Linux
このページ中
  1. コンテンツブラウザ で以前に作成済みの "NewGameMenu" アセットを検索して開きます。このメニューには、名前を入力する テキストボックス、名前を入力するまでクリックできないゲームプレイ用の ボタン、メインメニューに戻るボタンがあります。

  2. 名前の入力欄を作成するには、Text Box ( Text Block ではありません) をレイアウトへドラッグします。

    CreateTextEntryBox.png

  3. Text Box は以下の値で設定します。

    • [NameTextEntry] の名前を変更します。

    • Position は (325, 200) に設定。この値に設定することで、Text Block を Text Box の左に配置するための余白ができます。

    • [Size] は 250x40 に設定。

    • ([Style] ヘッダの下) の [Font size] は 20 に設定。

    TextBoxDetails.png

  4. 前回のメニューに作成したボタンと同じ方法で Text Block ラベルを使用してプレイゲーム ボタンを作成することができます。

    • Button の設定値PlayGameButton 名を変更し、[Position (位置)] を 200 と 300、Size を 200, 100 に設定します。

    • Text Block の設定値PlayGameText 名を変更し、Visibility (ビジビリティ) を [Hit Test Visible] にして、PlayGameButton 上にドラッグします。

  5. プレイゲーム ボタンには特別な機能があります。これは、Text Box に入力した名前が空白でない場合のみ有効になります。Unreal Motion Graphics (UMG) のバインド機能を使って [Is Enabled] フィールド ([Behavior (ビヘイビア)] セクション配下) に新機能を作成することができます。

    PlayGameButtonDetails.png

    ゲームで有効なプレイヤー名であることを判断するために複雑なルールがある場合、またはプレイヤー名を C++ 変数に保存する必要がある場合は、Game ModeUFUNCTION として公開するか、プロジェクト内のどこかで静的関数として公開します。ただし、名前文字列が空白ではないことだけが重要であるため、ここで ウィジェット にスクリプトを記述することができます。

  6. Text Box が空白でない場合に限りボタンを有効にするために、Text Box のテキストを文字列に変換し、その後文字列の長さがゼロ以上であることを確認します。ロジックはこのように表示されます。

    PlayGameButtonEnableFunction.png

  7. ボタンをもう一つ追加して、メニューをキャンセルしたり、メニューへ戻れるようにしましょう。メイン メニューの [Play Game] ボタンと同じですが、左上ではなく右下の隅に対して相対的な位置に置かれます。これを実現するためには、Button 用の [Details (詳細)] パネル[Anchors (アンカー)] ドロップダウン メニューをクリックして、ポップアップ メニューから適切なグラフィック表示を検索します。

    • [MainMenuButton] の名前を変更します。

    • Position を ( -400, -200) に設定します。

    • Size を 200x100 に設定します。

    SelectAnchor.png

    右下隅にアンカーを配置するとサイズと位置の値を変えても変わりません。そのため、スクリーン上に存在するためには位置を負の値にする必要があります。サイズの値は正のままです。

  8. OnClicked Event を再度追加して、新規ボタンにスクリプトを追加していきます。Main Menu Button は単に Main Menu Widget を再ロードするだけですが、Play Game Button は ChangeMenuWidget 関数の呼び出しに新規ウィジェットを使用せずにメニュー全体を非アクティブにします。実際のクラスやアセット名の代わりに、Select Class と表示して表されます。

    NewGameButtonBPs.png

    Play Game Button でメニューを非アクティブにしたら、ゲーム内でそれ以上何かをすることはできません。この時点で、一般的に最初のレベルをロードし、紹介カットシーンを再生、または ポーン をスポーンしたり、所有したりします。

  9. だいたい以下の 2 つの画面のようになるはずです。

    FinalScreen.png

    FinalScreen2.png

完成コード

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:
    /** 現在のメニューウィジェットを取り除き、指定されたクラスがあればそこから新しいものを作成します */
    UFUNCTION(BlueprintCallable, Category = "UMG Game")
    void ChangeMenuWidget(TSubclassOf<UUserWidget> NewWidgetClass);

protected:
    /** Called when the game starts. (ゲーム開始時に呼び出されます) */
    virtual void BeginPlay() override;

    /** ゲーム開始時にメニューとして使用するウィジェット クラスです */
    UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "UMG Game")
    TSubclassOf<UUserWidget> StartingWidgetClass;

    /** メニューとして使用するウィジェット インスタンスです */
    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());
}

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信