メインメニューを作成する

ゲームのメイン メニューの作成およびスクリプティング方法について説明します。

Windows
MacOS
Linux

この操作ガイドでは、ゲームのメイン メニューの作成およびスクリプティング方法について説明します。

「UMG UI クイック スタート ガイド」 を使用して操作を開始する場合、この操作ガイドでも同じプロジェクトを使用できます。

メイン メニューを作成する

まず、以下のようにメイン メニューのレイアウトを作成します。

  1. MainMenu Widget ブループリントを開きます。

  2. [Designer (デザイナー)] タブで、[Palette (パレット)] から [Hierarchy (階層)] にウィジェットをドラッグ アンド ドロップして以下のように設定します。

    Hierarchy1.png

    参考までに、[Canvas Panel (キャンバス パネル)] には、Image が 1 つ、Text 付き Vertical Box が 1 つ、および Text 付きの 3つの Button があります。

    [Hierarchy (階層)] ペインで、ウィジェットのクラスまたは名前を検索すると、UI 要素を迅速に見つけることができます。

  3. [Hierarchy (階層)] で、[VerticalBox] を選択し、右クリック して、[Copy (コピー)] します。

  4. [Canvas Panel (キャンバス パネル)]右クリック して、[Paste (貼り付け)] を選択し、[Vertical Box] のもう 1 つのコピーを貼り付けます。

    Hierarchy2.png

  5. 新しい [Vertical Box]右クリック し、Button をコピーして貼り付けて 4 番目の Button/Text ウィジェットを作成します。

    Hierarchy3.png

  6. 1 つ目の [Vertical Box] を選択して、[Details (詳細)] パネルで名前を「 MainMenu 」に変更し、[isVariable] オプションをオンにして [ZOrder] を「 1 」に設定します。

    CreatingAMenu_3.6.png

    ここでは、わかりやすいようにウィジェットに名前を付け、アクセスできるようにウィジェットを変数に設定しています。さらに、これから設定する画像の上にウィジェットが表示されるように [ZOrder] を設定しています。

  7. もう 1 つの [Vertical Box] を選択して [Details (詳細)] パネルで名前を「 Options 」に変更し、[isVariable] オプションをオンにして [ZOrder] を「 1 」に設定します。

  8. 以下の画像のように各 Button の名前を変更します。

    Hierarchy5.png

    ボタン名を更新し、各ボタンが何を行うかがわかるようにします。これにより、各ボタンの機能のスクリプティングがさらに容易になります。

  9. [Details (詳細)] パネルの [Content (コンテンツ)][Text] セクションで、それぞれの各 Text ウィジェットを以下のように更新します。

    CreatingAMenu_3.9.png

    ここでは、各ボタンおよびメニュー ヘッダに表示されるテキストを更新しています。

  10. Ctrl キーを押しながら各 Button を選択します。次に、[Details (詳細)] パネルで [Hovered][Tint] の色を設定して、[Size][Fill] をそれぞれ設定します。

    CreatingAMenu_3.10.png

    ここでは、すべてのボタンのサイズを調整して、マウスを重ねたときのボタンの色を定義します。

  11. [Hierarchy (階層)]Image を選択します。次に [Details (詳細)] パネルから [Appearance (アピアランス)][Brush] で、使用する TextureSprite または Material を選択します。

    CreatingAMenu_3.11.png

    このガイドと同じものをご利用になりたい場合は、「バックグラウンドのサンプル」 からダウンロードできます。バックグラウンドのサンプルを Unreal Engine にドラッグ アンド ドロップしてインポートしてください (確認メッセージが表示されるたびに [Yes (はい)] をクリックしてください)。

  12. [Designer (デザイナー)] ウィンドウで、画像をサイズ調整してレイアウト全体を占めるようにします。

    Hierarchy9.png

  13. Image[Details (詳細)] パネルで、[Anchor (アンカー)] ボタンをクリックして、画像サイズが画面全体を占めるオプションを選択します。Scalebox を使って画像を保持することもできます。アスペクト比に適切に一致するように画像を確実にスケーリング、サイズ調整します。

    CreatingAMenu_3.13.png

  14. 両方の [Vertical Boxes] を選択して、左詰め位置に [Anchor (アンカー)] します。

    CreatingAMenu_3.14.png

  15. [Options (オプション)] の Vertical Box を選択して、[Visibility (ビジビリティ)] 設定を [Hidden (非表示)] に設定します。

    CreatingAMenu_3.15.png

    デフォルトではオプションが表示されないようにする必要があります。そのため、ここでは、オプションは、スクリプトを使用して表示する必要があることを指定しています。

  16. [MainMenu] の Vertical Box を選択して、サイズを調整し、[Designer (デザイナー)] ウィンドウで希望の位置に配置します。

    Hierarchy13.png

  17. Text ウィジェットの [Details (詳細)] パネルで [Font][Size]、および [Alignment] を調整することができます。

    CreatingAMenu_3.17.png

    こうした設定を色々試して必要なエフェクトを得ることができます。

  18. [Options (オプション)] の Vertical Box を希望通りに設定して、[Main Menu] の Vertical Box のすぐ後ろに移動します。

    Hierarchy15.png

    一度に見えるのは、このうちのひとつだけであるため、互いに重なっても問題はありません。

メニューの視覚的レイアウトが完了したら、次のステップでメニューの機能をスクリプティングします。

メイン メニューをスクリプティングする

次に、メイン メニューの機能のスクリプティングに取り掛かりましょう。このステップを終了すると、メイン メニューでゲームを起動して、ゲームを開始し、オプション メニュー内の解像度も変更できます。

  1. MainMenu Widget ブループリントを開いて、[Graph (グラフ)] タブをクリックします。

    ScriptingMainMenu_4.1.png

  2. [My Blueprint (マイ ブループリント)] ウィンドウで [PlayButton] を選択します。次に、[Details (詳細)] パネルで [On Clicked] の隣にあるプラス記号をクリックします。

    ScriptingMainMenu_4.2.png

    これでグラフにノードが追加され、ボタンがクリックされるたびに実行されます。

  3. 各ボタンに On Clicked イベントを追加します。

    ScriptingMainMenu_4.3.png

    わかりやすくするため、このメニューのレイアウトを模倣して、グラフにボタンを配置しました。

  4. OnClicked (PlayButton) から、OpenLevel ([FirstPersonExampleMap] に設定) ノードと Remove from Parent ノードを追加します。

    ScriptingMainMenu_4.4.png

    Level Name は、読み込みたいレベルの名前を示します (この場合は First Person Example マップ)。Remove from Parent ノードは、ターゲットの Widget ブループリントをビューポートから取り除きます。ターゲットそのもの (これは、レベルをロードした後、ビューから取り除きたい Main Menu Widget ブループリントです) に設定されます。

  5. Ctrl キーを押しながら、MainMenu 変数と OptionsMenu 変数内でドラッグします。

  6. MainMenu のピンを引き出して、Set Visibility ノードを追加します。In Visibility を Hidden に設定します。

  7. ピンを引き出して、Set Visibility ノードを追加します。Invisibility を Visible に設定します。

  8. ターゲットを OptionsMenu 変数に接続します。

    OptionsButton.png

    ここでは、オプション ボタンがクリックされるとメイン メニューをオフにし、オプション メニューをオンにしています。

  9. Setting ボタンから Execute Console Command ノードを追加します。

  10. Command に対して、r.setRes XxY を使用します。この場合、X と Y は使用するサイズです。

    Resolution.png

    上の画面では、以下の設定を使用しました。640x4801280x7201920x1080

  11. Return Button で、ステップ 6 を繰り返しますが、設定を逆にして、メイン メニューを表示し、オプション メニューが非表示になるようにします。

    ReturnButton.png

  12. OnClicked (QuitButton) から、コマンド Quit に設定された Execute Console Command を追加します。

    QuitButton.png

  13. [Compile (コンパイル)] して [Save (保存)] してから、Widget ブループリントを閉じます。

  14. コンテンツ ブラウザ で、Main レベルを開き、次に Level ブループリント を開きます。

    ScriptingMainMenu_4.14.png

  15. グラフ内で 右クリック して、Event Begin Play ノードを追加し、Create Widget ([Class (クラス)][Main Menu (メイン メニュー)] に設定) を接続します。

    EventBeginPlay.png

  16. Add to Viewport ノードを接続し、Get Player Controller ノードを追加します。

  17. Get Player Controller から、True に設定された Set Show Mouse Cursor ノードを追加して、[Compile (コンパイル)] し、ブループリントを閉じます。

    FinishedLevel.png

  18. Content/FirstPersonBP/Blueprints 」フォルダ内にある First Person Character ブループリントを開きます。

  19. Event Begin Play スクリプトの後に、Get Player Controller を追加して、Set Input Mode Game Only ノードを追加します。

    PlayerCharacterBlueprint.png

    これで、カーソルがオフになり、プレイヤーの入力が Game Only になります。

  20. Set Input Mode Game Only の出力ピンを Branch ノードを接続します。

    ScriptingMainMenu_4.20.png

  21. ブループリントを コンパイル して閉じ、[World Settings (ワールド設定)] を開きます。

    ScriptingMainMenu_4.21.png

  22. [Game Mode][GameMode Override][FirstPersonGameMode] に設定し、[Default Pawn Class (デフォルト ポーン クラス)][Character (キャラクター)] に変更します。

    ScriptingMainMenu_4.22.png

    このマップに対するゲーム モードを割り当て、プレイヤー キャラクターがプレイ可能な FirstPersonCharacter ブループリント内で Engine Default Character を使用するように変更します。メイン メニューの周囲をプレイヤーが走り回ったり、背後で射撃できないようにするためです。

  23. メイン ツールバーの [Play (プレイ)] ボタンをクリックしてエディタで再生します。解像度のオプションをテストするには、[Play-in-Editor] ドロップダウン メニューから [New Editor Window (新規エディタ ウィンドウ)] を選択します。

これで、プレイヤーがゲームの終了、解像度の変更、ゲーム (指定したレベルでロードし、プレイヤーをゲームプレイに移行する) のプレイを実行できる機能するメイン メニューの作成が完了しました。

Select Skin
Light
Dark

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

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

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

フィードバックを送信