みつまめ杏仁

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

動くHPゲージを作ってみませんか

季節は残暑。まだまだ真夏のはずですが、ここ最近の空模様のせいかセミの声も遠く感じる今日この頃いかがお過ごしでしょうか。先日のクイズゲームの記事でちょっとばかり燃え尽きてたりして間が空いてしまっていました。参加しそびれたのですが、ぷちコンのエンドレスランを作るイベントを見て、何か自分もぷちコン制作のお役に立てるものがないかと考えた結果、ゲージについて書くことにしました。

今までも度々ゲージに触れてきましたが、エンジンもずいぶんアップデートされてますし、復習もかねて記事にしてみようと思います。

 

UE4の基本的な操作方法については、「まぁまぁできるよ」という方を想定していますが、わからない操作等あれば、みつまめ杏仁 (@MMAn_nin) | Twitter かブログコメントにて問い合わせいただければ対応します。

 

 

  

 

シンプルなゲージとはいえ

ゲージが減った時に パッ、パッ、と途中段階のアニメーション無しに変化するタイプ。作るのは比較的易しいですが、常にゲージを見つめながらプレイは無理です。どれだけ減ったのか、いつ減ったのか、変化に気づきにくいので動きをつけるとグッと見た目がアップします。

f:id:hiyokosabrey:20210817001105g:plain

 

f:id:hiyokosabrey:20210817002313g:plain

 

 

今回はテクスチャを使わずシンプルなパーツで作っていきますが、増減する処理のところは、汎用的な仕組みなのでいろんなスタイルのゲージにも使えると思います。

 

 

作ってみよう

まずはWidgetのキャンバスにゲージの見た目として、Image を2つ重ねます。

f:id:hiyokosabrey:20210818012524p:plain

同じサイズで同じ位置に重ねると1枚に見せることができますが、いろいろアレンジできます。上図のように(下敷きの色が見にくいですが)ドロップシャドウぽく見せたり、下敷きを大きくしてみたり。

f:id:hiyokosabrey:20210818233049p:plain

大事なのは、後ろの背景に紛れてしまわないようにすることです。

そのためには手段を選ばないのがゲージを存在させるために必要な心意気です。

 

下敷きは、ゲージが減った状態でも、満タンからどれだけ減ったかがわかるので、とても重要な存在です。

 

上に置いたゲージを本体とします。

 

UMGで重ねた時の順番をコントロールする方法は2つあります。

ひとつはヒエラルキーでの位置

f:id:hiyokosabrey:20210819223224p:plain

もちろん後から描くほうが手前です

もう一つは ZOrder の値の大きさ

f:id:hiyokosabrey:20210819223400p:plain

数字の大きい方が手前になります。

ヒエラルキーで同階層、ZOrderの数字が同じ場合は、ヒエラルキーの順番で描かれます。またヒエラルキーで親子階層になっている場合は親同士が比較対象で、子供たちは親に依存します。

 

ゲージの長さは横方向のスケールを変えることで可変させるので、Pivot 位置を変更する必要があります。

f:id:hiyokosabrey:20210819000203p:plain

Render Transform にある Pivot X をゼロにすると、左端がスケールの基準点になります。デフォルトは (0.5, 0.5) なので、ど真ん中が設定されています。
Photoshopの変形時に表示されるバウンディングBOXをイメージするといいかも。

f:id:hiyokosabrey:20210819000720p:plain

 

Pivot X を 1.0 にすると、 右に減っていくゲージが作れます。

 

 

必要なパーツが配置できたので、ブループリントを編集します。

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

 

 

まず変数を2つ用意します。VariableType は Float型

f:id:hiyokosabrey:20210818234100p:plain

f:id:hiyokosabrey:20210819001546p:plain

CurrentValue と NewValue という名前にしました。

 

 

 

次にゲージの長さを変更するための関数を一つ作ります。

変数同様に、My Blueprintタブの Functions の右にある + ボタンをクリックすると新しく追加できます。

名前を changeGauge と命名して編集開始。

f:id:hiyokosabrey:20210819001726p:plain

① My Blueprintタブの Variables からゲージ本体の Image(キャンバスにレイアウトしたやつ)を取り出します。

 

② そこから Set Render Scale ノードを取り出してつなぐ

 

ここで、Scale の X だけを引数として受け取りたいので、ひと手間かけます。

f:id:hiyokosabrey:20210819002417p:plain

③ Set Render Scale の Scale ピンのところで右クリック

④ リストから Split Struct Pin を選択

 

こうなります。

f:id:hiyokosabrey:20210819002603p:plain

あとは、 Scale X のピンをドラッグ ⑤ して、 関数のノードにドロップ ⑥。

 f:id:hiyokosabrey:20210819002804p:plain

 

仕上げに 引数の名前と、Scale Y の値を変更。

f:id:hiyokosabrey:20210819003051p:plain

関数はこれで完成。

 

ちなみにピンの分解をせずに Make系のノードを使っても同じ結果になります。

f:id:hiyokosabrey:20210819224525p:plain

濃い青色のピンからドラッグして、make で検索すると取り出せます。この色のピンは特定の型を示すものではないので、慣れてないと不気味な感じですが、こうやってドラッグしてMakeノードを取り出したり、先の右クリックしてSplit(分割)する方法を使うと、中身がわかるようになってます。基本的に色の違うピン同士はつながらないのですが、これらの方法でどうにかなったりするので、馴染みのないピンが現れたらぜひ試してみてください。

 

 

つぎに EventGraphに戻って、カスタムイベントを一つ追加。

用意しておいた Float型の変数を使って計算と判定を行います。

f:id:hiyokosabrey:20210820003912p:plain

NewValue には 新しいゲージの値が入る想定。最新の結果が外から送られてきます。

CurrentValue は現在のゲージの値。

CurrentValue と NewValue に差分が発生するとアニメーションさせます。

差がなくなるとアニメーションは終了です。

アニメーションは簡単な減速処理です。イーズアウト的な動きになります。

左の方にある 0.25 という値を小さくするとゆっくり、大きくすると素早く動くようになります。

 

詳しくは過去記事で解説しているのでそれを貼っておきます。

Widgetで追跡するカーソル - みつまめ杏仁 (hatenablog.com)

 

続きの部分

f:id:hiyokosabrey:20210819013030p:plain

ここで、作っておいた関数を呼び出して、変化した変数を見た目に反映しています。

 

この計算式では、Current~とNew~が限りなくゼロに近づくだけでゼロにはなりません。

0.00000000001.....  みたいな感じで桁が増えていくばかり・・・

NewValue と CurrentValue の差がゼロになったら、 つまり 同じなら、というのを厳密にやると、一向に終わらないということになります。

そこで

Nearly Equal(Float) ニアリーイコールノードを使って、もういいだろうという範囲まで来たら、ゼロとみなすという判定を行っています。

 

Set Timer by Event ノードは、 指定した時間が経過したらイベントを呼び出してくれるノードです。

前のカスタムノードにつないでいるので、NewValue と CurrentValue の差が埋まらない限りは、何度でもカスタムイベントを呼び続けます。

 

これでエンジン的な処理が完成しました。

 

仕上げに、このイベントを始動するカスタムイベントと、ゲージを初期化するイベントを作ります。

 

新しくカスタムイベントを用意します。

f:id:hiyokosabrey:20210820004044p:plain
右端のノードは先に作った増減アニメーションのカスタムイベントを呼び出すときのノード。

 CurrentValue はこのWidget内だけのもので、外からNewValueに対して値を更新してもらうのが今回の仕様です。

 

ほぼほぼ完成ですが、ゲームをやり直したりする場合にゲージをリセットする必要があります。またコンティニューでその場復活HPちょっとだけ回復とか、あったりするので、アニメーション無しに一瞬でゲージの長さをセットしてしまう処理を用意しておくとゲーム的に何かと都合がよかったりして便利です。

そこでこのカスタムイベント。

f:id:hiyokosabrey:20210819231629p:plain

 

これでゲージのWidgetは完成です。

 

ぼくの場合Widgetの表示は、HUDクラスに担当してもらうのですが、手っ取り早くテストするために、レベルブループリントで試します。

 

テストする

ゲージ用の変数を一つ追加します。とりあえず MyHP と命名

ゲームにおけるHP管理用に相当します。

 

Create Widget ノードを取り出して、作ったゲージ用Widgetをセット。

f:id:hiyokosabrey:20210819232415p:plain

Return Value のピンから 変数に昇格(Promote to Variable)させて UserWidget型の変数を作ってつなぎます。

あとは、Add to Viewport ノードで画面に描画、HPの初期値をセットして、ゲージWidgetの カスタムイベントを呼び出します。

 

この状態で、任意の長さのゲージが表示できます。

 

次にキー操作で増減させます。

input ノードを使います。

Left と Right は それぞれカーソルキーの左右です Left[←] Right[→]

f:id:hiyokosabrey:20210820002116p:plain

二つとも内容はほぼ同じなので、片方を作って複製するとラクができます。

違うのはここ↓(緑の部分は上と同じ)

f:id:hiyokosabrey:20210820002618p:plain

これで再生してみると、カーソルの左右キーを押すたびに、ぎゅんぎゅん動くはずです。

f:id:hiyokosabrey:20210820003251g:plain

減るだけじゃなく増えるのも問題なしです。

満タンと空っぽのチェックをきちんとやれば、Widgetの カスタムノード UpdateGauge を呼び出して HPの値を渡してやるだけで勝手にアニメーションします。

 

ちなみに、スペースキーでリセットする場合はこんな感じにつなぐだけです。

f:id:hiyokosabrey:20210820011347p:plain

いつでも満タンにできます。

 

ひとまず想定していた仕組みが完成したので今回はここまでにします。

次回はこのゲージを使ってアレンジを楽しんでみようと思います。

ゲームの数だけ、仕様の数だけ、ゲージがあるので、作り方や実装方法も実に様々です。

こんなゲージ作ってみたいけど作り方がわからないとか、ちょっと無茶ぶりしてやろうとかあれば、チャレンジして作ってみようと思いますので、お気軽にメッセージ等々でネタ提供をお待ちしております。

 

ではでは

素敵なHPゲージライフを!