Lerp を使うと、AとB２つを線形補間して途中地点の値を拾うことができます。
似たようなやり方で、ちょっと変わったゲージの作り方を紹介します。
まずグラデーションでカラフルにしたテクスチャを作ります。
サイズは小さくていいので 256ｘ16です。
このテクスチャをインポートする際は、ピクセルが荒れないように Compression Settings を UserInterface2D(RGBA) にします。あと、X-axis Tiling Method を Clampにします。Clampはタイリングしないという意味です。
インポートしたテクスチャアセットから Create Material します。
マテリアルは下のようにつなぎます。
左上の赤いノード TexCoordinate の設定値を変更します。Detailタブから変更できます。UTiling の値を 0.0001 にします。テクスチャの大きさがヨコ256pxなので、1ピクセルの大きさは、1/256で 0.00390625 になります。それよりも小さい数字にしています。
Value と書かれたノードは、Scalar Parameterノードです。
パラメータ名は、あとでWidgetブループリントから触ります。
ゲージが満タンからスタートするので、初期値は 1.0 をセットしておきます。
溜まっていく方のゲージだと 0.0スタートです。
線形グラデーションを生成する LinearGradient と ２階調化する ValueStep ノードは、直線型のゲージを作るときにのド定番です。
マテリアルはこれで完成です。Saveして閉じます。
マテリアルができたら、次はWidgetです。コンテンツブラウザの右クリックメニュー、
User Interface から Widget Blueprint を作成して編集します。
Imageパーツをキャンバスにドラッグ＆ドロップします。適当な大きさにしたら、
作ったマテリアルをセットします。
DetailsタブにAppearance という項目を探します。中に Brush ＞ Image という設定項目があるのでここにセットします。
次はブループリントです。
編集モードを、Designer から Graph に切り替えます。
最初から置かれている Event Constructionノードに以下のようにつなぎます。
右端は、Get Dynamic MaterialノードのReturnValueから、Promote to Variable して変数化したノードです。
次にゲージの長さを変えるための関数を用意します。
上で変数化したものから Set Scalar Parameter Value ノードを取り出してつなぎます。
パラメータ名のところに、マテリアルを作ったときのScalar Parameterノードに設定した名前を間違えないように入力しておきます。大文字小文字は区別されません。
出来上がりです。コンパイルして問題なければ保存します。
確認するためにレベルブループリントを編集します。
まずは画面に表示するところ。
Float型の変数を一つ用意します。それをEvent Begin PlayノードにSetでつないで初期値を入力しています。変数の初期値はDetailsタブでできますが、あえてノードで指定しておく方が、ブループリントの構造が分りやすくなって便利です。
このFloat型の変数を使ってキー操作で増えたり減ったりする部分を作ります。
最後にゲージの長さを変える関数を呼び出しでつないで完成です。
関数は Create WidgetノードのReturn Value から取り出します。
完成です。
Playしてみましょう。
ゲージの長さに合わせてカラーが変化します。
グラデーションテクスチャの内容次第なので、調整してみてください。
ではでは
素敵なゲージライフを
