Tutorial de XNA: Texto

Aunque a todos nos gustaría empezar a mover personajes como en un juego a-la-mario, hay algunos cuantos conceptos que necesitamos comprender ANTES de poder realizar nuestro primer “gran juego”.

Para este momento asumo que ya instalaron Visual Studio 2010 o Visual C# 2010 (cualquier versión funciona, hasta la express) y XNA Game Studio 4.0. Teniendo esto, abrimos nuestro VS2010 o VC#2010, y damos click en archivo->nuevo->proyecto, y en la lista que nos dan a elegir, seleccionamos XNA Game (4.0). En mi caso, le he llamado Tutorials a mi solución.

A la derecha veran nuestro explorador de la solución, aqui nosotros podemos ver de interes un par de cosas:

1. Para empezar, pueden ver que dice Solución ‘{nombredesolución}’ (2 proyectos). Esto quiere decir que, nuestro juego entero, consta de dos proyectos. Hay que entender que un juego no es un proyecto, en visual studio, el juego es una solución completa, que está compuesta por proyectos.

2. Más abajo veran dos proyectos, uno llamado Tutorials (¡es el nombre de su solución!) y TutorialsContent. Estos son los dos proyectos base con los que estarán trabajando para sus juegos. En TutorialsContent, como indica su nombre, se coloca todo el contenido multimedia (música, videos, imágenes…) y en Tutorials se ponen los archivos .cs con los que trabajaremos.

3. Dentro de Tutorials, ya tenemos un par de clases hechas. Game1.cs y Program.cs. Si abrimos el archivo program verán algo como:

static void Main(string[] args)
{
using (Game1 game = new Game1())
{
game.Run();
}
}

Esto sirve meramente como el punto de entrada de nuestro juego. Lo pueden cambiar a otro Game si ustedes desean, pero por ahora lo dejaremos así. En Game1.cs verán todos los métodos de los que hablamos en el tutorial pasado.

 

Ahora, hablemos un poco de Game1.cs. Algunos de ustedes notarán que, aparte de los métodos, también tenemos dos objetos:

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

Por el momento no nos meteremos muy a fondo en que es cada uno, o que hacen al 100%, pero si  mencionare que el objeto graphics está encargado de comunicarse con la tarjeta de video, y que spriteBatch es lo usado para dibujar en pantalla sprites. En un juego, sprite no es una bebida… sprite es como se le conoce a las imágenes en el juego.

Bien, comenzemos nuestro primer “juego”.

Lo que haremos ahora es escribir un texto en pantalla. Para comenzar, necesitamos un archivo extra, que es el encargado de decirle al juego que tipo de letra usaremos, es decir, que FONT es la que vamos a usar. Para ello, damos click derecho a nuestro TutorialsContent, luego click en agregar, y al final en Nuevo objeto… (nota: mi visual studio está en inglés, así que podria estar traduciendo algunas cosas más… pero es la primera opción despues de agregar, New Item).

En la nueva ventana saldrán 4 opciones, Bitmap file, XML file, Effect file y Sprite Font. Seleccionamos Sprite Font y le llamaremos miFont. Hecho esto, a la derecha verán un nuevo archivo, dentro del explorador de solución, llamado miFont.spritefont. Pueden darle doble click, y se abrirá un archivo muy al estilo de XML. Pueden cambiar detalles aqui y allá (como el tipo de letra, tamaño, estilo…) pero por ahora el default está bien.

Regresemos a nuestro archivo Game1.cs. Justo abajo de los objetos que teniamos definidos, agregaremos un objeto nuevo:

SpriteFont miFont;

Teniendo esto, falta declararlo. ¿Recuerdan dónde se declara todo lo que es multimedia (mencionado en el tutorial anterior)? Si has leido todo hasta ahora, sabes que es en el método LoadContent() y lo declararemos ahí… pero no de la manera tradicional (miFont = new SpriteFont();) si no que escribiremos miFont=Content.Load<SpriteFont>(“miFont”);

De tal manera que queda:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
miFont = Content.Load("miFont");
}

Una breve explicación de como funciona esta linea nueva: Content es la interfaz por la cual nos comunicamos al proyecto TutorialsContent. El método Load<>() puede que se vea raro para algunas personas, pero realmente no es dificil de comprender. Entre <> nosotros escribimos el tipo de dato u objeto que esperamos recibir, es decir, en este caso, queremos un SpriteFont… y entre los parentesis () escribimos un string, con el nombre del archivo que queremos leer, sin la extensión del archivo. 

Ahora creamos una variable string, no importa donde, para que se vea ordenado yo lo pondre hasta arriba, justo abajo de los objetos que hemos creado.

string textoFinal = “Default”;

Le puse el valor de “Default” solo para que el string no esté vacio. Ahora lo dibujaremos en pantalla. Si leyeron la introducción, saben que todo lo que se dibuja va en el método Draw().

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.DrawString(miFont, textoFinal, new Vector2(10, 10), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}

¡Whoa! Mucha información nueva ahí, pero es bastante simple. Recuerdan como mencione que todo lo que tenga que ver con imágenes bidimensionales, como personajes, se dibujaba en pantalla con spriteBatch. Pues el texto será manejado como una especie de imágen para poder dibujarla en la pantalla.

Para poder dibujar, primero ponemos spriteBatch.Begin(); y spriteBatch.End();. Estos dos métodos lo que hacen es indicar cuando empezar a dibujar y cuando terminar de dibujar. Por ahora puede parecer una tontería, pero en proyectos muy grandes se es necesario esta definición, ya que, si exploran un poco, el método de Begin() tiene varios overloads (es decir, se puede escribir de varias maneras, y con eso lograr diferentes efectos).

Ahora veamos spriteBatch.DrawString();. En este método, para funcionar, nos pide: un spritefont, un string, un vector2, y un color. El spritefont y el string es bastante obvio, ¿pero que hay del vector2 y del color? Tal y como sus nombres lo implican, Vector2 es un vector bidimensional (X,Y) que representa un espacio en la pantalla, donde (0,0) es la esquina de arriba a la izquierda de nuestra pantalla de juego (entonces al poner new Vector2(10,10), estoy colocando el texto justo un poco abajo a la derecha, de la esquina de arriba a la izquierda), y Color simplemente se refiere al color de nuestro texto. Color tiene otros usos, sobre todo a la hora de dibujar imágenes en pantalla, pero ya veremos eso depués.

Si presionamos F5 en este momento, veremos que aparece un texto en nuestra pantalla, en lineas blancas, que dice “Default”. Felicidades! Es tu primer “juego” funcional (hey, al menos puedes ver más o menos de aquí como se crean los HUDs en los juegos)!

 

En nuestro próximo tutorial veremos como interactuar con el texto, mediante el teclado, para que se den una idea base de como se puede mover un personaje en pantalla (aunque en nuestro caso moveremos texto).

 

Saludos!

/daniel

P.S. Estare escribiendo apartir de la próxima semana un poco más seguido, actualmente me veo muy ocupado con unos trabajos. También puedo escribir tutoriales en UDK, o incluso hacer video tutoriales agregados a esto si les parece. Dejen un comentario al respecto!


Leave a Reply