フォントスタイルの詳細
ページ更新日 :
ページ作成日 :
概要
スプライトフォントファイルと表示される文字の詳細を説明します。
動作環境
必須環境
| 対応 XNA バージョン |
|
| 対応プラットフォーム |
|
| Windows 必須頂点シェーダ バージョン | 2.0 |
| Windows 必須ピクセルシェーダ バージョン | 2.0 |
動作確認環境
| プラットフォーム |
|
内容
スプライトフォントファイルでは、以下の7つの項目が指定できます。
- フォント名
- 文字のサイズ
- 文字と文字の間の幅
- カーニングの有無
- フォントスタイル
- デフォルト文字
- 作成する文字コード
ここでは下記のフォントをデフォルトのフォントとしています。(文字の大きさなどもありますのでスプライトフォント作成後から少しいじっています)
| フォント名 | Segoe UI Mono |
| サイズ | 24 |
| スペース | 0 |
| カーニング | true |
| スタイル | Regular |
フォント名
<FontName>ＭＳ 明朝</FontName>
フォント名を指定できます。指定できるフォントは開発環境にインストールされているフォントになります。ビルド時にフォントイメージが生成されるため、作成したフォントがインストールされていない環境でも問題なく使用することができます。下の文字は「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 の１文字のみで、CharacterRegions で指定されていない文字も指定できます。
文字コード
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</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 | { | } | ~ | |
全コード
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);
}
}
}