「ゲージ」タグのついた投稿

今回は円ゲージ、もしくは円型のカウントダウン等の演出で使える表現を紹介します。

(さらに…)

今回はuGUIを使用してゲージを作る方法を紹介します。

 

まずは、UnityのメニューからGameObject > UI > Slider を選択肢してスライダーを作成してください。

gauge0次にハンドル部分が邪魔なので消します。Sliderオブジェクトの子供にある”Handle Slide Area”のオブジェクトを消してください。

gauge1現状だとゲージの下地と現在値の表示位置がずれているので、調整します。Sliderの子供のFill Areaとその子供のFillのX,Y,Z,Left,Rightの全てが0になるように変更してください。

gauge2ついでに、ゲージの色を変えたい場合はFillの色を変更してください。

最後にゲージの最大値を設定します。SliderオブジェクトのSliderコンポーネントのMax Valueに使用する最大値を設定してください。

gauge3スクリプトから設定したい場合(現在のキャラの最大HPを適応させたい場合など)、slider.maxValueで設定出来ます。

        UnityEngine.UI.Slider slider = GetComponent<UnityEngine.UI.Slider>();
        slider.maxValue = max;

これでゲージが完成しましたので、後は現在値が変わったらSliderクラス内のvalueに現在の値を設定してください。

        UnityEngine.UI.Slider slider = GetComponent<UnityEngine.UI.Slider>();
        slider.value = Mathf.Clamp(current, slider.minValue, slider.maxValue);

currentは現在値で設定する時にSliderに設定されている最低値と最大値に収まる様に設定しています。

以上になります。

今回は、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を減らすと、ゲージが減っているように見えます。