ボスなどの強敵は一般的に攻撃力とHPが非常に大きく設定されます。
これを視覚的に表現して、「こいつ強いぞ!」と瞬時に伝えるのが「通常1本だけのHPゲージが複数ある」という表現。
人気ソシャゲのFGOや、最近発売したキムタク主演で話題の『JUDGE EYES:死神の遺言』でも使われていますね。実はこれ、ふつうのHPゲージ描画にちょっと手を加えるだけで作れてしまいます。
まずはふつうのHPゲージの作り方
ざっくり書くと、この通りです。
- ゲージの下地、ゲージ本体1、(ゲージ本体2、)ゲージの装飾枠の順にピクチャを描画
- ゲージ本体1(&2)では、拡大率を「別々」にチェック
- 縦拡大率は100%。横拡大率は対象の敵の残りのHP%(初回描画では100でOK)
並列処理などで細かくこの処理を呼び出せば、リアルタイムでHPが変わっていくわけですね。
詳細はこちらの記事で。
カッコ表記のゲージ本体2(2本めのゲージ)を足した場合は、こんな感じになります。
ピクチャ番号は1本めのゲージの方が大きいことに注意してください。
2本めのゲージが、1本めの後ろに隠れるためです。
2本めのHPゲージを表現する方法
複数HPゲージの仕様決め
考え方はいろいろありそうですが、この記事では次のように整理しましょう。
- 最初に表示される1本めのゲージ:赤色
- 1本めが尽きた後に動く2本めのゲージ:黄色
- HPが50%以上なら、赤のゲージが動く
- HPが49%以下なら、黄のゲージが動く
ひとつのHPを半分ずつに分けて、別々のゲージで表示しようという考え方ですね。
複数HPゲージの考え方
- 1本めの赤ゲージの横拡大率
残HP%50~100範囲を描画するので、横拡大率は 2×(残HP%-50)
計算結果がマイナスのとき(残HP%49以下)は、横拡大率0 - 2本めの黄ゲージの横拡大率
残HP%0~49範囲を描画するので、残HP%50以上のとき、横拡大率は100
残HP%49以上のとき、横拡大率は 2×残HP% - HPゲージが1本だけでいいケース(ザコなど)
ゲージの1本めと2本めの横拡大率を、どちらも残HP%に指定。
(2本めが1本めの後ろにぴったり隠れて見えない)
実際に組んでみた様子