Dibujando texto en la pantalla

Carrera de XNA – Capítulo 2 - Artículo 4

 

Introducción

En este artículo veremos un punto clave para la creación de cualquier juego: Dibujar texto (cadenas de caracteres) en la pantalla, utilizando las fuentes disponibles. Veremos la clase principal involucrada en la creación de textos, así como la forma de configurarla mediante un archivo de contenido.

 

SpriteFont

Esta clase representa una Fuente o Tipografía a nivel de código. Será necesario crear una instancia de la misma a través de un archivo de tipo XML con la configuración del tipo de letra, tamaño y características (negrita, cursiva, etc.).

 

Creando un SpriteFont

 

El Archivo SpriteFont

La estructura del archivo es bastante sencilla, como podremos ver a continuación tiene campos que son clave para la definición de la fuente:

• Size: Tamaño de la fuente en puntos
• Font Name: Nombre de la fuente (ver Fuentes Disponibles)
• Spacing: Espaciado entre caracteres
• Style: Bold (Negrita), Regular (Común) e Italic (cursiva)

Los campos restantes del archivo serán vistos en profundidad en el nivel Intermedio de la carrera.

 

Creando un archivo SpriteFont

Para añadir un archivo de tipo SpriteFont, debemos ir a nuestro Proyecto de contenido hacer click derecho en el mismo, para luego seleccionar la opción Agregar, Nuevo Elemento.

Luego debemos elegir de la lista de elementos disponibles el tipo Sprite Font y configurar un nombre para el mismo.

Se creará el archivo dentro del proyecto de contenido. Para finalizar podemos cambiar algunas propiedades como el Size y Style, a modo de ejemplo:

 

Fuentes Disponibles

Es importante contar con fuentes licenciadas o bien gratuitas. XNA Game Studio nos provee un pack de 15 fuentes para descarga inmediata (http://create.msdn.com/en-US/education/catalog/utility/font_pack). XNA se encarga de empaquetar la representación de cada carácter en un archivo de tipo XNB al momento de compilar, por lo cual no es necesario que la persona que instale nuestro juego tenga la fuente instalada en su sistema.

También podemos encontrar mas fuentes de Microsoft licenciadas de manera gratuita en: http://msdn.microsoft.com/en-us/library/ms746705.aspx.

Dibujando con el SpriteFont

Una vez definida nuestra fuente a través del archivo SpriteFont e inicializada en nuestro método LoadContent podemos hacer uso de la misma en el método Draw de la siguiente manera:

Analizando los parámetros del método DrawString podemos ver:

• textoFont: Es nuestra instancia de SpriteFont, define la tipografía a utilizar como vimos previamente.
  
• “Prueba”: Es el texto a dibujar en pantalla, en este caso es fijo pero puede ser una variable (como el puntaje).
  
•  new Vector2(0,0) : Estamos indicando la posición en X,Y para colocar el inicio de nuestro texto.
  
• Color.Orange: Color para dibujar el texto en pantalla. En este caso, naranja.