XNA Mexico Desarrollo de Videojuegos con XNA

Tutorial: Dibujando texto en 2D

En este tutorial, vamos a ver los conceptos básicos para dibujar texto en un juego hecho con XNA.
El dibujar texto en 2D en una aplicación con XNA es muy sencillo. Puede ser que los resultados de dibujar simple texto no sean tan asombrosos como sería hacerlos con imágenes, de cualquier forma, el mostrar texto en pantalla puede ser de gran utilidad para otras cosas además de mostrar elementos del juego como Scores o el número de vidas restantes.

Primero creamos un nuevo proyecto en XNA, si no recuerdas como, dale click aquí.
Una vez que tengamos nuestro proyecto nuevo, vamos al Solution Explorer y en el nodo de Content, damos click derecho > Add > New Item.
En las opciones que nos aparecen, seleccionamos Sprite Font y le ponemos un nombre, en mi caso le puse MiFont.spritefont. Damos Add.

Lo que nos generó Visual Studio es un nuevo archivo XML, el cual tiene la función de definir cómo se debe de ver nuestro texto al momento de dibujarlo. Si quieres saber más sobre XML, visita la entrada en Wikipedia
Entre las etiquetas que encontramos ahí, hay dos que son muy fáciles de entender: y . La primera regula el tamaño de la fuente y la segunda el estilo de la misma (Bold, Italic, etc.). Vamos a dejar estos valores aunque si quieres modificarlos eres libre de hacerlo, sólo recuerda cerrar siempre las etiquetas.
Ahora vamos a nuestro archivo Game1.cs y justo después de la declaración del SpriteBatch y agregamos :

     SpriteFont spriteFont;

En este objeto vamos a cargar nuestra fuente y también vamos a poder dibujar el texto.
Ahora vamos a nuesto método LoadContent y escribimos:
spriteFont = Content.Load("MiFont");
Ahora nuestra variable SpriteFont ya está cargada con la descripción de la fuente que creamos. El “MiFont” que le mandamos al método Load() es el nombre sin extensión de la fuente que creamos.

	spriteBatch.Begin();
        spriteBatch.DrawString(spriteFont, "Hola XNA Mexico!!!!",
                new Vector2(400, 300), Color.Red);
     	spriteBatch.End();

Como recordamos en de tutoriales pasados, siempre que dibujemos con SpriteBatch, debemos hacer la llamada Begin() antes de usarlo y End() una vez que terminamos de dibujar, para dibujar texto esto no es excepción, lo que cambia aquí es que ahora usamos un método llamado DrawString() que recibe como parámetros un SpriteFont (el que creamos) un String, un Vector2D para la posición y un Color.
Damos F5 para compilar y ejecutar nuestro proyecto y listo!!! Tenemos texto dibujado en pantalla.

Listo, en unos pocos momentos ya tenemos texto en pantalla, ahora puedes ir de nuevo al archivo MiFont.spritefont y jugar con los valores de las etiquetas y ver qué pasa si los modificas.

Espero que te haya servido este artículo, si tienes dudas, comentarios o sugerencias, con gusto las atenderemos.