なんとなく両端から増減するゲージを作ってみたくなって、マテリアルで試してみた。
両サイドから増減するゲージを作っていたら、なんとなくスタミナゲージぽいのができた#UE4 #ue4UMG pic.twitter.com/XiLUNbaNNv
— みつまめ杏仁 (@MMAn_nin) 2021年2月1日
ゲージは見た目を気にしないのであれば、スケールを可変する方法がサクッと作れるのでいいと思う。ただスケール方式の場合、下敷きが必要だし、成長要素で最大の長さが伸びていく場合に扱いがちょっぴり面倒だし、ゲージにテクスチャを貼るとスケールによって伸び縮みしてしまったりして、つくりがシンプルなぶん、表現の自由度は少し下がると思っています。
というわけで今回は マテリアルを使って作ります。
最近何かといじらせてもらってる step ノードさんに登場していただきました。
まずはシンプルにカラーだけでの構成。
ScalarParameterで受け取った値を計算して、ゲージの塗分ける場所を求めています。
水平方向のゲージなので、Texcoordノードの U の値を ComponentMask（R） で取り出して step で 0 と 1 の状態にしています。
両サイドからの位置を ２つの step で求めて、引き算しています。
もっと賢い方法がありそうですが、ぼくの脳ミソではここまで。
見た目のアレンジは後程紹介するとして、自動回復するブループリントを作っていきます。
UMGのキャンバスに Image を一つおいて、マテリアルをセットします。
ついでに登場演出も作っておくことにします。
Render Transform の Scale X を 0 から 1.0 にするだけの簡単なアニメーション。
キャンバスはこの辺で。
ここからはWidgetブループリント。
作った登場演出のアニメーションを再生するカスタムイベントを用意。
アニメーション終了の検出が必要であれば、イベントディスパッチャーなんかを追加したりしますが、今回はゆるめの仕様でいきます。
Float型の変数と、ゲージ使用不可フラグのBoolean型の変数、ゲージの見た目を更新する関数を用意します。
Float型はそのままゲージの量で％で管理したいので、0.0 ～ 1.0 で扱います。
Boolean型はフラグとして扱います。スタミナゲージ的な仕様にしたくてゲージが完全にゼロになるまでは消費できるけど、いったん空になると、満タンまでチャージしないと消費できないチャージ状態に、というやつです。
表示開始時に満タンから始まる想定なので、Event Pre Construct で初期化してます。
ブループリントの変数は初期値を持たせることができるのですが、グラフ上に set ノードの状態で置いておくと確認がしやすいのと、スクショで説明しやすいので、個人的にこのつなぎ方はよく使います。Viewportへの付け外しが起こる場合は気を付ける必要がありますけど。
関数の中はこんな状態。
マテリアルのパラメータに値を渡すだけ。
Widgetに任せない実装で、プログラマとアーティストが分業体制なのであれば、ここまでをUIアーティストが作ってコミットすれば最低限の機能だけで 「あとよろ」できます。
せっかくなんで、プロトタイピング的に作ってしまおうと思います。
次は
満タンになるまで少しづつ増加するカスタムイベント。
満タンじゃない状態のときは 右端の Set Timer by Event ノードで自身のイベントを呼ぶ仕様。小数点というのもあって、確実にキレイに 1.0 にならないことを考慮して、少しでもオーバーしたら、強制的に 1.0 にしてタイマーストップ。
次は
ゲージを減らすためのカスタムイベント。ちょっと大きいので画像を分割。
前半↓
後半↓
この Set Timer by Event が呼び出すイベントは、先に作っておいた 回復イベントです。
赤いラインを引っ張ってつないでもいいのですが、見た目にちょっとあれなんで、Create Event ノードを使います。これは遠く離れたイベントにつなぐことができます。
ノードの Select Function... と書かれたプルダウンリストから、つなぎたいイベントを選択します。ここは先に作っておいた ゲージ回復イベントを指定。
これで、Time に設定した 1.0秒後に回復を開始します。
だいたい完成。
レベルブループリントで確認していきます。
Create Widget ノードに、今回のWidgetをセット。
Return Value ピンからドラッグすると、作ったカスタムイベントが取り出せます。
出現のイベントと、ゲージを減らすイベントを取り出して、適当なキー＆ボタン操作をつないだら準備完了。
さてさて
空になった時のチャージ中はゲージ消費できない仕様であることをプレイヤーに教えないといけません。いまのままでは見た目に区別がつかないので細工を入れていきます。
まずはマテリアルに点滅表現と、カラーを切り替える仕組みを追加します。
Scalar Parameter と if ノードを使って、通常時 と 回復時 の２つの状態を切り替えるつくりです。
これを、つなげます。
マテリアルは、ひとまずこれで。
次は Scalar Parameter を変更する仕組み。
Widgetブループリントに新しく関数を追加。
マテリアル内の if ノードで比較するので、その判定に合うように数値を渡します。
できた関数を、イベントグラフのカスタムイベントにつなぎます。
つなぐ場所は２か所。
ゲージ回復イベントで満タンになったときの最後と。
ゲージを減らすイベントの空になったときの最後。
これで確認してみます。
想定した仕様になりました。
長くなったので、今回はこの辺にしておきます。
次回は見た目のアレンジをやってみようと思います。
ではでは
ステキなゲージライフを！
