XNA: Dibujar texto

diciembre 3, 2008


Si lo que deseamos es dibujar un texto por la pantalla debemos pasar al siguiente tutorial de programación básica del F1 de Visual Studio C# 2008 express o MSDN.

Lo primero es añadir los contenidos necesarios para poder dibujar una string por el dispositivo (pantalla) que no es más que la fuente (font) que deseamos utilizar. En nuestro caso y como es de una licencia abierta utilizaremos las que vienen en ejemplo de F1, concretamente Courier New. Para ello me remito a la entrada de dibujar sprites donde se explica como añadir contenidos al proyecto.

Una vez añadidos empezamos creando los atributos para dibujar el string que son una capa para la string y un atributo que soporte la fuente (font) de la string.

SpriteBatch spriteBatch;
SpriteFont spriteFont;

Cuando ya tenemos los atributos necesarios vamos al método LoadContent auto-generado para cargar el contenido (el font).

spriteBatch = new SpriteBatch(GraphicsDevice);
spriteFont = Content.Load("Courier New");

Como se puede observar es exactamente que cargar una imagen .jpeg pero indicándole que el modelo se trata de una fuente (font) SpriteFont.

Como ya hicimos en dibujar sprites vamos a método Draw que es auto-generado para dibujar el texto y creamos un vector donde guardaremos la posición en la que se dibujará el string que deseemos en el dispositivo y ya pasamos al dibujado.

Vector2 posFont = new Vector2(graphics.GraphicsDevice.Viewport.Width / 2,
graphics.GraphicsDevice.Viewport.Height / 2);
string output = "BARRILETE COSMICO";
Vector2 fontOrigin = spriteFont.MeasureString(output) / 2;
spriteBatch.Begin();
spriteBatch.DrawString(spriteFont, output, posFont, Color.LightGreen,
0, FontOrigin, 1.0f, SpriteEffects.None, 0.5f);
spriteBatch.End();

posFont del tipo Vector dos es donde guardamos la posición en que deseamos que se dibuje el string, output es la string que deseamos sea dibujada y fontOrigin es utilizada para decirle al método dibujador DrawString que deseamos que dibuje centrado en ese punto de la string. Al estar este en el centro de la string dibujaremos la string centrada en su centro.

Iniciamos la capa con Begin y pasamos al método fuente. Este metodo dispone de 6 llamadas para dibujar strings por pantalla:

1: void SpriteBatch.DrawString(SpriteFont spriteFont, string text, Vector2 postion, Color color);

2: void SpriteBatch.DrawString(SpriteFont spriteFont, System.Text.StringBuilder text, Vector2 postion, Color color);

3: void SpriteBatch.DrawString(SpriteFont spriteFont, string text, Vector2 postion, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth);

4: void SpriteBatch.DrawString(SpriteFont spriteFont, string text, Vector2 postion, Color color, float rotation, Vector2 origin, Vector2 scale, SpriteEffects effects, float layerDepth);

5: void SpriteBatch.DrawString(SpriteFont spriteFont, System.Text.StringBuilder text, Vector2 postion, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth);

6: void SpriteBatch.DrawString(SpriteFont spriteFont, System.Text.StringBuilder text, Vector2 postion, Color color, float rotation, Vector2 origin, Vector2 scale, SpriteEffects effects, float layerDepth);

El más sencillo sin duda el primero pues ni se hacen escalados ni rotaciones ni se centra ni nada, dibujamos el string con el color deseado en la posición indicada y listo. Para esta entrada se ha seguido el ejemplo de F1 que paso a comentar dejando por el momento los otros desatendidos (aunque son tan parecidos que casi no hace falta comentarlos).

Con la tercera llamada posible al método DrawString podemos elegir posición, color, rotar (radianes), indicar punto del texto donde dibujar texto, escalar text, añadir efectos y profundidad de la capa (rango [0.0,1.0]). Muy completo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: