みつまめ杏仁

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

ボスゲージを作ってみる

RPGとかアクションゲームのボス戦なんかで、ボスキャラの体力がものすご~くたくさんあるのを表現したゲージがありますが、そのひとつ作ってみました。

f:id:hiyokosabrey:20180401224309j:plain

参考にしたのは、大人気モバイルゲームタイトルのFGOです。

普通は1本のゲージが何本もあるかのように見せるタイプが多いです。

例えば1本分がHP1500だとしてその4倍のHP6000をボスが持つ場合、単純に4本分削ることになります。その場合ゲージの色分けで表現すれば十分伝わると思うのですが、

f:id:hiyokosabrey:20180401231231p:plain

FGOは少し違いました。

長さは同じでも1本分にあたるHPの量が違うのです。それはゲージに添えられている数字が説明しています。また、ゲージの下にある◆アイコンがゲージのカラーと連動しています。この◆はいったい何を説明しているのか最初分かりませんでした。

単にゲージの本数を表しているだけでこんなアイコン置くかな・・・、と思いながら攻略サイトを眺めていると、どうやら、ボスキャラたちはゲージのカラー(段階)によって攻撃パターンを変えてくる仕様になっている様子。そういえばHP量を表す数字も、毎回カラーごとに一旦 0 になってから新しく仕切り直しています。ラスボスとかでよく見かけるやつです。HPがある程度減ったら形態が変わってHPが再充填されたりする。その段階を◆のアイコンで分かりやすくしてるようです。

いろいろ納得したところで、UE4で作ってみたのを紹介します。

 

色分けはマテリアルで

マテリアルでゲージを作るときは、テクスチャを使ったUVスクロールか、LinearGradientとValueStepコンビの2パターンを良く使います。今回は後者で。

f:id:hiyokosabrey:20180402003418p:plain

左の Valueと書かれた Scalar Parameter Valueノードの初期値は 1.0 にしておきます。

 

質感を出すためにテクスチャを追加します

f:id:hiyokosabrey:20180402003039p:plain 4x40 px のGrayScale

Addノードを使って間に割り込ませます。

f:id:hiyokosabrey:20180402003833p:plain

ブループリントからいじるためのパラメータ用のノードが3つあります。

長さを変化させるのが ScalarParameter です。

f:id:hiyokosabrey:20180402004237p:plain

この変数を 0.0 ~ 1.0 に変化させることになります。

f:id:hiyokosabrey:20180402005017p:plain

今回2本分のゲージをマテリアルで切り替えるようにした理由は、登場や退場演出などで、アルファフェードしたときに重なりを見せなくするためです。

マテリアルは完成。これをUMGに仕込んでいきます。

 

◆用のWdget

ゲージ下のアイコンを別Widgetで作ろうか悩んでみたけど、結局ラクするために用意することにします。

まずUMGのキャンバスに3つのImageパーツを重ねます。

f:id:hiyokosabrey:20180402215453p:plain

 

f:id:hiyokosabrey:20180402215933p:plain

真ん中のパーツには作っておいたマテリアルをセットします。このパーツにブループリントから色のパラメータを渡して着色します。

 

次に消滅アニメーションを用意します。

f:id:hiyokosabrey:20180402220450g:plain

ヒビが入って飛び散る動きをさせたかったのですが説明が長くなるので別に機会にします。ひとまず白くなって消えるだけですが、これはエフェクト用のパーツをアルファ値のフェードで登場させ最後のフレームで下敷きを残して消しています。

VANISHというアニメーション名にしておきます。

 

次にブループリントを編集します。

カラーを受け取る関数を用意します。

f:id:hiyokosabrey:20180402224457p:plain青いピン(引数:DetailsタブのInputsの項目で追加)はLinearColor型です。

f:id:hiyokosabrey:20180402224839p:plain

関数が用意できたら、EventGraphに戻って、カスタムイベントを一つ用意します。

これは消滅時のアニメーションを再生するためのものです。

f:id:hiyokosabrey:20180402225038p:plain

以上で◆アイコン用のWidgetは完成です。

 

 

HPゲージ本体

ゲージ本体のWidgetを作っていきます。

キャンバスはこんな感じ。

f:id:hiyokosabrey:20180402225837p:plain

ゲージ本体のパーツは、マテリアルをセットしておきます。

f:id:hiyokosabrey:20180402230251p:plain

マテリアルでゲージを変化させるので、このゲージの長さは適当でOK。

 

左下の Horizontal Box は Panelカテゴリのパーツで、ブループリントから子供Widgetを追加すると自動で水平方向に並べてくれる便利なやつです。サイズが小さいのは中身に合わせて可変する設定 Size to Content が 有効(True) になっているからです。この時点では中身はカラです。

f:id:hiyokosabrey:20180402230657p:plain

下敷き以外のパーツは、 必ず Is Variable にチェックを付けておきます。

f:id:hiyokosabrey:20180402231201p:plain

これでブループリントからいじることができます。

UMGは以上です。

 

ではブループリントを編集していきます。

まずは Event Pre Construction イベントから。

f:id:hiyokosabrey:20180402231424p:plain

このイベントはコンパイルした時点で処理される特殊なイベントです。

変数の初期値をセットしたりするのに向いています。

 HPの段階は配列変数で管理したいので、段階ごとのカラーをLinearColor型の配列変数で用意します。マテリアルを頻繁にいじることになるので、ここで Dynamic Mterial Instance 作って変数化しておきます。Get Dynamic MaterialノードのReturn Value ピンの上で右クリックして Promote to Variable を選択するとラクちんです。

 普段 マテリアルは Static(静的)なものとして扱われます。ブループリントからいじりたい場合はDynamic(動的)なものとして扱います。この辺はお約束として覚えておけばいいと思います。

 

つぎに関数を5つほど用意します。

 

まず一つ目 簡単なとこから。

showVital

f:id:hiyokosabrey:20180402232623p:plain

引数でもらったInt型の値を、UMGのテキストブロックに流し込みます。

 

2つ目

setVitalColors

f:id:hiyokosabrey:20180402232809p:plain

 ゲージのマテリアルにカラーを渡す関数です。

 

ここで、段階ごとのHPを配列で受け取るための変数を用意します。

f:id:hiyokosabrey:20180402233130p:plain

用意できたら3つ目の関数

setVitalValue

f:id:hiyokosabrey:20180402233348p:plain

今現在のHPを、その段階に設定されているHP(配列に格納)で割ると、比率が出ます。それをマテリアルに渡すとゲージが変化します。今回ゲージを右から左に向かって減らしたいので、1.0から引き算しています。

 

ここで、Int型の変数を2つ新しく追加します。名前は Vital と Level にしました。

ボスのHPを保持するのと、段階を保持する変数です。配列にはしません。

 

この時点で 変数リストはこのようになってます。

f:id:hiyokosabrey:20180402234335p:plain

上の方のUMGパーツたちは、Is Variable にチェックをつけるとここに並びます。

一番下の Boss~ はこの後説明します。

 

4つ目

initGauge

f:id:hiyokosabrey:20180402233803p:plain

先に用意した関数を並べます。引数で指定した段階のHPでグラフをセットします。

開始時と段階が進んだ時にこの関数が呼ばれます。

 

5つ目の関数をに行く前にマクロを作ります。

ブログで説明するには長くなるので、マクロにまとめました。

initSubVitalIcon

f:id:hiyokosabrey:20180402235623p:plain

 受け取った配列の数から1ひいた分だけ ◆用Widgetを生成して並べます。後でいじるので、生まれたばかりのWidgetを配列の形で格納(空っぽの配列にAdd)しています。Create Widget ノード の Return Value ピンの上で右クリックして Promote to Variable を選択した後、いったんそのSetノードをグラフから削除します。そしてDetailsタブの方で配列化します。

f:id:hiyokosabrey:20180403000208p:plain

 

いよいよ5つめの関数

setupBossVital

f:id:hiyokosabrey:20180403000636p:plain

この関数が外のブループリントから、ボスのHPを配列で値をもらいます。

 

最後にカスタムイベントを作ります。

このイベントでダメージ分を受け取ってゲージを減らします。

updateVitalValue

f:id:hiyokosabrey:20180403001330p:plain

ダメージの値を受け取って、現在のVitalから引き算します。それを再び変数にセットして、判定を取ります。0以下、ということはマイナスになったかどうかを確認します。

 

いいえ(0以下ではない)だった場合

f:id:hiyokosabrey:20180403001831p:plain

そのままゲージの見た目を更新

 

はい(0以下)だった場合

f:id:hiyokosabrey:20180403002037p:plain

 段階を一つ進めます。こここでも段階がまだあるかどうか判定してから次に進みます。

下段はもう段階がないので、事実上ボスは倒したことになります。

 

以上で完成です。

 

さっそくレベルブループリントからテストしてみましょう。

f:id:hiyokosabrey:20180403002655p:plain

とりあえず段階は4にしてみます。

この状態では、ゲージが減らないので、シミュレーション用のInputイベントを使います。

UE4はキー入力のイベントを扱うノードが充実してるので好きです。

f:id:hiyokosabrey:20180403003013p:plain

 スペースキーを押すたびに、500~5000のランダムな値をゲージWidgetの関数に送り込んでいます。ダメージとして計算してくれるはずです。

 

f:id:hiyokosabrey:20180403004335j:plain

f:id:hiyokosabrey:20180403004347j:plain

無事動いています。

f:id:hiyokosabrey:20180403004414j:plain

ちゃんと下の◆も連動しています。

f:id:hiyokosabrey:20180403004446j:plain

カラーを配列にしているのですが、0番目を透明にしている訳は↑これです。

f:id:hiyokosabrey:20180403004930p:plain

動作がかなりそれっぽくなったと思うのですがいかがでしょうか。

 

今回はFGOの敵HPゲージを目コピしてみましたが、なかなか楽しかったので、また気が向いたら既存のタイトルを再現してみます。

 

ではでは今回はこの辺で

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