XNAメモ – メニューの作り方3: サイズが変わるメニュー

Posted: 2012年1月15日 カテゴリー: プログラミングメモ, XNA, XNAメモ
タグ:, , , , , ,

今回は、サイズが変わるメニューの作り方をメモります。

言葉ではわかりにくいかもしれませんので、実装後の動画を先に載せます:

 

まず、前に作ったメニュークラスに文字列の大きさを保存するためのリストを作ります。

class Menu
{
List<float> m_scales; // 大きさのリスト
float m_maxScale = 1.5f; // 大きさの最高値
float m_minScale = 1.0f; // 大きさのデフォルト値
 

そして、メニューの選択肢を足す時にデフォルトの大きさを足してください。

public virtual void AddMenuItem(string name, Vector2 position)
{
m_menuItem.Add(name);
m_positions.Add(position);
m_scales.Add(1.0f); // デフォルトのサイズを足す
}
 

次に、実際に文字列の大きさを変える処理を実装します。この処理は、少しずつサイズを変更するために毎フレーム呼び出される必要があります。

やっている事は、選択されているオプションを大きくし、それ以外のオプションはデフォルト値より大きい場合は小さくします。毎フレーム大きさを変更をするための数値は、ソレっぽく見える様に適当に作ったので、好みで変更してください(speed変数)。

public virtual void Update(float delta)
{
// サイズ変更の速度
float speed = 1.2f * delta;

for (int i = 0; i < m_menuItem.Count; ++i)
{
// もし現在選択されている選択肢なら
if (i == SelectedNumber)
{
 if (m_scales[i] < m_maxScale)
 {
  //選択肢のサイズを大きくする
  m_scales[i] += speed; }
 }
 else if (m_scales[i] > m_minScale && i != m_currentMenuItem)
 {
  //選択されてなく、なおデフォルト値より大きい場合小さくする
  m_scales[i] -= speed;
 }
}
}
 

後は、描画処理です。メニューのオプションを描画する前に、大きさを計算して位置を計算する必要があります。この位置の計算は好みで変更してください。SpriteBatch.DrawString()メソッドは、前と違うオーバーロードを使ってサイズ指定をしています。

public virtual void Draw(SpriteBatch sp, SpriteFont font)
{
// メニューのオプションを描画する
for (int i = 0; i < m_menuItem.Count; i++)
{
// 描画位置を計算する
Vector2 pos = m_positions[i];
pos.Y -= (float)(22 * m_scales[i] / 2);
pos.X -= (float)(22 * m_scales[i] / 2);

// もし現在カーソルがあっている場合
if (i == SelectedNumber)
{
sp.DrawString(font, m_menuItem[i], pos, m_selectedColour, 0, Vector2.Zero, m_scales[i], SpriteEffects.None, 0);
}
else
{
// 他と同じ色で描画する
sp.DrawString(font, m_menuItem[i], pos, m_unSelectedColour, 0, Vector2.Zero, m_scales[i], SpriteEffects.None, 0);
}
}
// ...テキストの描画
 

後は実際にメニュークラスのUpdateメソッドを呼ぶだけです。

menu.Update((float)gameTime.ElapsedGameTime.TotalSeconds);
 

今回はここまでです。何か質問があればコメントかメールをお送りください。

コメント
  1. roier より:

    nice work, i can’t understend the comments, but its obvious, cool menu🙂

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中