DirectX 体力ゲージ - はかせのラボ

あいさつ
UIのお話
ゲージとは？
ゲージ操作のやり方
実装
あとがき

あいさつ

今日アクセスを見てみたら見たことのないアクセス数でビビったはかせです。

( 'ω' )ﾌｧｯ!? pic.twitter.com/8lRy9fyfpt
— hakase@ゲーム (@hakase70945250) November 27, 2018

本当にありがとうございます。これからもがんばります。
そして本編です。今回はゲージ操作のお話です。

UIのお話

ゲームにおいてUIが大事なのは皆さんご存知のことだと思います。
いいUIであればやりやすくなんなら快感を生み、プレイしたくさせます。
逆に悪いUIであればどれだけ神ゲーでも一転してクソゲーになります。

今回はUI実装第一弾としてボスの体力ゲージを実装します。

ゲージとは？

ゲージというのは極論を言えば、
一枚の画像を値の割合に従って伸縮させているだけのものです。
それ以上でも以下でもありません。

ゲージ操作のやり方

画像を伸縮させるやり方でパッと思いつくのは
①スケールを変える
②シェーダー等でUV座標を弄る

イケてる感じにしたいならば②でしょうが
残念ながら筆者はシェーダーに対して苦手意識があるので①でいきます。

では素直にスケールを縮めれば良いのか？
答えは「No」です(自分の作り方では)

素直に縮めると以下の画像のようになります。
f:id:hakase0274:20181127204020p:plain

はい。両サイドが等幅で縮んでいきます。
ゲージは片一方にのみ伸縮するものであり、両サイドに伸縮はしません。
これではダメですね。やり方を変える必要がありそうです。
ですがやはりシェーダーは触りたくありません。
そこでちょっと小細工をしてみます。

さっきの画像では両サイドが等幅で縮んでいました。
ならば、縮んだ分左にずらせばそれっぽくなりそうです。
↓イメージ図
f:id:hakase0274:20181127205614p:plain

ということでこれで実装してみます。

実装

いつも通り動画です。画面上部に注目です。
youtu.be

実装コードです。

//体力比率計算
auto hpRate = mHPViewObject->GetHP() / mMaxHitPoint;
//バーのサイズ変更
auto scalex = mDefaultScaleX * hpRate;
mTransform->Scale.x = scalex;
//サイズ変更に合わせて場所を移動
auto positionx = mDefaultPositionX - mDefaultScaleX * (1 - hpRate) * 0.5;
mTransform->Position.x = positionx;

こんな感じで体力比率を求めて
スケールを変更しています。
そのあとに変動値の半分だけ左にずらしています。

半分だけずらしているのは変動値は両サイドの合計だからです。
今回は左詰めをしたいので半分ずらすだけで十分なのです。