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