【Unreal Engine_8】マテリアルのブループリントで光を点滅させる方法

UE5の操作に慣れてきたので、以前から興味のあったマテリアルのブループリントで何ができそうかあれこれ試していました。

UE開発者の大半の方が目的としているゲーム開発ではなく、あくまでもカーデザイン関連のCG表現に役に立ちそうな情報を調べたところ、たどり着いたのがライティングでした。

そこで今月のブログでは、トップ画像に掲載した、サインカーブで点灯を制御する仕組みの作り方を紹介します。

今回の目標は以下の二つ：

①マテリアルのブループリント内にサインカーブを用いた点滅を表現する

②マテリアルインスタンスダイナミック(MID)を利用して、点灯の明るさやHDRIの強度を調整する仕組みを作る

では作り方を解説していきます。

・RhinoとGrasshopperを使い、横1000mm、縦100mm、厚さ3mmの直方体の表面上に横400個、縦40個の円を敷き詰め、サーフェスを分割して点灯部分(赤色)と非点灯部分(黒色)に分けます。

・作成したデータをUE5に入れます。環境はこれまでに制作したものをそのまま使用します。

・最初にButton_Widgetを開き、画面のUIを変更しました。

・上の図の赤枠にある、テキストボックス2個、スライダー2個、ボタン12個です。

・スライダー(上側)は点灯の明るさ調整用、スライダー(下側)はHDRIの強度調整用です。

　それぞれの設定値は、以下のように設定。

　　

　　スライダー(上側)→Value : 200.0、Min Value : 0.0、Max Value : 200.0

　　スライダー(下側)→Value : 3.0、Min Value : 0.0、Max Value : 3.0

・ボタン12個は、パターンの切り替えボタンです。今後のことも考慮して12個配置しました。今回使用するのは1番のみです。

・スライダー横のテキストボックスはスライダーの数値を表示するためのものです。忘れずに両方共にBindingsの設定をしておきます。

・そのままGraph画面に切り替え、前回と同様、スライダー2個とボタン12個分のEvent Dispatcherの設定を行います。

・セーブ、コンパイルを実行し、Button_Widgetを閉じます。

・続けて、点灯したときのマテリアルを作成していきます。適当なマテリアルを作成し、名前をEmmisive_Colorという名前にしました。

・作成したマテリアルを開くと上のような画面になりますので、ここでノードを組んでいきます。

・上の画像のようにノードを組んでいきます。点灯状態は発光色のみで表現するので、一番右端のノードはEmissive Colorにのみつないでいます。

・Timeノードの直後に点滅スピード調整用の係数をかけ合わせ、その後ろにサインカーブの関数をつないでいます。

・ボタンやスライダーを操作した際に変数を切り替えるため、Scalar Parameterというノードを二つ用意し、点灯パターンの切り替えとしてSelect_Num、明るさ調整用としてBrightnessという名前にしてつないでいます。

・点灯パターンの切り替え用でSwitchノードをつなげていますが、今回はpattern1のみ使用するため、残りは0にしています。

・ここまで来たらSaveして画面を閉じます。

・次に、さきほど保存したEmissive_Colorのマテリアルインスタンスを作成します。

・点灯色を青にしたいので、Emissive_Colorが親だとすると子に相当する関係のマテリアルを作成し、これに青色の設定をしていきます。

・同じ階層の何もないところで右クリック→Material→Material Instanceまでたどります。名前はBlue_Emissiveとしました。

・作成したマテリアルインスタンスを開き、親にさきほどのEmissive_Colorをセットし、色を青に設定しました。

・他にお好みの色があれば、同様のやり方で色別にインスタンスを作成します。

・ここまで来たらSaveして画面を閉じます。

・ゲーム開始前は非点灯状態にしておきたいので、noEmissiveという名前のマテリアルを新たに作成し、点灯部分のサーフェスにアサインしておきます。色味はお好みでokです。

・点灯しない部分(丸のサーフェス以外の部分)は色を変更しないため、別にblackという名前のマテリアルを作成し、アサインしておきます。こちらもお好みの色でokです。

・マテリアルは合計4個、作成したことになります。

マテリアル関連の作成は以上です。

-----------------------------------------------------------------------------------------------------------------------

ここで点灯パターンについての簡単な仕組みの解説を図にしました。

・発光色を点灯したり非点灯にする制御について、基本的な考え方としてはTimeノードから取得する経過時間を用います。ゲーム開始時に自動的に発動する、ストップウォッチのようなものです。

・Timeノードから取得した経過時間の速度調整、0から1秒の間の繰り返し、整数値のみ取り出しの3種類がよく使われ、図にある通り、Timeノードの後ろに特定のノードをつないで数値を加工します。

・点灯パターンの選択切り替えはSwitchノードを使います。今回はPattern1のみ使うので、残りは0をつないでいます。ボタンを押したときに外部からこのマテリアルに変数をわたすため、Scalar Parameterノードをつないでいます。

・サインカーブの作り方です。Timeノードから取得した経過時間をSine関数につなぐと-1から1の間の連続した数値に変換できます。そこから絶対値やY軸方向の移動などにより異なる発光パターンが表現できます。加工の仕方によって、様々な点灯表現が可能ですね。

------------------------------------------------------------------------------------------------------------------------

ここから再びノード作成の続きです。

・Outlinerの中にある環境関連のアクターは、HDRIBackdropとPostProcessVolume以外は使用しないので削除します。

・次に、Persistent Levelのブループリントを開きます。まずは変数を作成していきます。

・今回のサンプルで使用する変数は赤色の枠内にある19個です。

　①点灯色と非点灯色のマテリアルを格納する配列

　　Variable Name : Lighting_Colors

　　Variable Type : Material Interface(Array)

　　Default Value : index[0] noEmmisive、index[1] Blue_Emissive

　　※ほかに点灯色として使いたいマテリアルがあれば、この配列の中に追加していきます。

　②配列のインデックス番号を格納する変数(初期値は0)

　　Variable Name : Lighting_Color_Index

　　Variable Type : Integer

　　Default Value : 0

　③表示しているマテリアルの名前を格納する変数(初期値は非点灯色にする)

　　Variable Name : Lighting_Color

　　Variable Type : String

　　Default Value : noEmmisive

　④番号ボタンが押されているかどうか判別するブーリアン変数

　　Variable Name : pattern1_switch～pattern12_swtich

　　Variable Type : Boolean

　　Default Value : False

　⑤マテリアルインスタンスダイナミックを格納する変数

　　Variable Name : MID

　　Variable Type : Material Instance Dynamic

　　Default Value : None

　⑥点灯パターンの番号を格納する変数

　　Variable Name : Pattern Num

　　Variable Type : Integer

　　Default Value : 0

　⑦点灯の明るさの数値を格納する変数(初期値はスライダーの最大値)

　　Variable Name : Brightness

　　Variable Type : Float

　　Default Value : 200.0

　⑧HDRIの強度を格納する変数(初期値はスライダーの最大値)

　　Variable Name : HDRI_Intensity

　　Variable Type : Float

　　Default Value : 3.0

・Event BeginPlayのすぐ後ろで、Blue_Emissiveのダイナミックマテリアルインスタンスを生成し、変数MIDに格納後、Lighting Colors配列の2番目と入れ替えます。

・HDRIBackdropにアクセスするためのMIDは起動後に自動で生成されるためあえて作成する必要は無いです。

・このあと作成するノードは、Create Button Widget → Add to Viewportと辿った先の、Sequenceノード末尾の4か所からつないでいきます。

・HDRIの強度調整用ノード。

・点灯の明るさ調整用ノード。

・番号ボタンを押すたびに点灯と非点灯のマテリアルを切り替えるノード。厳密には、Lighting_Colors配列に格納されているマテリアルを順番にアサインをし直している。

・番号ボタンを押すたびに、点灯パターンの番号をMIDを利用してマテリアルに渡すノード。同時に、ボタンの色も切り替えるようにしています。一つ上のノードとまとめることもできますが、長くなるので分けました。

以上で完成です！

余談ですが、光った状態の見栄えはPostProcessVolumeの設定値でかなり変わります。

激しく光った状態にしたい、もしくは控えめにしたいとかいろいろ好みがあると思いますので、PostProcessVolumeの設定を色々お試しください。