みつまめ杏仁

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

自動回復するゲージ

なんとなく両端から増減するゲージを作ってみたくなって、マテリアルで試してみた。

 

ゲージは見た目を気にしないのであれば、スケールを可変する方法がサクッと作れるのでいいと思う。ただスケール方式の場合、下敷きが必要だし、成長要素で最大の長さが伸びていく場合に扱いがちょっぴり面倒だし、ゲージにテクスチャを貼るとスケールによって伸び縮みしてしまったりして、つくりがシンプルなぶん、表現の自由度は少し下がると思っています。

 

f:id:hiyokosabrey:20210203002145p:plain

 

というわけで今回は マテリアルを使って作ります。

 

最近何かといじらせてもらってる step ノードさんに登場していただきました。

f:id:hiyokosabrey:20210205010821p:plain

まずはシンプルにカラーだけでの構成。

 ScalarParameterで受け取った値を計算して、ゲージの塗分ける場所を求めています。

f:id:hiyokosabrey:20210206114815p:plain

 水平方向のゲージなので、Texcoordノードの U の値を ComponentMask(R) で取り出して step で 0 と 1 の状態にしています。

f:id:hiyokosabrey:20210206120631p:plain

両サイドからの位置を 2つの step で求めて、引き算しています。

f:id:hiyokosabrey:20210206120526p:plain

もっと賢い方法がありそうですが、ぼくの脳ミソではここまで。

 

見た目のアレンジは後程紹介するとして、自動回復するブループリントを作っていきます。

 

UMGのキャンバスに Image を一つおいて、マテリアルをセットします。

f:id:hiyokosabrey:20210206122129p:plain

ついでに登場演出も作っておくことにします。

f:id:hiyokosabrey:20210206222557g:plain

Render Transform の Scale X を 0 から 1.0 にするだけの簡単なアニメーション。

 

キャンバスはこの辺で。

 

ここからはWidgetブループリント。

 

作った登場演出のアニメーションを再生するカスタムイベントを用意。

f:id:hiyokosabrey:20210207102507p:plain

アニメーション終了の検出が必要であれば、イベントディスパッチャーなんかを追加したりしますが、今回はゆるめの仕様でいきます。

 

Float型の変数と、ゲージ使用不可フラグのBoolean型の変数、ゲージの見た目を更新する関数を用意します。

f:id:hiyokosabrey:20210206214557p:plain

Float型はそのままゲージの量で%で管理したいので、0.0 ~ 1.0 で扱います。

Boolean型はフラグとして扱います。スタミナゲージ的な仕様にしたくてゲージが完全にゼロになるまでは消費できるけど、いったん空になると、満タンまでチャージしないと消費できないチャージ状態に、というやつです。

 

表示開始時に満タンから始まる想定なので、Event Pre Construct で初期化してます。

ブループリントの変数は初期値を持たせることができるのですが、グラフ上に set ノードの状態で置いておくと確認がしやすいのと、スクショで説明しやすいので、個人的にこのつなぎ方はよく使います。Viewportへの付け外しが起こる場合は気を付ける必要がありますけど。

 

 

関数の中はこんな状態。

f:id:hiyokosabrey:20210206124830p:plain

マテリアルのパラメータに値を渡すだけ。

 

Widgetに任せない実装で、プログラマとアーティストが分業体制なのであれば、ここまでをUIアーティストが作ってコミットすれば最低限の機能だけで 「あとよろ」できます。

せっかくなんで、プロトタイピング的に作ってしまおうと思います。

 

次は

満タンになるまで少しづつ増加するカスタムイベント。

f:id:hiyokosabrey:20210206214904p:plain

満タンじゃない状態のときは 右端の Set Timer by Event ノードで自身のイベントを呼ぶ仕様。小数点というのもあって、確実にキレイに 1.0 にならないことを考慮して、少しでもオーバーしたら、強制的に 1.0 にしてタイマーストップ。

 

次は

ゲージを減らすためのカスタムイベント。ちょっと大きいので画像を分割。

前半↓

f:id:hiyokosabrey:20210206215328p:plain

後半↓

f:id:hiyokosabrey:20210206215342p:plain

 

この Set Timer by Event が呼び出すイベントは、先に作っておいた 回復イベントです。

赤いラインを引っ張ってつないでもいいのですが、見た目にちょっとあれなんで、Create Event ノードを使います。これは遠く離れたイベントにつなぐことができます。

f:id:hiyokosabrey:20210206182748g:plain

ノードの Select Function... と書かれたプルダウンリストから、つなぎたいイベントを選択します。ここは先に作っておいた ゲージ回復イベントを指定。

これで、Time に設定した 1.0秒後に回復を開始します。

 

だいたい完成。

 

レベルブループリントで確認していきます。

f:id:hiyokosabrey:20210207103949p:plain

Create Widget ノードに、今回のWidgetをセット。

Return Value ピンからドラッグすると、作ったカスタムイベントが取り出せます。

出現のイベントと、ゲージを減らすイベントを取り出して、適当なキー&ボタン操作をつないだら準備完了。

 

f:id:hiyokosabrey:20210207105613g:plain

 

さてさて

空になった時のチャージ中はゲージ消費できない仕様であることをプレイヤーに教えないといけません。いまのままでは見た目に区別がつかないので細工を入れていきます。

 

まずはマテリアルに点滅表現と、カラーを切り替える仕組みを追加します。

f:id:hiyokosabrey:20210207111703p:plain

Scalar Parameterif ノードを使って、通常時 と 回復時 の2つの状態を切り替えるつくりです。

これを、つなげます。

f:id:hiyokosabrey:20210207112101p:plain

マテリアルは、ひとまずこれで。

次は Scalar Parameter を変更する仕組み。

Widgetブループリントに新しく関数を追加。

f:id:hiyokosabrey:20210207113025p:plain


マテリアル内の if ノードで比較するので、その判定に合うように数値を渡します。

f:id:hiyokosabrey:20210207112925p:plain

できた関数を、イベントグラフのカスタムイベントにつなぎます。

つなぐ場所は2か所。

ゲージ回復イベントで満タンになったときの最後と。

f:id:hiyokosabrey:20210207113631p:plain

ゲージを減らすイベントの空になったときの最後。

f:id:hiyokosabrey:20210207113640p:plain

 

これで確認してみます。

f:id:hiyokosabrey:20210207114020g:plain

想定した仕様になりました。

 

 

長くなったので、今回はこの辺にしておきます。

次回は見た目のアレンジをやってみようと思います。

 

ではでは

ステキなゲージライフを!