【UE5】Interior Configurator Tutorial Part 10｜オープニング画面、ロゴ、スプラッシュスクリーン、ドアの音を追加する方法

この記事では、Unreal Engine 5 (UE5) を使用してアーキビズ（Archviz）のプロジェクトにオープニング画面、ロゴアニメーション、スプラッシュスクリーン、ドアの音などを追加する方法を、初心者でも分かりやすいように詳細に説明します。最終的な成果物は、Windows形式でパッケージ化されたプロジェクトとなり、実行ファイルをダブルクリックすると、カスタムスプラッシュスクリーン、オープニングページ、ロゴアニメーション、ステップ音などが含まれたものが表示されます。

1. プロジェクトファイルの準備

まず、プロジェクトファイルに必要な素材（テクスチャ、アイコン、オーディオ）を用意します。これらのファイルを選択してコピーし、プロジェクトの Content フォルダ内に配置します。 Configurator フォルダ内に新しいフォルダを作成し、それを Opening と名付け、これらのファイルをその中に保存します。

2. カスタムアイコンとスプラッシュスクリーンの設定

次に、プロジェクト設定メニューを開き、「Windows」セクションまでスクロールします。ここで、 Opening フォルダに保存したカスタムアイコンを使用してゲームのアイコンを変更します。同様に、スプラッシュスクリーン用のテクスチャも設定します。

3. オープニング画面の作成

Configurator フォルダ内で新しいフォルダを作成し、 Opening と名付けます。このフォルダ内で右クリックし、 User Interface を選択して新しい Widget Blueprint を作成し、 BP_Opening と名付けます。

このウィジェットを開き、 Canvas Panel を追加します。次に Horizontal Box をキャンバスパネルの下に配置し、サイズと位置を調整します。その後、 Vertical Box を追加し、テキスト要素を配置します。テキスト要素のサイズを調整し、色やフォントスタイルを設定します。これにより、オープニング画面に表示されるテキストが完成します。

「Canvas Panel」を配置します。「Horizontal Box」=アンカーをBottom、位置Yを「-120」、サイズYを「120」「Size Box」=Size「自動」チャイルドレイアウトを「Width Override」を「750」「Size Box」=Size「自動」チャイルドレイアウトを「Width Override」を「400」「Spacer」=Size「自動」「Image」=配置します。

4. ロゴの追加とアニメーション設定

ロゴを表示するための Image ウィジェットを追加し、ロゴのテクスチャを設定します。次に、ロゴにアニメーションを追加します。 BP_Opening でロゴの不透明度を調整し、アニメーションを設定します。キーフレームを追加し、アニメーションの開始と終了時の不透明度を設定します。

Logo animationを設定

「BP_First Person」ブループリントの「Event Begin Play」から「BP_Opening Widget」「Add to Viewport」「Play Animation」「Set Paused」を配置接続し、ロゴアニメーションをゲーム開始時に実行します。

ポーズの状態ではロゴアニメーションが再生されないのでSet Game Pausedを最後に接続します。（チェックは外しておきます。）

「Delay」と「Remove from Parent」を配置接続し、DelayのDurationを「5.0」に設定することで5秒後に「Remove from Parent」のTargetに接続している「Open Widget」を画面上で削除します。

「BP_First Person」ブループリントで、「Create widget」「Add to Viewport」「Play Animation」を配置し、「New Animation」（ブラックアウトのアニメーション）をGETしてそれぞれ接続します。

（「Remove from Parent」を削除します。）

5. オーディオの追加

オープニング画面にステップ音やドアの開閉音を追加します。 Configurator フォルダ内に Audio という新しいフォルダを作成し、そこにオーディオファイルを保存します。オーディオファイルをウィジェットにドラッグ＆ドロップし、 Play Sound ノードを使用して再生します。

「Remove from Parent」のTargetに「Create BP Opening Widget」と「Create BP Darkopening Widget」のReturn Valueを接続します。これにより、2つのViewportを画面上から削除することでゲーム画面「BP_main widget」を表示させます。

「Delay」のDurationで切り替えのタイミングを調整でき、「Start Camera Fade」で画面が切り替わる際にフェードアウトするように設定します。

タスクバー表示の修正

変数「OpeningFinish？」をセットし、「Start Camera Fade」に接続します。これにより、フェードが終了したときにオープニングが終了したかを確認することができます。

6. パッケージ化と最終確認

オープニング画面とアニメーションの動作が確認できたら、プロジェクトをWindows形式でパッケージ化します。設定メニューで Map & Modes や Packaging をデフォルトの設定にし、必要なファイルをパッケージに含めるようにします。プロジェクトをパッケージ化し、実行ファイルを確認します。

マップ＆モード（Maps&Modes）

パッケージ化（Packaging）

対応プラットフォーム（Supported Platforms）

Platforms>Windows

プロジェクトをパッケージ化 Windows SDKエラー修正

7. スプラッシュスクリーンの修正

パッケージ化後、スプラッシュスクリーンが表示されない場合は、 Configurator フォルダ内に新しい Splash フォルダを作成し、そこにスプラッシュスクリーン用のBMPファイルを保存します。再度、実行ファイルをダブルクリックすると、スプラッシュスクリーンが正しく表示されるはずです。

動作確認

【UE5】Interior Configurator Tutorial Part 9-3｜ミニマップボタンのカラーを変更する方法

【UE5】Interior Configurator Tutorial Part 11｜プロジェクトにおけるゲーム終了ボタンの設定方法

📎📎📎📎📎📎📎📎📎📎