RPGとかアクションゲームのボス戦なんかで、ボスキャラの体力がものすご~くたくさんあるのを表現したゲージがありますが、そのひとつ作ってみました。
参考にしたのは、大人気モバイルゲームタイトルのFGOです。
普通は1本のゲージが何本もあるかのように見せるタイプが多いです。
例えば1本分がHP1500だとしてその4倍のHP6000をボスが持つ場合、単純に4本分削ることになります。その場合ゲージの色分けで表現すれば十分伝わると思うのですが、
FGOは少し違いました。
長さは同じでも1本分にあたるHPの量が違うのです。それはゲージに添えられている数字が説明しています。また、ゲージの下にある◆アイコンがゲージのカラーと連動しています。この◆はいったい何を説明しているのか最初分かりませんでした。
単にゲージの本数を表しているだけでこんなアイコン置くかな・・・、と思いながら攻略サイトを眺めていると、どうやら、ボスキャラたちはゲージのカラー(段階)によって攻撃パターンを変えてくる仕様になっている様子。そういえばHP量を表す数字も、毎回カラーごとに一旦 0 になってから新しく仕切り直しています。ラスボスとかでよく見かけるやつです。HPがある程度減ったら形態が変わってHPが再充填されたりする。その段階を◆のアイコンで分かりやすくしてるようです。
いろいろ納得したところで、UE4で作ってみたのを紹介します。
色分けはマテリアルで
マテリアルでゲージを作るときは、テクスチャを使ったUVスクロールか、LinearGradientとValueStepコンビの2パターンを良く使います。今回は後者で。
左の Valueと書かれた Scalar Parameter Valueノードの初期値は 1.0 にしておきます。
質感を出すためにテクスチャを追加します
4x40 px のGrayScale
Addノードを使って間に割り込ませます。
ブループリントからいじるためのパラメータ用のノードが3つあります。
長さを変化させるのが ScalarParameter です。
この変数を 0.0 ~ 1.0 に変化させることになります。
今回2本分のゲージをマテリアルで切り替えるようにした理由は、登場や退場演出などで、アルファフェードしたときに重なりを見せなくするためです。
マテリアルは完成。これをUMGに仕込んでいきます。
◆用のWdget
ゲージ下のアイコンを別Widgetで作ろうか悩んでみたけど、結局ラクするために用意することにします。
まずUMGのキャンバスに3つのImageパーツを重ねます。
真ん中のパーツには作っておいたマテリアルをセットします。このパーツにブループリントから色のパラメータを渡して着色します。
次に消滅アニメーションを用意します。
ヒビが入って飛び散る動きをさせたかったのですが説明が長くなるので別に機会にします。ひとまず白くなって消えるだけですが、これはエフェクト用のパーツをアルファ値のフェードで登場させ最後のフレームで下敷きを残して消しています。
VANISHというアニメーション名にしておきます。
次にブループリントを編集します。
カラーを受け取る関数を用意します。
青いピン(引数:DetailsタブのInputsの項目で追加)はLinearColor型です。
関数が用意できたら、EventGraphに戻って、カスタムイベントを一つ用意します。
これは消滅時のアニメーションを再生するためのものです。
以上で◆アイコン用のWidgetは完成です。
HPゲージ本体
ゲージ本体のWidgetを作っていきます。
キャンバスはこんな感じ。
ゲージ本体のパーツは、マテリアルをセットしておきます。
マテリアルでゲージを変化させるので、このゲージの長さは適当でOK。
左下の Horizontal Box は Panelカテゴリのパーツで、ブループリントから子供Widgetを追加すると自動で水平方向に並べてくれる便利なやつです。サイズが小さいのは中身に合わせて可変する設定 Size to Content が 有効(True) になっているからです。この時点では中身はカラです。
下敷き以外のパーツは、 必ず Is Variable にチェックを付けておきます。
これでブループリントからいじることができます。
UMGは以上です。
ではブループリントを編集していきます。
まずは Event Pre Construction イベントから。
このイベントはコンパイルした時点で処理される特殊なイベントです。
変数の初期値をセットしたりするのに向いています。
HPの段階は配列変数で管理したいので、段階ごとのカラーをLinearColor型の配列変数で用意します。マテリアルを頻繁にいじることになるので、ここで Dynamic Mterial Instance 作って変数化しておきます。Get Dynamic MaterialノードのReturn Value ピンの上で右クリックして Promote to Variable を選択するとラクちんです。
普段 マテリアルは Static(静的)なものとして扱われます。ブループリントからいじりたい場合はDynamic(動的)なものとして扱います。この辺はお約束として覚えておけばいいと思います。
つぎに関数を5つほど用意します。
まず一つ目 簡単なとこから。
showVital
引数でもらったInt型の値を、UMGのテキストブロックに流し込みます。
2つ目
setVitalColors
ゲージのマテリアルにカラーを渡す関数です。
ここで、段階ごとのHPを配列で受け取るための変数を用意します。
用意できたら3つ目の関数
setVitalValue
今現在のHPを、その段階に設定されているHP(配列に格納)で割ると、比率が出ます。それをマテリアルに渡すとゲージが変化します。今回ゲージを右から左に向かって減らしたいので、1.0から引き算しています。
ここで、Int型の変数を2つ新しく追加します。名前は Vital と Level にしました。
ボスのHPを保持するのと、段階を保持する変数です。配列にはしません。
この時点で 変数リストはこのようになってます。
上の方のUMGパーツたちは、Is Variable にチェックをつけるとここに並びます。
一番下の Boss~ はこの後説明します。
4つ目
initGauge
先に用意した関数を並べます。引数で指定した段階のHPでグラフをセットします。
開始時と段階が進んだ時にこの関数が呼ばれます。
5つ目の関数をに行く前にマクロを作ります。
ブログで説明するには長くなるので、マクロにまとめました。
initSubVitalIcon
受け取った配列の数から1ひいた分だけ ◆用Widgetを生成して並べます。後でいじるので、生まれたばかりのWidgetを配列の形で格納(空っぽの配列にAdd)しています。Create Widget ノード の Return Value ピンの上で右クリックして Promote to Variable を選択した後、いったんそのSetノードをグラフから削除します。そしてDetailsタブの方で配列化します。
いよいよ5つめの関数
setupBossVital
この関数が外のブループリントから、ボスのHPを配列で値をもらいます。
最後にカスタムイベントを作ります。
このイベントでダメージ分を受け取ってゲージを減らします。
updateVitalValue
ダメージの値を受け取って、現在のVitalから引き算します。それを再び変数にセットして、判定を取ります。0以下、ということはマイナスになったかどうかを確認します。
いいえ(0以下ではない)だった場合
そのままゲージの見た目を更新
はい(0以下)だった場合
段階を一つ進めます。こここでも段階がまだあるかどうか判定してから次に進みます。
下段はもう段階がないので、事実上ボスは倒したことになります。
以上で完成です。
さっそくレベルブループリントからテストしてみましょう。
とりあえず段階は4にしてみます。
この状態では、ゲージが減らないので、シミュレーション用のInputイベントを使います。
UE4はキー入力のイベントを扱うノードが充実してるので好きです。
スペースキーを押すたびに、500~5000のランダムな値をゲージWidgetの関数に送り込んでいます。ダメージとして計算してくれるはずです。
無事動いています。
ちゃんと下の◆も連動しています。
カラーを配列にしているのですが、0番目を透明にしている訳は↑これです。
動作がかなりそれっぽくなったと思うのですがいかがでしょうか。
今回はFGOの敵HPゲージを目コピしてみましたが、なかなか楽しかったので、また気が向いたら既存のタイトルを再現してみます。
ではでは今回はこの辺で
ステキなボスゲージライフを!