ゲージは見た目に長さを変えて表現します。
このゲージをマテリアルで増減できるようにしてみます。
マテリアルで表現するのでWidgetでもスプライトでもスタティックメッシュでも、マテリアルがアサインできるものなら何でもOKです。
コンテンツブラウザの何もないところで、右クリックして Materialを新しく作成します。
適当な名前を付けたら編集開始です。
UIはほとんどの場合、光源計算をしないので、Detailタブから Material ＞ Shading Model を探して、プルダウンで Unlitを選択します。
次に必要なノードを３つ取り出して、マテリアルノードにつなぎます。
①LineaGradient ・・・・ リニアなグラデーションを出力
②ValueStep ・・・・ ２諧調化
③ScalarParameter ・・・・ あとでブループリントで触るため
ScalarPaameter（スカラーパラメータ）はDetailタブでパラメータ名を設定します。
今回 " Value" と命名。後で使うので綴りはしっかり確認。
つながっていれば左上にプレビューされているので、DefaultValue の値をいろいろいじってみると理解しやすいと思います。
1.0で100％の真っ白、0.0 で真っ黒。右に減っていくのが分かります。
左に減らす場合は、 OneMinusノードでひっくり返すこともできます。
基本は完成。
ここに色を付ける場合は、カラーを乗算してやります。
模様の入ったテクスチャを重ねてみたりいろんな見た目のゲージが作れます。
次は表示です。
まず手っ取り早く、キューブでもワールドに置いて、作ったばかりのマテリアルをセットしてみます。パラメータは 0.2です。
今度はWidgetで試してみます。
その前にバージョン4.10から、 ユーザーインターフェイス用のマテリアルが用意されてて、UMGで使うときにはそれを使わないといけなかったので、再びマテリアルを編集。
保存して閉じたら、Widgetを新しく用意します。
コンテンツブラウザから、右クリックして User Interface ＞ Widget Blueprint を選択。
編集モードをDesignerにしたら、キャンバスにImageを置いて、マテリアルをセットします。
編集モードをGraphに切り替えます。
関数を作ります。とりあえず "SetValue" という名前にしました。
パラメータを受け取りたいので、 Inputsのところで、Float型を一つ追加します。
キャンバスに置いたパーツをドラッグ＆ドロップでグラフ内にゲットで置いたら、あとは、GetDynamicMaterialノードと、SetScalarParameterValueノードをつなぎます。
これでWidgetの編集はおしまい。コンパイルして保存しておきます。
次はレベルブループリント。
作ったWidgetをビューポートにレイアウトします。
再生してみるとこうなります。
次にゲージの増減を作ります。Float型の変数を一つ用意します。
まずは 0.1ずつ増える想定で、値が1.0を越えないように Clampノード。
で、こうなります。
マイナスする方も同じようにつなげます。
ここはあえて減算ノードは使ってません。0.1引くのも、 -0.1足すのも結果は同じです。この考え方はいずれ役立つと思います。
あとは、Input Event系のノードをつないで、WidgetのReturnValueから関数を呼び出せば出来上がりです。
キーボードのカーソルキー左・右をつなぎました。
これで完成です。
おまけ
今回適用したテクスチャの形は正方形です。
テクスチャの伸びを修正するために、TextCoodinateノードで調整します。
WidgetのImageパーツのサイズが 512ｘ48 の長方形なので、
ヨコを１とするとタテは48÷512で、 １： 0.09375
TexCoordinateノードのDetailタブにある VTilingに値としてセットします。
話題のイカゲームみたいになりました。
