Hiển thị các ký tự chữ và số

tóm tắt

Hiển thị một chuỗi ký tự tùy ý (chữ và số) trên màn hình.

Môi trường hoạt động

Điều kiện tiên quyết

Môi trường hoạt động

chất

Để hiển thị văn bản trong XNA, bạn cần một tệp được gọi là "font sprite" mô tả thông tin phông chữ. Phần mở rộng là ". spritefont. Các tệp phông chữ Sprite được viết ở định dạng mở rộng của XML, vì vậy chúng có thể dễ dàng được viết lại. Để tạo phông chữ sprite, hãy làm như sau:

Nhấp chuột phải vào dự án Nội dung và nhấp vào Thêm → Mục mới.

Hộp thoại Thêm mục mới sẽ mở ra.

Trong mẫu đã cài đặt, có một mục gọi là "Sprite Font", vì vậy hãy chọn nó.

Chỉ định một tên tệp, nhưng ở đây nó được đặt tên là "Font.spritefont". Về cơ bản, bạn có thể đặt bất kỳ tên nào bạn muốn.

Sau khi nhập, nhấn nút "Thêm" ở dưới cùng bên phải.

Khi bạn tạo một tệp, tệp phông chữ sprite sẽ được mở.

Nó cũng đã được thêm vào dự án nội dung.

Nội dung của phông chữ sprite có thể được giữ nguyên mặc định, nhưng lần này nó đã được viết lại như sau (nhận xét cũng là tiếng Nhật để rõ ràng). Vui lòng tham khảo các bình luận để được giải thích về từng nút.

Ngoài ra, giải thích chi tiết về phông chữ sprite được giải thích trong phần "Chi tiết kiểu phông chữ".

<?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>

Tiếp theo, tôi sẽ mô tả chương trình vẽ văn bản.

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

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

Để vẽ văn bản, chúng ta sử dụng hai lớp: "SpriteBatch" và "SpriteFont". Văn bản sẽ được vẽ dưới dạng sprite.

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

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

Trong phương thức LoadGraphicsContent, trước tiên hãy tạo một lớp SpriteBatch. Truyền một GraphicsDevice làm đối số.

Tiếp theo, sử dụng phương thức ContentManager.Load để tải tệp phông chữ sprite mà bạn vừa tạo. Chỉ định lớp "SpriteFont" cho tham số type và tên nội dung cho đối số. Nếu bạn chưa thay đổi tên nội dung của phông chữ sprite, hãy chỉ định phần mở rộng tên tệp đã bị xóa.

Để biết chi tiết về cách tải nội dung, hãy xem "Tải tài nguyên (Nội dung)".

SpriteBatch Constructor

Tạo một thực thể của lớp "SpriteBatch" để tạo ra các bản vẽ của các sprite.

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

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

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

Vẽ văn bản trong phương thức Vẽ.

Phương thức "SpriteBatch.DrawString" được sử dụng để vẽ văn bản, nhưng vì văn bản được vẽ dưới dạng sprite, các phương thức "SpriteBatch.Begin" và "SpriteBatch.End" được gọi trước và sau khi vẽ, tương ứng.

Đối số đầu tiên của phương thức SpriteBatch.DrawString là lớp "SpriteFont" mà bạn đã tạo. Điều này cho phép bạn vẽ các ký tự theo kiểu được chỉ định trong phông chữ sprite. Đối số thứ hai là chuỗi sẽ được hiển thị.

SpriteBatch.Begin phương pháp

Gọi nó trước khi vẽ sprite. Bên trong, chúng tôi đang thực hiện các thiết lập cần thiết để vẽ sprite.

SpriteBatch.DrawString phương pháp

Vẽ một sợi dây.

SpriteBatch.End phương pháp

Vẽ tất cả các sprite theo lô. Thứ tự vẽ, trạng thái vẽ, v.v. được chỉ định trong phương thức SpriteBatch.Begin. Nếu cần, trạng thái kết xuất được trả về trạng thái trước khi phương thức SpriteBatch.Begin được gọi.

Không có vấn đề gì với màn hình được sử dụng trên máy tính, v.v., nhưng khi xuất từ Xbox 360 sang TV analog, bạn có thể không thấy văn bản hiển thị ở góc trên bên trái. Trong trường hợp này, bạn phải điều chỉnh vị trí hiển thị của các ký tự, điều này sẽ được giải thích trong "Chỉ định vị trí để vẽ các ký tự".

Một điều cần lưu ý về mẫu này là nó không thể hiển thị các ký tự tiếng Nhật. Nếu bạn chỉ định tiếng Nhật cho phương thức SpriteBatch.DrawString, một ngoại lệ sẽ xảy ra. Lần này, chỉ có thể hiển thị các ký tự và ký hiệu chữ và số được xác định trong 32 ~ 126 được chỉ định trong Unicode. Tôi muốn giới thiệu cách hiển thị tiếng Nhật trong một mẹo khác.

Bảng Unicode (32~127)

(Số trong hàng ×16 + số trong cột) sẽ là mã.

Tất cả mã

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);
        }
    }
}