Unreal Engine 5でのタスクバーの作成方法をステップバイステップで説明します。このガイドでは、タスクバーを作成し、ボタンにカーソルを合わせるとテキスト情報が表示されるように設定します。また、プロジェクトの作成からタスクバーの実装までの手順を、初心者でもわかりやすいように説明します。
1. Unreal Engine 5の起動
まず、Epic Games Launcherを開き、「ライブラリ」タブに移動します。ここでは、Unreal Engine 5.1を使用しますが、5.3など他のバージョンを使用することも可能です。エンジンを起動するには、指定されたボタンを押してください。
2. プロジェクトの作成
プロジェクトブラウザが開いたら、「First Person」テンプレートを選択します。テンプレートは「Blueprint」で、オプションはデフォルトのままにしておきます。プロジェクト名を「Interior Configurator」とし、デスクトップに保存して「Create」ボタンを押します。
3. フォルダ構成の設定
プロジェクトテンプレートが開いたら、以下のフォルダを作成します：
- Configurator: 新しいフォルダを作成して「Configurator」と命名します。
- Blueprints: Configuratorフォルダ内に新しいフォルダを作成して「Blueprints」と命名します。
- Widgets: Configuratorフォルダ内に新しいフォルダを作成して「Widgets」と命名します。
4. ウィジェットの作成
次に、Widgetsフォルダ内で右クリックし、「User Interface」から「Widget Blueprint」を選択し、「BP_MineWidget」と命名します。このウィジェットをダブルクリックして開きます。
4.1. Canvas Panelの設定
検索バーに「Canvas Panel」と入力し、これをBP_MineWidget内にドラッグします。画面上部の「フィールドスクリーン」を「カスタム」に変更し、解像度をHD（1920x1080）に設定します。
4.2. Taskbarの作成
もう一つのCanvas Panelを追加し、名前を「Taskbar」に変更します。このTaskbarのアンカー設定を「Bottom」に変更し、位置とサイズを0に設定します。次に、Taskbarを少し上に移動し、位置を「-120」に設定します。
5. 背景ぼかしの設定
検索バーに「Blur」と入力し、「Background Blur」をTaskbarの下にドラッグします。アンカーを「Full」に変更し、サイズを0に設定します。次に、ぼかしの強度を「10」に調整します。
6. カラムの作成
Taskbarに4つのカラムを追加します。検索バーに「Horizontal Panel」と入力し、「Horizontal Box Panel」をTaskbarの下にドラッグします。アンカーを「Fill」に設定し、サイズを0に設定してレイアウトを完全に埋めます。
次に、「Vertical Box」を検索し、Horizontal Boxの下にドラッグ＆ドロップします。このVertical Boxを4回コピーし、それぞれを「Fill」に設定します。これで4つのカラムが完成しました。
7. スペーサーの追加
各カラムにスペースを追加します。検索バーに「Spacer」と入力し、Horizontal Boxの下にスペーサーを追加します。サイズを「50」に設定し、スペーサーをコピーして各カラムの間に配置します。
8. 黄色いラインの作成
検索バーに「Border」と入力し、Taskbarの下にドラッグします。アンカーを「Top」に変更し、オフセットとサイズを0に設定します。高さを調整し、色を黄色に変更します。
9. テキストとボタンの追加
最初のVertical Boxに「Text」を追加し、テキストを「Mode」に変更します。フォントサイズを「10」に調整し、上部のパディングを「20」に設定します。タイプフェースは「Regular」に変更します。
次に、検索バーに「Horizontal Box」と入力し、Vertical Boxの下にドラッグ＆ドロップします。サイズを「Fill」に設定し、下部のパディングを「20」または「15」に調整します。
さらに、「Size Box」を検索してHorizontal Boxの下に追加し、これを3回コピーします。スペーサーを追加してボタンの間にスペースを作り、サイズを「20」に設定します。
10. ボタンの作成
検索バーに「Button」と入力し、Size Boxの下にドラッグします。3つのボタンすべてを選択し、「Draw As」オプションを「Box」に変更します。
最初のコンテナが完成したら、これを複製して他のカラムに追加し、それぞれ「HUD」や「Option」などに変更します。
11. ウィジェットのゲーム内表示
ウィジェットをゲーム内に表示するために、「First Person」フォルダの「Blueprints」内にある「BP_FirstPerson」を開きます。イベント「Begin Play」からシーケンスノードを作成し、「Create Widget」を追加します。
「Class」から先ほど作成した「BP_MainWidget」を選択し、オーニングプレイヤーに「Get Player Controller」を設定します。次に、ウィジェットの出力を「Add to Viewport」に接続し、「Show Mouse Cursor」を有効にしてコンパイル・保存します。
12. ウィジェットの確認
最後に、ゲームモードでウィジェットが正しく表示されるか確認するため、「新しいウィンドウエディター」を選択してウィジェットを表示します。
これで、タスクバーの作成とゲーム内での表示が完了しました。