Unreal Engine

【UE5】Interior Element Configurator Tutorial Part 4｜グラデーションで色を変える

こんにちは！設計屋です。今回は、「M_Basic_Wall」にグラデーションで椅子の色を変更できる機能を追加する方法を説明します。では、始めましょう！

手順 1: マスターマテリアルの準備

まず、以前アサインした「M_Basic_Wall」のマスターマテリアルを改造しますが、その前にマスターマテリアルをコピーしてバックアップを取ります。以下の手順で進めます。

  1. 元のマスターマテリアルをわかりやすい場所にコピーします。
  2. M_Basic_Wall も同じようにコピーします。
  3. コピーしたマテリアルに差し替えます。

手順 2: Lerpノードの追加

「M_Basic_Wall」を開きます。

次に、色を変えるためにLerpノードを使用します。Lerpノードは、Alphaの値に応じてAとBの色を混合します。例えば、Alphaが0ならAの色を、1ならBの色を使用します。

  • Lerpノードを追加します（ショートカット: L + 左クリック）。
  • BaseColor_AとBaseColor_Bを設定し、BaseColor_Bを適当な青に設定します。

手順 3: Material Parameter Collectionの作成

次に、Material Parameter Collection (MPC)を作成し、パラメーターを追加します。

Material Parameter Collectionを使うことで外部から動的にマテリアル内の値を変えることができます。

  • Materials And TexturesのMaterial Parameter Collectionを作成します（名前: MPC_ChairPaint）。
  • Scalar Parameterを追加し、名前を"Time"とします。
  • MPC_ChairPaintをドラッグしてM_ChairPaint_Masterに配置します。
  • 一般>Parameter Nameを「Time」に変更します。
  • TimeパラメーターをAlphaに接続します。

これで、MPC_CarPaintのTime値を変えることで色が変わるようになります。

動作を確認します。

手順 4: Blueprintの設定

BP_Chairを開きます。

BP_Chairの中でTimeの値を変える処理を追加します。

  1. "Add Timeline"を追加し、ダブルクリックで開きます。
  2. Float Trackを追加し、キーをTime:0, Value:0とTime:3, Value:1に設定します。（Shift+左クリックで追加）
  • Set Scalar Parameter Valueを追加します。
    • Collection＝MPC_ChairPaint
    • Parameter Name＝Time
  • キーボードの"１"が押されたら色が変わるようにします。
    • Keyboard Eventsの"１"を選択してTimelineノードに接続します。
    • BP_ChairのAuto Receive InputをPlayer 0に設定します。

プレイをしてキーボードの「１」を押して色が変更させることを確認します。

手順 5: 色の繰り返し変更

色が一度しか変更できない問題を解決し、繰り返し色を変更できるようにします。

  1. Aの色がBの色に変わった瞬間に、Aの色をBと同じ色にします。
  2. Timeを0に戻し、Aが表示されている状態にします。

これを繰り返し行うことで、色を繰り返し変更できるようにします。

手順 6: 他の色への変更

他の色に変更するための処理を追加します。

MPC_ChairPaint

  1. "MPC_ChairPaint"を開いてVector Parametersを追加します（名前: BaseColor_AとBaseColor_B）。
  2. Set Vector Parameter Valueを追加し、BaseColor_Bに新しい色を設定します。

M_AssetPlatform（カラーのマテリアルグラフ）

  1. 「Time」を複製し、Parameter Nameを「BaseColor_A」とします。
  2. 同様に「Time」を複製し、Parameter Nameを「BaseColor_B」とします。
  3. 「ComponentMask」を追加し、RGBにチェックを入れます。
  4. 「BaseColor_A」を「ComponentMask」につなぎ、LerpのAに接続します。
  5. 同様に「BaseColor_B」を「ComponentMask」につなぎ、LerpのBに接続します。

Str_ChairPaint（ブループリントのストラクチャー）

  1. ストラクチャー作成「Str_ChairPaint」
  2. 「Linear Color」として「BaseColor」と名前をつけます。
  1. BP_Chairに戻り変数を作成
    • 変数名＝ChairPaint_White
    • 変数の型＝Str Chair Paint
    • コンパイルします。
    • デフォルト値>Chair Paint White>BaseColorにBaseColor_Aをペーストします。
  • 変数「ChairPaint_White」を複製
    • 「ChairPaint_Blue」に名前を変更し、カラー（ブルー）をコピー＆ペーストします。
    • 「ChairPaint_Silver」に名前を変更し、カラー（シルバー）をコピー＆ペーストします。

他の色に変更するためのキーボードイベントを追加し、マクロ化して処理を簡単にします。

手順 7: 最終調整

最後に、色が変わった後の処理とTimeを0に戻す処理を追加します。

  1. Get Vector Parameter Valueを追加し、BaseColor_Bの値を取得します。
  2. Set Vector Parameter Valueを追加し、取得した値をBaseColor_Aに設定します。

すべての処理をコンパイルしてセーブし、プレイして動作を確認します。

おわりに

今回は、椅子の色のグラデーション変更機能を追加する方法を説明しました。次回はライトのオン/オフ機能とドアの開閉機能を追加していきます。質問があればコメントでお知らせください。最後までご覧いただき、ありがとうございました！

-Unreal Engine
-