カウンタ

XNA

フォントスタイルの詳細

ページ更新日:2010/10/23
概要

スプライトフォントファイルと表示される文字の詳細を説明します。

フォントスタイルの詳細
動作環境
必須環境
対応 XNA バージョン
  • 4.0
対応プラットフォーム
  • Windows (XP SP2 以降, Vista, 7)
  • Xbox 360
  • Windows Phone 7
Windows 必須頂点シェーダ バージョン 2.0
Windows 必須ピクセルシェーダ バージョン 2.0
動作確認環境
プラットフォーム
  • Windows 7
  • Xbox 360
  • Windows Phone 7 エミュレーター
サンプルの操作方法
内容

スプライトフォントファイルでは、以下の7つの項目が指定できます。

  • フォント名
  • 文字のサイズ
  • 文字と文字の間の幅
  • カーニングの有無
  • フォントスタイル
  • デフォルト文字
  • 作成する文字コード

ここでは下記のフォントをデフォルトのフォントとしています。(文字の大きさなどもありますのでスプライトフォント作成後から少しいじっています)

デフォルトのフォント

フォント名 Segoe UI Mono
サイズ 24
スペース 0
カーニング true
スタイル Regular

フォント名

<FontName>MS 明朝</FontName>

フォント名を指定できます。指定できるフォントは開発環境にインストールされているフォントになります。ビルド時にフォントイメージが生成されるため、作成したフォントがインストールされていない環境でも問題なく使用することができます。下の文字は「MS 明朝」で表示しています。

フォント名変更

フォント名 MS 明朝
サイズ 24
スペース 0
カーニング true
スタイル Regular

サイズ

<Size>36</Size>

文字のサイズです。スクリーン上でのサイズになり、小数点以下も指定できます。(正確にはバックバッファ上でのサイズになります)

サイズ変更

フォント名 Segoe UI Mono
サイズ 36
スペース 0
カーニング true
スタイル Regular

文字間スペース

<Spacing>12</Spacing>

各文字の間の幅を指定できます。数値はスクリーン上での大きさになります。(正確にはバックバッファ上でのサイズになります)

文字間スペース変更

フォント名 Segoe UI Mono
サイズ 24
スペース 12
カーニング true
スタイル Regular

カーニング

<UseKerning>false</UseKerning>

文字間隔をバランスよく整えます。詳しくは下のリンク先が参考になるかと思います。

デフォルトでは true になっており、文字によって文字間のスペースが見やすいように自動調整されます。false にすると文字間にスペースが調整されず詰まったような形で表示されます。

カーニングを無効にしています。

フォント名 Segoe UI Mono
サイズ 24
スペース 0
カーニング false
スタイル Regular

スタイル

<Style>Bold</Style>

文字を太字にしたり、イタリックにしたりできます。指定できるパラメータは「Regular(通常)」「Bold(太字)」「Italic(イタリック)」です。複数指定する場合はカンマ(,)で区切って指定します。

太字 イタリック

フォント名 Segoe UI Mono
サイズ 24
スペース 0
カーニング true
スタイル Bold と Italic

デフォルト文字

<DefaultCharacter>◆</DefaultCharacter>

スプライトフォントでは「CharacterRegions」で使用できる文字コードを指定できますが、それ以外の文字を表示しようとした場合、今までの XNA Framework (3.1 まで)では実行時に例外が発生していました。

しかし、この「DefaultCharacter」を指定しておけば、予想しない文字が入力された場合でも代替文字として表示することができます。特にユーザー入力テキストなどで効果を発揮すると思います。

下記の表示例では、プログラムで「"デフォルト文字"」と表示させようとしていますが、このスプライトフォントでは英数字記号しか許可していないので、DefaultCharacter で指定している「◆」に置き換えて表示されています。

ちなみにここで指定できる文字は Unicode の1文字のみで、CharacterRegions で指定されていない文字も指定できます。

文字コード

<CharacterRegions>
  <CharacterRegion>
    <Start>&#32;</Start>
    <End>&#126;</End>
  </CharacterRegion>
</CharacterRegions>

表示できる文字を Unicode で定義されているコードで指定します。「Start」と「End」で指定したコード間に含まれる文字が使用できるようになっています。

大きい数値を指定すれば日本語などの文字も使用できるようになりますが、ビルドに時間がかかったり、出来上がったフォントイメージのファイルサイズがかなり大きくなったりするので注意が必要です。

CharacterRegion」のノードは複数定義できるので、飛び飛びで文字コードを指定したい場合に使うことができます。

Unicode 表 (32~127)

(行の数値×16+列の数値)がコードになります。

  0 1 2 3 4 5 6 7 8 9 A B C D E F
2 ! " # $ % & ' ( ) * + , - . /
3 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4 @ A B C D E F G H I J K L M N O
5 P Q R S T U V W X Y Z [ \ ] ^ _
6 ` a b c d e f g h i j k l m n o
7 p q r s t u v w x y z { | } ~ 
プロジェクト ダウンロード
ファイル サイズ 対応XNAバージョン プラットフォーム 作成日
xna_tips_fontstyle_4_0_project.zip 174 KB 4.0 Windows (XP SP2 以降, Vista, 7), Xbox 360, Windows Phone 7 2010/10/23
xna_tips_fontstyle_3_0_project.zip 21 KB 3.0 Windows (XP SP2 以降, Vista), Xbox 360 2009/01/04
xna_tips_fontstyle_2_0_project.zip 19 KB 2.0 Windows (XP SP2, Vista), Xbox 360 2008/01/01
xna_tips_fontstyle_1_0_ref_project.zip 19 KB 1.0 Refresh Windows (XP SP2, Vista), Xbox 360 2007/07/15

※ Ver 4.0 のパッケージには実行ファイルも含まれています。(Windows 版のみ)

サンプル実行ファイル (Windows のみ)
ファイル サイズ 対応XNAバージョン プラットフォーム 作成日
xna_tips_fontstyle_3_0_exe.zip 67.8 KB 3.0 Windows (XP SP2 以降, Vista) 2009/01/04
xna_tips_fontstyle_2_0_exe.zip 96.1 KB 2.0 Windows (XP SP2, Vista) 2008/01/01
xna_tips_fontstyle_1_0_ref_exe.zip 84.2 KB 1.0 Refresh Windows (XP SP2, Vista) 2007/07/15
全コード
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
#if WINDOWS_PHONE
using Microsoft.Xna.Framework.Input.Touch;
#endif

namespace FontStyle
{
    /// <summary>
    /// ゲームメインクラス
    /// </summary>
    public class GameMain : Microsoft.Xna.Framework.Game
    {
        /// <summary>
        /// グラフィックデバイス管理クラス
        /// </summary>
        private GraphicsDeviceManager graphics = null;

        /// <summary>
        /// スプライトのバッチ化クラス
        /// </summary>
        private SpriteBatch spriteBatch = null;

        /// <summary>
        /// デフォルトフォント
        /// </summary>
        private SpriteFont defaultFont = null;

        /// <summary>
        /// フォント名変更フォント
        /// </summary>
        private SpriteFont fontNameFont = null;

        /// <summary>
        /// サイズ変更フォント
        /// </summary>
        private SpriteFont sizeFont = null;

        /// <summary>
        /// 文字間変更フォント
        /// </summary>
        private SpriteFont spacingFont = null;

        /// <summary>
        /// 太字フォント
        /// </summary>
        private SpriteFont boldFont = null;

        /// <summary>
        /// イタリックフォント
        /// </summary>
        private SpriteFont italicFont = null;

        /// <summary>
        /// カーニングOFFフォント
        /// </summary>
        private SpriteFont kerningOffFont = null;

        /// <summary>
        /// デフォルト文字フォント
        /// </summary>
        private SpriteFont defaultCharacterFont = null;


        /// <summary>
        /// GameMain コンストラクタ
        /// </summary>
        public GameMain()
        {
            // グラフィックデバイス管理クラスの作成
            this.graphics = new GraphicsDeviceManager(this);

            // ゲームコンテンツのルートディレクトリを設定
            this.Content.RootDirectory = "Content";

#if WINDOWS_PHONE
            // Windows Phone のデフォルトのフレームレートは 30 FPS
            this.TargetElapsedTime = TimeSpan.FromTicks(333333);

            // バックバッファサイズの設定
            this.graphics.PreferredBackBufferWidth = 480;
            this.graphics.PreferredBackBufferHeight = 800;

            // フルスクリーン表示
            this.graphics.IsFullScreen = true;
#endif
        }

        /// <summary>
        /// ゲームが始まる前の初期化処理を行うメソッド
        /// グラフィック以外のデータの読み込み、コンポーネントの初期化を行う
        /// </summary>
        protected override void Initialize()
        {
            // TODO: ここに初期化ロジックを書いてください

            // コンポーネントの初期化などを行います
            base.Initialize();
        }

        /// <summary>
        /// ゲームが始まるときに一回だけ呼ばれ
        /// すべてのゲームコンテンツを読み込みます
        /// </summary>
        protected override void LoadContent()
        {
            // テクスチャーを描画するためのスプライトバッチクラスを作成します
            this.spriteBatch = new SpriteBatch(this.GraphicsDevice);

            // フォントをコンテンツパイプラインから読み込む
            this.defaultFont = this.Content.Load<SpriteFont>("Default");
            this.fontNameFont = this.Content.Load<SpriteFont>("FontName");
            this.sizeFont = this.Content.Load<SpriteFont>("Size");
            this.spacingFont = this.Content.Load<SpriteFont>("Spacing");
            this.boldFont = this.Content.Load<SpriteFont>("Bold");
            this.italicFont = this.Content.Load<SpriteFont>("Italic");
            this.kerningOffFont = this.Content.Load<SpriteFont>("KerningOff");
            this.defaultCharacterFont = this.Content.Load<SpriteFont>("DefaultCharacter");
        }

        /// <summary>
        /// ゲームが終了するときに一回だけ呼ばれ
        /// すべてのゲームコンテンツをアンロードします
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: ContentManager で管理されていないコンテンツを
            //       ここでアンロードしてください
        }

        /// <summary>
        /// 描画以外のデータ更新等の処理を行うメソッド
        /// 主に入力処理、衝突判定などの物理計算、オーディオの再生など
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Update(GameTime gameTime)
        {
            // Xbox 360 コントローラ、Windows Phone の BACK ボタンを押したときに
            // ゲームを終了させます
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            {
                this.Exit();
            }

            // TODO: ここに更新処理を記述してください

            // 登録された GameComponent を更新する
            base.Update(gameTime);
        }

        /// <summary>
        /// 描画処理を行うメソッド
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Draw(GameTime gameTime)
        {
            // 画面を指定した色でクリアします
            this.GraphicsDevice.Clear(Color.CornflowerBlue);

            // スプライトの描画準備
            this.spriteBatch.Begin();

            // デフォルト
            this.spriteBatch.DrawString(this.defaultFont, "Sample Text -Default-",
                new Vector2(20.0f, 20.0f), Color.White);

            // カーニング OFF
            this.spriteBatch.DrawString(this.kerningOffFont, "Sample Text -Kerning OFF-",
                new Vector2(20.0f, 70.0f), Color.White);

            // フォント名
            this.spriteBatch.DrawString(this.fontNameFont, "Sample Text -FontName-",
                new Vector2(20.0f, 120.0f), Color.White);

            // フォントサイズ
            this.spriteBatch.DrawString(this.sizeFont, "Sample Text -Size-",
                new Vector2(20.0f, 170.0f), Color.White);

            // 文字間
            this.spriteBatch.DrawString(this.spacingFont, "Sample Text -Spacing-",
                new Vector2(20.0f, 220.0f), Color.White);

            // 太字
            this.spriteBatch.DrawString(this.boldFont, "Sample Text -Bold-",
                new Vector2(20.0f, 270.0f), Color.White);

            // イタリック
            this.spriteBatch.DrawString(this.italicFont, "Sample Text -Italic-",
                new Vector2(20.0f, 320.0f), Color.White);

            // デフォルト文字
            this.spriteBatch.DrawString(this.defaultCharacterFont, "Sample Text -デフォルト文字-",
                new Vector2(20.0f, 370.0f), Color.White);

            // スプライトの一括描画
            this.spriteBatch.End();

            // 登録された DrawableGameComponent を描画する
            base.Draw(gameTime);
        }
    }
}
更新履歴
更新日時 更新内容
2010/10/23 XNA Game Studio 4.0 用に修正
2009/01/04 XNA Game Studio 3.0 のプロジェクト追加
2008/05/18 文章・プログラムの校正
2008/01/01 XNA Game Studio 2.0 用に修正
2007/07/15 ページ作成
広告
Copyright (C) since 2005 Yuichi Onodera (おのでら), All rights reserved.