영숫자 문자 표시

페이지 업데이트 :
페이지 생성 날짜 :

요약

임의의 문자열(영숫자)을 화면에 표시합니다.

英数字を表示させる

운영 환경

필수 구성 요소

지원되는 XNA 버전
  • 2.0
  • 3.0
  • 3.1
  • 4.0
지원되는 플랫폼
  • Windows(XP SP2 이상, Vista, 7)
  • 엑스박스 360
  • 윈도우 폰 7
Windows 필수 버텍스 셰이더 버전 2.0
Windows 필수 픽셀 셰이더 버전 2.0

운영 환경

플랫폼
  • 윈도우 7
  • 엑스박스 360
  • Windows Phone 7 에뮬레이터

물질

XNA에서 텍스트를 표시하려면 글꼴 정보를 설명하는 "스프라이트 글꼴"이라는 파일이 필요합니다. 확장자는 "입니다. sprite글꼴입니다. 스프라이트 글꼴 파일은 XML의 확장 형식으로 작성되므로 쉽게 다시 작성할 수 있습니다. 스프라이트 글꼴을 만들려면 다음을 수행합니다.

Content 프로젝트를 마우스 오른쪽 단추로 클릭하고 Add → New Item(새 항목 추가)을 클릭합니다.

새 항목 추가 대화 상자가 열립니다.

설치된 템플릿에는 "Sprite Font"라는 항목이 있으므로 선택하십시오.

파일 이름을 지정하되 여기서는 "Font.spritefont"라고 지정합니다. 기본적으로 원하는 이름을 설정할 수 있습니다.

입력 후 오른쪽 하단의 "추가" 버튼을 누릅니다.

파일을 만들면 스프라이트 글꼴 파일이 열립니다.

콘텐츠 프로젝트에도 추가되었습니다.

스프라이트 글꼴의 내용은 기본값으로 둘 수 있지만 이번에는 다음과 같이 다시 작성했습니다 (주석도 명확성을 위해 일본어로). 각 노드에 대한 설명은 주석을 참조하십시오.

또한 스프라이트 글꼴에 대한 자세한 설명은 "글꼴 스타일 세부 정보" 섹션에 설명되어 있습니다.

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

다음으로 텍스트를 그리는 프로그램에 대해 설명하겠습니다.

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

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

텍스트를 그리기 위해 "SpriteBatch"와 "SpriteFont"의 두 클래스를 사용합니다. 텍스트가 스프라이트로 그려집니다.

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

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

LoadGraphicsContent 메서드 내에서 먼저 SpriteBatch 클래스를 만듭니다. GraphicsDevice를 인수로 전달합니다.

그런 다음 ContentManager.Load 메서드를 사용하여 방금 만든 스프라이트 글꼴 파일을 로드합니다. type 매개 변수에 대해 "SpriteFont" 클래스를 지정하고 인수에 대한 자산 이름을 지정합니다. 스프라이트 글꼴의 자산 이름을 변경하지 않은 경우 파일 이름 확장자를 removed로 지정합니다.

콘텐츠 로드에 대한 자세한 내용은 "리소스(콘텐츠) 로드"를 참조하십시오.

SpriteBatch 생성자

스프라이트 그리기를 일괄 처리하는 "SpriteBatch" 클래스의 인스턴스를 만듭니다.

그래픽장치장치 그래픽 카드장치 그리기에 사용할 GraphicsDevice를 지정합니다.
// スプライトの描画準備
this.spriteBatch.Begin();

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

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

Draw 메서드에서 텍스트를 그립니다.

텍스트를 그리는 데 "SpriteBatch.DrawString" 메소드를 사용하지만, 텍스트는 스프라이트로 그려지기 때문에 그리기 전과 후에 각각 "SpriteBatch.Begin"과 "SpriteBatch.End" 메소드를 호출합니다.

SpriteBatch.DrawString 메소드의 첫 번째 인수는 사용자가 만든 "SpriteFont" 클래스입니다. 이렇게 하면 스프라이트 글꼴에 지정된 스타일로 문자를 그릴 수 있습니다. 두 번째 인수는 표시할 문자열입니다.

SpriteBatch.Begin 메서드

스프라이트를 그리기 전에 호출하십시오. 내부적으로는 스프라이트를 그리는 데 필요한 설정을 하고 있습니다.

SpriteBatch.DrawString 메서드

끈을 그립니다.

스프라이트 폰트 스프라이트 폰트 문자열 이미지를 포함하는 SpriteFont를 지정합니다.
문자 메시지 문자열 표시할 문자를 지정합니다.
위치 벡터2 텍스트를 표시할 위치입니다. 화면의 왼쪽 상단을 기준으로 화면 좌표를 지정합니다. 텍스트의 원점은 첫 번째 문자의 왼쪽 상단에 있습니다.
글자 색

SpriteBatch.End 메서드

배치된 모든 스프라이트를 그립니다. 그리기 순서, 그리기 상태 등은 SpriteBatch.Begin 메서드에서 지정합니다. 필요한 경우 렌더링 상태가 SpriteBatch.Begin 메서드가 호출되기 전의 상태로 돌아갑니다.

컴퓨터 등에서 사용하는 디스플레이에는 문제가 없지만, Xbox 360에서 아날로그 TV로 출력하는 경우 왼쪽 상단에 표시되는 텍스트가 보이지 않는 경우가 있습니다. 이 경우 문자의 표시 위치를 조정해야 하며, 이에 대해서는 "문자를 그릴 위치 지정"에서 설명합니다.

이 샘플에 대해 한 가지 주의해야 할 점은 일본어 문자를 표시할 수 없다는 것입니다. SpriteBatch.DrawString 메서드에 일본어를 지정하면 예외가 발생합니다. 이번에는 유니코드로 지정된 32~126으로 정의된 영숫자와 기호만 표시할 수 있습니다. 다른 팁에서 일본어를 표시하는 방법을 소개하고 싶습니다.

유니코드 테이블(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 나는 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 { } ~ 

모든 코드

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