【ウディタ講座】アクションRPGを作ろう!~ライフバー(HPゲージ)を2本にする方法~

ボスなどの強敵は一般的に攻撃力と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本めの後ろにぴったり隠れて見えない)

実際に組んでみた様子

 

 

【ウディタ講座】アクションRPGをつくろう! まとめ

コメントはお気軽にどうぞ!