XNAメモ – 自動改行するテキストボックスの作り方

Posted: 2011年9月17日 カテゴリー: プログラミングメモ, XNA, XNAメモ
タグ:, , , ,

今回はかなりシンプルなメモです。XNAで文字列を描画すると、改行するためには自分で’\n’を足す必要が有ります。これは文字列が増えるとかなり面倒になるので、自動で改行してくれるテキストボックスを作成します。

普通の描画:

テキストボックスを使っての描画:

まず、TextBoxクラスを作成し、テキストボックスの大きさを示すRectangleのメンバ変数を持たせます。

class TextBox
{
protected Rectangle m_bounds;
public TextBox(Rectangle bounds)
{
m_bounds = bounds;
}
...

次に、文字列をに改行加えてくれる関数を作ります。文字列の改行は英語と日本語とで方法が少し変わりますのが(単語ごとの確認か、文字ごとの確認)、日本語の描画を説明するのが面倒なので今回は英文専用です。

まず、一行の文字列を保存する変数、変換した文字列を保存する変数、単語別に分解された文章を保存している配列を作ります。


private string WrapWords(string text, SpriteFont font)
{
string line = ""; // 現在の行の文字列
string wrappedText = ""; // 変換済みの文字列
string[] words = text.Split(' '); // 単語別に分解した文字列

...

次に、全ての単語をループして改行を加えた新しい文字列を作ります。まず、現在の行の文字列(line)に、現在の単語を足した長さを測ります。


foreach (string word in words)

{

// 現在の行の文字列(line)に、現在の単語を足した長さを測る
float length = font.MeasureString(line + word).Length();
...

そして、獲得された長さがテキストボックスの横幅を越えていた場合、現在の行の文字列と改行(’\n’)を、変換後に返す文字列に足し、現在の行の中身を次にそなえ空にします。


if (length > m_bounds.Width)
{
  wrappedText += line + '\n';
  line = "";
}

次に、今の行に現在使われている単語を足します。

  line += word + ' ';
} // foreach 終了

全ての単語を確認し終わった後に、変換済みの文字列と現在の行を足した文字列を返して終わりです。

return wrappedText + line;

これらを作り終わったら、後は描画するだけです。これは結構適当なので、テクスチャアとかはメンバとして保存しておくのもアリです。


public virtual void Draw(SpriteBatch sp, SpriteFont font, string text, Texture2D texture, Color colour)
{
if (texture != null)
{
  sp.Draw(texture, m_bounds, colour);
}

sp.DrawString(font, WrapWords(text, font), new Vector2(m_bounds.X + 5, m_bounds.Y + 5), Color.White);
}

今回はコレで終わりですが、もしかしたら何時か付け足します。

作ったクラスはココに置いておきます(中身は少しだけ違い、文字ごとに改行を確認する関数も実装されてます)。

http://www.mediafire.com/download.php?6nppsxug4glsoou

コメント
  1. […] 今回はノベルゲームとかで見られる文字列を一文字ずつ描画する方法を残します。ちなみに、描画には前回のメモで作ったテキストボックスを使っています。 […]

  2. 小次郎 より:

    こんにちは。いつもとても役立つコンテンツを楽しく見させていただいております。
    自動改行のテキストボックスに関して、mediafireにあるファイルが消えてしまっています。
    文字ごとの改行を参考にさせて欲しいのですが、また上げていただけないでしょうか。
    よろしくお願いいたします。

    • K1 より:

      コメントありがとうございます。
      ファイルは上げ直しておいたので、記事内のリンクから、また試してみてください。

  3. 小次郎 より:

    お早い対応ありがとうございました。
    とても勉強になりました。

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中