【UE5】Interior Configurator Tutorial Part 7-6｜マテリアル選択ウィジェットの追加手順

Unreal Engine 5を使用して、Archvizのプロジェクトにマテリアル選択ウィジェットを追加する手順を初心者向けに詳しく解説します。この手順に従って、カメラで対象物を選択し、マテリアルを簡単に切り替えることができるインターフェースを作成しましょう。

マテリアル選択ウィジェットの作成

フォルダの準備: Unreal Engineのエディターで、Configurator>BPフォルダ内に新しいフォルダを作成し、これを「MaterialSelector」と名付けます。

新規ウィジェットの作成: 「Material Selector」フォルダ内で、右クリックしてユーザーインターフェース>ウィジェットブループリントをクリックして「Widget Blueprint」を作成します。名前は「BP_Widget_Material_Selection」としておきます。

ウィジェットのレイアウト設定

Canvas Panelの追加：「BP_Widget_Material_Selection」を開き、「Canvas Panel」を2つ追加します。

2つ目のCanvas Panelの「Anchor」を「Bottom」に設定し、OffsetとPosition（位置）をそれぞれ調整します。

Borderコンポーネントの設定: 「Border」コンポーネントを2つ目のCanvas Panelに追加し、アンカーをFullにして、全てのOffsetとPadding（位置）を0に設定。さらに「Draw As」を「Image」に変更します。

グラデーションマテリアルの作成

新規マテリアルの作成：「Material Selector」フォルダで、右クリックして新しいマテリアルを作成し、「Gradient_Material_Widget」と名付けます。

マテリアルの設定：「Material Domain」を「User Interface」に、「Blend Mode」を「Translucent」に変更し、適切なグラデーションを設定します。これを適用し、保存します。

「Constant3Vector（3＋左クリック）」「Linear Interpolate（L+左クリック）」「Linear Gradient」

ウィジェットへのマテリアル適用

マテリアルの適用

「BP_Widget_Material_Selection」を開き、作成したグラデーションマテリアルを適用します。

その他の設定

「Border」コンポーネントを選択し、「draw」を「Box」にします。PaddingやMarginが0になっていることを確認します。

「オーバーレイ」コンポーネントをBorderの直下に追加し、「Vertical Box」をオーバーレイの直下に追加し、アライメント（Horizontal AlignmentとVertical Alignment）をフルにします。

「背景ブラー（Background blur）」コンポーネントをオーバーレイの直下に追加し、アライメント（Horizontal AlignmentとVertical Alignment）をフルにします。Blur Strengthを「2.0」にします。

「サイズボックス（Size Box）」コンポーネントを3つ「Vertical Box」の直下に追加します。

1つ目のSize Boxの「Height Override」を「40」に設定
2つ目のSize Boxの「Height Override」を「42」に設定
3つ目のSize Boxの「Height Override」を「95」に設定

「Horizontal Box」コンポーネントを3つ目のSize Boxの直下に追加します。さらに、「Border」を「Horizontal Box」の直下に追加します。

「Border」コンポーネントの「Padding」を「0.0」にし、「Draw As」を「Border」に設定します。

「ボーダー（Border）」コンポーネントを2つ複製（Ctrl＋D）します。真ん中の「Border」コンポーネントの「Size」を「自動（Auto）」

「サイズボックス（Size Box）」コンポーネントを2つ目のボーダーコンポーネントに追加します。Child Layout>Width Overrideを「1600」にします。

「Text」コンポーネントをVertical Box内、1つ目の「サイズボックス」直下に追加し、「Text」を「LIVING ROOM FLOOR」にします。アライメントを調整して中央寄せに設定します。Fontの「Typeface」を「Light」、「Size」を「20」とします。
「Text」コンポーネントをVertical Box内、2つ目の「サイズボックス」直下に追加し、「Text」を「Floor Material Selection」にします。アライメントを調整して中央寄せに設定します。Fontの「Typeface」を「Light」、「Size」を「20」とします。

マテリアルサムネイルの作成

ブループリントクラスに変換

色を変更したい「SM_ChamferCube」をブループリントクラスに変換します。

「選択をブループリントクラスに変換（Convert Selection to Blueprint Class）」をクリック、さらに「Harvestコンポーネント」から「Actor」を選択し、必要に応じてブループリント名を追加します。ここでは「BP_object_material_switch」とします。また、パスは「/All/Game/Configurator/BP/MaterialSelector」とします。

マテリアルインスタンスの作成

Configurator>BP>Material Selector>「Materials」フォルダを作成し、そこに右クリックから「マテリアル」を選択し、新しいマテリアルを作成します。名前は「Testing Material」をします。

Testing Materialを開いて、「Constant3Vector（3＋左クリック）」を追加してベースカラーとつなぎます。「Constant」から色を黄緑に設定して、適用します。

テスト用に異なる色のマテリアルインスタンスを作成します（例：ピンク、赤、青）。

「Testing Material」を複製（Ctrl+D）して「TestingMaaterial_Inst_1」を作成します。こちらはピンク色にします。

「Testing Material」を複製（Ctrl+D）して「TestingMaaterial_Inst_2」を作成します。こちらはオレンジ色にします。

「Testing Material」を複製（Ctrl+D）して「TestingMaaterial_Inst_3」を作成します。こちらは水色にします。

サムネイルの準備

各マテリアルインスタンスのサムネイルを作成します。

「TestingMaaterial_Inst_1」（ピンク）をダブルクリックして開きます。

ウィンドウ>シーン設定をプレビューをクリックし、シーン設定をプレビューから環境の「Show Environment」と「Show Floor」をチェックを外して無効にし、「Environment Color」を黒にします。これによりプレビューの背景が黒一色となります。

各種マテリアルをビューポートからスクリーンショットをします。

サムネイルの適用

Unreal Engineに戻り、作成したサムネイルをインポートして、ウィジェットに適用します。

アイコンのプロパティ設定

アイコンを選択し、右クリックから「アセットアクション（Asset Actions）」>「プロパティマトリクスで選択内容を編集します（Bulk Edit via Property Matrix）」を選択します。
「圧縮設定」を「User Interface 2D(RGBA)」に変更し、「テクスチャグループ」を「UI」に設定します。
変更を保存します。