Zobrazení alfanumerických znaků

Stránky aktualizovány :
Datum vytvoření stránky :

shrnutí

Zobrazí libovolný řetězec znaků (alfanumerický) na obrazovce.

英数字を表示させる

Provozní prostředí

Požadavky

Podporované verze XNA
  • 2.0
  • 3.0
  • 3.1
  • 4.0
Podporované platformy
  • Windows (XP SP2 nebo novější, Vista, 7)
  • Xbox 360
  • Windows Phone 7
Požadovaná verze Vertex Shader systému Windows 2.0
Windows Požadovaná verze pixel shaderu 2.0

Provozní prostředí

nástupiště
  • Systém Windows 7
  • Xbox 360
  • Emulátor systému Windows Phone 7

hmota

Aby bylo možné zobrazit text v jazyce XNA, potřebujete soubor nazvaný "písmo sprajtů", který popisuje informace o písmu. Přípona je ". spritefont. Soubory písma Sprite jsou napsány v rozšířeném formátu XML, takže je lze snadno přepsat. Chcete-li vytvořit písmo sprajtů, postupujte následovně:

Klikněte pravým tlačítkem myši na projekt Obsah a klikněte na Přidat → novou položku.

Otevře se dialogové okno Přidat novou položku.

V nainstalované šabloně je položka s názvem "Sprite Font", tak ji vyberte.

Zadejte název souboru, ale zde se jmenuje "Font.spritefont". V podstatě si můžete nastavit libovolný název.

Po zadání stiskněte tlačítko "Přidat" vpravo dole.

Když vytvoříte soubor, soubor písma sprajtu se otevře.

Byl také přidán do projektu obsahu.

Obsah písma sprajt může být ponechán jako výchozí, ale tentokrát byl přepsán následovně (komentáře jsou pro přehlednost také japonské). Vysvětlení jednotlivých uzlů naleznete v komentářích.

Kromě toho je podrobné vysvětlení sprajtových písem vysvětleno v části "Podrobnosti o stylu písma".

<?xml version="1.0" encoding="utf-8"?>
<!-- 文字の描画に使用するフォントの名前やサイズなどの情報を記述します。 -->
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">

    <!--
      使用するフォント名。
    -->
    <FontName>メイリオ</FontName>

    <!--
      文字のサイズ。浮動小数点も可。単位はバックバッファ内でのピクセル単位。
    -->
    <Size>18</Size>

    <!--
      文字間の幅。単位はバックバッファ内でのピクセル単位。
    -->
    <Spacing>0</Spacing>

    <!--
      カーニングを使用するかどうか。
    -->
    <UseKerning>true</UseKerning>

    <!--
      文字スタイル。通常は"Regular"、太文字は"Bold", イタリックは"Italic"
      "Bold, Italic"と記述することで複数のスタイルを指定可能。
    -->
    <Style>Regular</Style>

    <!--
      キャラクターリージョンで指定した文字次回の文字が描画されようとしたときに
      代わりに表示する文字を指定します。ASCII 以外の Unicode 文字も可。
    -->
    <DefaultCharacter>*</DefaultCharacter>

    <!--
      キャラクターリージョン。使う文字の範囲をUnicodeで指定します。
      32(ASCIIのスペース)から126('~')の英数字を指定しています。(10進数)
    -->
    <CharacterRegions>
      <CharacterRegion>
        <Start>&#32;</Start>
        <End>&#126;</End>
      </CharacterRegion>
    </CharacterRegions>
  </Asset>
</XnaContent>

Dále popíšu program pro kreslení textu.

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

/// <summary>
/// スプライトでテキストを描画するためのフォント
/// </summary>
private SpriteFont font = null;

Ke kreslení textu používáme dvě třídy: "SpriteBatch" a "SpriteFont". Text bude nakreslen jako sprajt.

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

    // フォントをコンテンツパイプラインから読み込む
    this.font = this.Content.Load<SpriteFont>("Font");
}

V rámci metody LoadGraphicsContent nejprve vytvořte třídu SpriteBatch. Předejte GraphicsDevice jako argument.

Dále pomocí metody ContentManager.Load načtěte soubor písma sprite, který jste právě vytvořili. Určete třídu "SpriteFont" pro parametr type a název datového zdroje pro argument. Pokud jste nezměnili název datového zdroje písma sprajtů, zadejte odstraněnou příponu názvu souboru.

Podrobnosti o načítání obsahu naleznete v části "Načítání zdrojů (obsahu)".

SpriteBatch konstruktor

Vytvořte instanci třídy "SpriteBatch", která dávková vykreslování sprajtů.

grafické zařízení Grafické zařízení Určuje grafické zařízení, které se má použít pro kreslení.
// スプライトの描画準備
this.spriteBatch.Begin();

// テキストをスプライトとして描画する
this.spriteBatch.DrawString(this.font, "Draw Sprite in a screen.",
    Vector2.Zero, Color.White);

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

Nakreslete text v metodě Draw.

K vykreslení textu se používá metoda "SpriteBatch.DrawString", ale protože je text vykreslen jako sprite, jsou před a po vykreslení volány metody "SpriteBatch.Begin" a "SpriteBatch.End".

Prvním argumentem metody SpriteBatch.DrawString je třída "SpriteFont", kterou jste vytvořili. To vám umožní kreslit znaky ve stylu určeném v písmu sprajtů. Druhým argumentem je řetězec, který se má zobrazit.

SpriteBatch.Begin metoda

Zavolejte to před nakreslením sprajtu. Interně provádíme potřebná nastavení pro kreslení sprajtů.

SpriteBatch.DrawString metoda

Nakreslete provázek.

spriteFont SpriteFont Určuje písmo SpriteFont, které obsahuje obrázek řetězce.
Text řetězec Určuje text, který se má zobrazit.
postavení Vektor2 Pozice, ve které se má text zobrazit. Určete souřadnice obrazovky vzhledem k levému hornímu rohu obrazovky. Začátek textu bude v levém horním rohu prvního znaku.
barva Barva Barva textu

SpriteBatch.End metoda

Nakreslete všechny dávkové sprajty. Pořadí kreslení, stav kreslení atd. jsou určeny v metodě SpriteBatch.Begin. V případě potřeby se stav vykreslení vrátí do stavu, ve kterém byl před voláním metody SpriteBatch.Begin.

Není problém s displejem používaným na počítači apod., ale při výstupu z Xboxu 360 na analogovou televizi nemusí být vidět text zobrazený v levém horním rohu. V tomto případě musíte upravit polohu zobrazení znaků, což bude vysvětleno v části "Určete pozici pro vykreslení znaků".

Jedna věc, kterou je třeba poznamenat o této ukázce, je, že nemůže zobrazit japonské znaky. Pokud pro metodu SpriteBatch.DrawString určíte japonštinu, dojde k výjimce. Tentokrát lze zobrazit pouze alfanumerické znaky a symboly definované v 32~126 specifikované v Unicode. Jak zobrazit japonštinu bych vám rád představil v dalším tipu.

Tabulky Unicode (32~127)

(Kódem budou čísla v řádcích ×16 + čísla ve sloupcích).

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 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 j k l m n o
7 p q r s t u v w x y z { } ~ 

Všechny kódy

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 DrawAlphameric
{
    /// <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 font = 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.font = this.Content.Load<SpriteFont>("Font");
        }

        /// <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.font, "Draw Sprite in a screen.",
                Vector2.Zero, Color.White);

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

            // 登録された DrawableGameComponent を描画する
            base.Draw(gameTime);
        }
    }
}