【UE5】タイトル画面の作成

閲覧いただきまして、ありがとうございます。
UnrealEngine5 ゲーム開発はじめました。数えてシリーズ18回目の投稿になります。

今回はゲームのスタート「タイトル画面」まわりの作成についてつぶいてみたいと思います。

今回の目標は、
１）タイトル画面の画像を準備→
２）ゲームスタートで、そのタイトル画面を表示する→
３）「click to start」ボタンを配置して→そのボタンをクリックするとゲームがスタートする

ここまでを順を追って進めていきたいと思います。なお、タイトル画面の画像は準備されているところから始めます。

タイトルレベル作成

コンテンツ配下にタイトル専用のフォルダを作成しておきます。名前を「title」としておきました。

編集→プロジェクト設定のマップ＆モードよりゲームのデフォルトマップを[title] に設定します。
これでゲームをスタートするとタイトルレベルが最初に読み込まれることになります。

ウィジェットブループリントの作成と編集

ユーザーインターフェース→ウィジェットブループリントを選択して、ウィジェットブループリントを作成します。
名前を「WidgetBP_title」としておきました。

作成したウィジェットブループリントを開いて、
パレット
↓
▼パネル　CanvasPanelをドラッグ＆ドロップします。
サイズを調整　今回は1920×1,080としました。

▼一般→ImageをCanvasPanel にドラッグ＆ドロップします。配置すると画面上に白い長方形が設置されます。

CanvasPanelより少し大きめに広げます。

右の詳細の「アンカー」で「中央」を選択します。

アンカー　→　画面を固定するために設定するものです。

タイトル画面に使用する画像を準備して、インポートしておきます。
右の詳細の▼アビアランス　▼Brush　Imageにタイトル画面に使用する画像を設定します。

一般→ButtonをCanvasPanelにドラッグ＆ドロップします。
Button名を変更（StartButton)しておきます。
TextをButton付近にドラッグ＆ドロップするとボタンに文字を記載できます。
ここでは、「click to start」と記述しておきます。
ボタンと文字の大きさを調整します。

一旦コンパイルして保存しておきます。

ボタンを配置した状態　↓

タイトル（Title）用のゲームモードを作成

タイトル用にゲームモードを用意する必要がある？
ここでは、タイトル用のゲームモードを用意して、ゲームメインとは切り離して制御できるようにした方がよさそう。。。と考えました。

ブループリントクラス　→　GameModeBaseを選択、名前を「BP_Title_GameMode」としました。

イベントグラフの編集　イベント BeginPlayより以下のように接続します。

一旦コンパイルしてテスト起動してみます、タイトル画面が表示されれば、ここまでは成功です。

画面上で一度でもマウスクリックするとカーソルが消えてしまう。。。という問題が発生しました。
それを防止する処理が必要。。。

ブループリントを親クラス PlayerController で作成します。→　名前を「BP_ShowMouseCursor」としておきます。

コンパイルして保存　→　テストプレイ
タイトル画面上、どこをクリックしてもカーソルは消えなくなることを確認できました。

この問題については、実現方法は他にもあるかもしれません。一つの例として掲載しました。

ボタンによるレベル遷移

「click to start」ボタンをクリックすると、次の画面に遷移させたいので、設定していきます。

ここでは、次の画面は、ゲームをスタートするメインステージ（レベル：MainStage）とします。

下の方にある　▼イベントより　OnClickedの＋をクリックするとイベントグラフが開きます。

タイトル画面の「click to start」ボタンをクリック　→　MainStage レベルに遷移して画面が切り替われば成功です。

今回はゲームのスタート「タイトル画面」まわりの作成についてつぶいてみました。

それでは、また。

初めから読まれていない方はこちらからどうぞ ↓
【UE5】UnrealEngine5でゲーム開発始めました - aki★'s technical-Lab (akihisa-h.com)