読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

マテリアルを使ったゲージ

UE4 UMG Widget UI ゲージ

ゲージは見た目に長さを変えて表現します。

このゲージをマテリアルで増減できるようにしてみます。

マテリアルで表現するのでWidgetでもスプライトでもスタティックメッシュでも、マテリアルがアサインできるものなら何でもOKです。

 

コンテンツブラウザの何もないところで、右クリックして Materialを新しく作成します。

f:id:hiyokosabrey:20160109233718p:plain

適当な名前を付けたら編集開始です。

f:id:hiyokosabrey:20160109233739p:plain

UIはほとんどの場合、光源計算をしないので、Detailタブから Material > Shading Model を探して、プルダウンで Unlitを選択します。

f:id:hiyokosabrey:20160109234216p:plain

 次に必要なノードを3つ取り出して、マテリアルノードにつなぎます。

①LineaGradient ・・・・ リニアなグラデーションを出力

②ValueStep ・・・・ 2諧調化

③ScalarParameter ・・・・ あとでブループリントで触るため

f:id:hiyokosabrey:20160109235201p:plain

ScalarPaameter(スカラーパラメータ)はDetailタブでパラメータ名を設定します。

今回 " Value" と命名。後で使うので綴りはしっかり確認。

つながっていれば左上にプレビューされているので、DefaultValue の値をいろいろいじってみると理解しやすいと思います。

f:id:hiyokosabrey:20160110112724p:plain

1.0で100%の真っ白、0.0 で真っ黒。右に減っていくのが分かります。

左に減らす場合は、 OneMinusノードでひっくり返すこともできます。

f:id:hiyokosabrey:20160110113109p:plain

 基本は完成。

ここに色を付ける場合は、カラーを乗算してやります。

f:id:hiyokosabrey:20160110111608p:plain

模様の入ったテクスチャを重ねてみたりいろんな見た目のゲージが作れます。

f:id:hiyokosabrey:20160110120535p:plain

 

次は表示です。

 

まず手っ取り早く、キューブでもワールドに置いて、作ったばかりのマテリアルをセットしてみます。パラメータは 0.2です。

f:id:hiyokosabrey:20160110121525p:plain

今度はWidgetで試してみます。

その前にバージョン4.10から、 ユーザーインターフェイス用のマテリアルが用意されてて、UMGで使うときにはそれを使わないといけなかったので、再びマテリアルを編集。

f:id:hiyokosabrey:20160110122322p:plain

保存して閉じたら、Widgetを新しく用意します。

 

コンテンツブラウザから、右クリックして User Interface > Widget Blueprint を選択。

f:id:hiyokosabrey:20160110122409p:plain

編集モードをDesignerにしたら、キャンバスにImageを置いて、マテリアルをセットします。

f:id:hiyokosabrey:20160110122818p:plain

編集モードをGraphに切り替えます。

関数を作ります。とりあえず "SetValue" という名前にしました。

パラメータを受け取りたいので、 Inputsのところで、Float型を一つ追加します。

f:id:hiyokosabrey:20160110123536p:plain

キャンバスに置いたパーツをドラッグ&ドロップでグラフ内にゲットで置いたら、あとは、GetDynamicMaterialノードと、SetScalarParameterValueノードをつなぎます。

f:id:hiyokosabrey:20160110123236p:plain

これでWidgetの編集はおしまい。コンパイルして保存しておきます。

 

次はレベルブループリント。

作ったWidgetをビューポートにレイアウトします。

f:id:hiyokosabrey:20160110124703p:plain

再生してみるとこうなります。

f:id:hiyokosabrey:20160110124916p:plain

次にゲージの増減を作ります。Float型の変数を一つ用意します。

まずは 0.1ずつ増える想定で、値が1.0を越えないように Clampノード。

で、こうなります。

f:id:hiyokosabrey:20160110130000p:plain

マイナスする方も同じようにつなげます。

f:id:hiyokosabrey:20160110130243p:plain

ここはあえて減算ノードは使ってません。0.1引くのも、 -0.1足すのも結果は同じです。この考え方はいずれ役立つと思います。

あとは、Input Event系のノードをつないで、WidgetのReturnValueから関数を呼び出せば出来上がりです。

f:id:hiyokosabrey:20160110130725p:plain

キーボードのカーソルキー左・右をつなぎました。

これで完成です。

 

おまけ

今回適用したテクスチャの形は正方形です。

f:id:hiyokosabrey:20160110131428p:plain

テクスチャの伸びを修正するために、TextCoodinateノードで調整します。

f:id:hiyokosabrey:20160110131448p:plain

WidgetのImageパーツのサイズが 512x48 の長方形なので、

ヨコを1とするとタテは48÷512で、 1: 0.09375

TexCoordinateノードのDetailタブにある VTilingに値としてセットします。

f:id:hiyokosabrey:20160110131628p:plain

 

話題のイカゲームみたいになりました。

f:id:hiyokosabrey:20160110132132p:plain

f:id:hiyokosabrey:20160110132144p:plain