XNAメモ – HPゲージの実装方法

今回は、HPゲージの実装方法についてメモります。HPゲージと書きましたが、ゲージ系統なら数字を弄るだけで何用にでも出来ます（進行率、パワー、等）。

こんな感じになります：

 

今回の実装方法は、ゲージの量により、描画する画像の横幅を決め、その上に外枠の画像（ゲージの四角い線が描いてある画像）を書きます。これにより、見かけ的には、ゲージの中身が減っていっているように見えます（実際に減っている場合のみですが）。使う画像は、このような感じです：

ゲージの量を元に描画する横幅を計算するには、以下の式を使います：

横幅 = (現在の値 / 最高値) * 外枠の横幅

 

これをHPゲージに置き換えるとこうなります。

横幅 = (残りHP / HP最大値) * 外枠の横幅

 

外枠の横幅は、わざとゲージ外にはみ出したいとき意外は、横幅の最大値なので、これが計算に使われています。

(現在の値 / 最高値)で得られる答えは、0.0f~1.0fの値になり、これは全体の何％を表すか示しています（0.0fが0％、1.0fが100%）。これに横幅の最大値を掛けることにより、横幅の何％で描画すればいいかわかります。（0.5fの場合は横幅の50%, つまり横幅が100の場合 100 * 0.5fで50になり、ゲージの中身は外枠の50％だと言うのがわかります。）

 

では実装方法です。まずは、ゲージクラスの変数宣言とコンストラクタです。

class Gauge
{
Texture2D m_backgroundTexture;
Texture2D m_pixel;
float m_maxValue;
public float m_currentValue;
float m_width;
Rectangle m_bounds;
Color m_colour;

public Gauge(Texture2D backgroundTex, Texture2D pixel, Rectangle bounds, float startAmount, float maxValue, float width, Color colour)
{
m_backgroundTexture = backgroundTex;
m_pixel = pixel;
m_bounds = bounds;
m_width = width;
m_maxValue = maxValue;
m_currentValue = startAmount;
m_colour = colour;
}

backgroundTexといのが、外枠の画像で、pixelといのは 1×1の白い画像です。これを引き伸ばしてゲージの中身にします。

次に描画処理です。ゲージの中身の計算もココでします。

public void Draw(SpriteBatch sp)
{
// ゲージの量を計算
int width = (int)((m_currentValue / m_maxValue) * m_width);

// ゲージの中身を描画
sp.Draw(m_pixel, new Rectangle(m_bounds.X, m_bounds.Y, width, m_bounds.Height), m_colour);

// 四角い背景描画
sp.Draw(m_backgroundTexture, m_bounds, Color.White);
}

これで後はゲージクラスを使うだけです。

<pre>protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);

// ゲージの初期化
Texture2D border = Content.Load<Texture2D>("gauge");
Texture2D pixel = Content.Load<Texture2D>("pixel");
int width = 350;
Rectangle bounds = new Rectangle(100, 100, width, 50);

hpGauge = new Gauge(border, pixel, bounds, 100, 100, width, Color.LightGreen);
}

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);

spriteBatch.Begin();
hpGauge.Draw(spriteBatch);
spriteBatch.End();

base.Draw(gameTime);
}

以上です。この上にゲージクラス内のm_currentValueを減らすと、ゲージが減っているように見えます。