【UE5】Interior Configurator Tutorial Part 7-2｜3Dウィジェットマテリアルセレクターの作成方法

以下は、初心者向けに「Unreal Engine 5」を使ったArchviz（建築ビジュアライゼーション）での3Dウィジェットマテリアルセレクターの作成手順をまとめたブログ記事です。

この記事では、Unreal Engine 5を使用して、3Dウィジェットマテリアルセレクターを作成する手順を紹介します。初心者でもわかりやすいように、ステップバイステップで詳しく解説します。

1. アイコンの準備と設定

最初に、3つのアイコンを使用します。以下の手順でアイコンを設定します。

アイコンフォルダの作成:
- Unreal Engineの「コンテンツブラウザ」で、新しいフォルダを作成します。名前は任意ですが、わかりやすいものにしましょう。
- アイコンをそのフォルダにドラッグ＆ドロップします。

アイコンのプロパティ設定:
- アイコンを選択し、右クリックして「一括編集プロパティマトリックス」を選択します。
- 「圧縮設定」を「User Interface 2D(RGBA)」に変更し、「テクスチャグループ」を「UI」に設定します。
- 変更を保存します。

次に、ポイントオブインタレスト（POI）ウィジェットを作成します。

ウィジェットブループリントの作成:
- 「コンテンツブラウザ」で、[Configurator] フォルダ内の「BP」フォルダに新しいフォルダを作成し、「POI」と名付けます。
- フォルダ内で右クリックし、「ユーザーインターフェース」から「ウィジェットブループリント」を選択します。「POI_widget_1」と名前を付けて作成します。
ウィジェットの編集:
- 作成したウィジェットをダブルクリックして開きます。
- 「キャンバスパネル」を検索し、ウィジェットにドラッグして配置します。パネルが画面全体を覆うように設定してください。
- 「ボタン」を検索し、キャンバスパネルにドラッグして配置します。
ボタンの設定:
- 「詳細パネル」でボタンの「サイズX」と「サイズY」を70に設定します。
- 「Padding」を検索し、すべての値を0に設定します。
- 「draw」を検索し、「Draw as」を「Image」に変更します。
- POIアイコンを選択し、ボタンの通常状態、ホバー状態、押下状態にそれぞれ適用します。最後にコンパイルして保存します。

次に、POIブループリントを作成します。

ブループリントクラスの作成:
- 「コンテンツブラウザ」でPOIフォルダ内に移動し、右クリックして「ブループリントクラス」を作成します。「Pawn」ブループリントを選択し、「POI_pawn_1」と名前を付けて作成します。

ウィジェットの追加:
- 作成したブループリントを開き、「Add（追加）」ボタンをクリックして「Widget（ウィジェット）」を追加します。
- 「詳細パネル」で「Widget Class（ウィジェットクラス）」を「POIウィジェット」に設定し、「Space Type（スペースタイプ）」を「Screen（スクリーン）」に設定します。
- 「Pivot（ピボット）」を0に設定し、「Draw at Desired Size（希望のサイズで描画）」を有効にし、「Gravity（重力）」を無効にします。「Collision Preset（コリジョンプリセット）」は「UI」に設定してください。
- 設定が完了したら、コンパイルして保存します。

最後に、POIをシーンに配置してテストします。

POIの配置:
- シーンで青いボックスを1つ選択し、Altキーを押しながらドラッグして複製します。複製したボックスをシーンの中心に配置します。
- コンテンツブラウザからPOIブループリントをドラッグして、ボックスの上部に配置します。
テスト:
- 必要に応じてアライメント設定を無効にし、「プレイ」ボタンを押してテストを行います。ゲームプレイ中にウィジェットが表示され、カメラの向きや位置に応じてウィジェットが追従することを確認します。

これで、Unreal Engine 5での3Dウィジェットマテリアルセレクターの作成が完了しました。次のステップでさらに進めましょう。

このブログ記事を参考に、Unreal Engine 5でのArchvizの制作をさらに楽しんでください！

参考動画