【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_darkopening」と名前を付けます。

さらに、「Canvas Panel」と「Image」を配置し、アニメーションを作成します。ImageのOpacityを0→1に1秒間で変化するように設定します。これでブラックアウトのアニメーションができました。

次に、オープニングアニメーションの最後をブラックアウトにするために、ブラックアウトのアニメーションを後ろに接続します。

「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」で画面が切り替わる際にフェードアウトするように設定します。

タスクバー表示の修正

現状、オープニング中に「Tab」を押すとタスクバーが表示されてしまいますのでこれを修正します。

開いている開始メニューがアクティブであるかどうかを確認するために別のブランチを作成する必要があります。

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

ここで確認したらTabキーのBranchに接続した「OpeningFinish？」がTrueを返して「Tab」キーでタスクバーを表示することが出きるようになります。

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

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

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

マップを確認し、デフォルトのままにします。