Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

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

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

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

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

   MainMenu ブループリントの作成方法は「 UMG UI クイックスタート ガイド 」を参照してください。

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

   
   

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

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

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

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

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

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

   
   

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

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

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

   
   

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

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

   
   

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

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

    
    

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

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

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

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

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

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

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

    
    

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

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

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

    
    

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

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

    
    

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

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

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

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

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

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

   
   

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

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

   
   

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

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

   
   

   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 変数に接続します。
   

   
   

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

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

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

    
    

    上の画面では、以下の設定を使用しました。 640x480 、 1280x720 、 1920x1080

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

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

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

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

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

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

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

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

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

    
    

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

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

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

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

    
    

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

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

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