【Unreal Engine_4】ボタンによるデータの切り替えとマテリアルの切り替えを実装してみました

ボタンの組み込み方がわかってきたので、さらに機能を拡張させてみました。

画面を見ながらデザインを確認する際、カメラを自在に操っていろいろな角度から形を確認する以外に重要な機能として、色の変更やデータの複数案の切り替えがあげられます。その二つの機能をボタンウィジェットを使って実装することを想定したサンプルの作成方法になります。色の変更はウサギのマテリアル変更、データの複数案の切り替えは床面のデータ切り替えとして再現してみたいと思います。

・まずは前回のブログ記事で完成した状態からスタートします。

・床面は前回のデータを破棄して新たに2種類用意しました。マテリアルを平面に張り付けた状態のアクターをそれぞれType_AとType_Bという名前にし、Content Browser及びOutlinerウィンドウ内で上の図のような階層構造にしました。ゲームスタート時の床面はType_Aにします。

・変更を加えるウサギのマテリアルとして新たに3色作りました。ゲームスタート時の色は赤にしてみました。

・次に、前回作成したButton_Widgetを開き、ボタンとテキストブロックを上の図のように2セット追加します。左がマテリアルの変更、右が床面データの切り替え用です。

・まずはマテリアル変更のボタンをクリックした状態で、Details画面のOn Clicked横の＋ボタンをクリックします。

・いったん元のタブに戻り、ボタン下のテキストブロックを選択した状態で、Details欄のBind→Create Bindingをクリック

・自動的に画面が切り替わるので、新しくString型の変数を作成し、上の図のノードツリーのようにGetしてつなげます。

・そのままEvent Graph画面に切り替え、前回の環境切り替えと同様、Event Dispacherを設定し、Callノードをさきほどのイベントノードから接続します。

・ここまでの作業を床面データの切り替えボタンも同様に組んでいきます。

　

※最終的に、上の図のようにFUNCTIONS、VARIABLES、EVENT DISPATCHERS、Event Graphに二つずつアイテムができていればokです。

・ここまで来たらコンパイル→上書き保存を実行。

・続いて、Persistentレベルのブループリントを開きます。上の図は、マテリアル変更に関する作成するノードの全体像です。前回作成した環境の切り替え用ノードの中で、以下の三か所から分岐させる形になります。

①Add to ViewportからつないだSequence

②Create Button WidgetのReturn Value

③Event BeginPlayからつないだSequence

・使う変数は以下の3種類です。

①Name:Body_Colors、Type:Material Interface(Array)

　ウサギに適用するすべてのマテリアルを格納した配列になります。Details欄に3つのマテリアルを下の図のように登録しておきます。

②Name:Body_Color_Index、Type:Integer

　ウサギのマテリアルを格納した配列のインデックス番号です。この番号を使ってマテリアルを切り替えていきます。初期値は0にします。

③Name:Body_Color、Type:String

　ウサギの現在適用されているマテリアル名を格納する変数です。主に、テキストブロックに表示する時に使用します。初期値はBunny_Redをセットします。

・上の図が本体部分です。

①ボタンクリックのイベントディスパッチャーを受け取ったら、Sequenceを経由して、最初にBody_Color_Indexを1増加させます(配列長さを超えたら再び0に戻す)。

②すべてのスタティックメッシュアクターを検索し、ゲームスタート時のウサギのマテリアル(Bunny_Red)が該当したら、1増加させたBody_Color_Indexに相当するマテリアル(Bunny_Blue)をアサインします。

※ボタンを押すたびに、①～②の作業を繰り返すことでウサギのマテリアルが延々に切り替わります。

・ここまできたらウサギのマテリアル変更部分は完成です。コンパイル→上書き保存します。

・続いて床面の切り替えノードの全体像です。

・使用する変数は以下の2つです。

①Name:Switch_Parts　Type:Actor(Array)

切り替えるアクターを格納する配列です。今回は床面のデータとしてType_AとType_Bという名前のアクターを使用するので、Details欄のDefault Valueに上の図のようにセットしておきます。

②Name:Parts Index　Type:Integer

切り替えるアクターを格納した配列のインデックスです。この番号に1づつ増加させて切り替えていきます。初期値は0です。

・先ほどと同じく、Add to ViewportからつないだSequence及びCreate Button WidgetのReturn Valueから分岐させて上の図のようにつないでいきます。

①冒頭のSequenceの分岐より後ろの工程は、配列に格納したすべてのアクターを非表示にしたのち、現在のParts Indexに相当するアクター(Type_A)を表示させます。

②ボタンをクリックした際のイベントディスパッチャーを受け取った後、Parts Indexを1増加させます(アレイの長さを超えたら再び0に戻す)。

③次に、いったんすべてのアクターを非表示にしてから、1増加させたParts Indexに該当するアクター(Type_B)を表示させます。

※ボタンを押すたびに、②～③の作業を繰り返すことで床面のデータが延々に切り替わります。

・以上で作業は完成です。コンパイル→上書き保存します。

・プレイモードにすると上の図のような画面になり、ボタンをクリックするとマテリアルやアクターを切り替えることができます。