Despliegues de Sprites en 2D
Bien, ya visto en articulos anteriores todo el basamento teórico de como funciona el Framework XNA, las versiones que han salido desde su lanzamiento en el 2007, el soporte para las diversas plataformas de Microsoft (Windows PC, Xbox 360 y Windows Phone), el funcionamiento de XNA y por último, la estructura de un proyecto de un Windows Game XNA en Visual Studio, es hora que empecemos a codificar y dibujar elementos.
Paso 1. Crear el proyecto
Debes abrir Visual Studio 2010 con XNA Game Studio 4 previamente instalado, y crear un proyecto Windows Game (4) como se mostró en el artículo anterior.
Paso 2. Agregar una imagen a nuestro Content
Ahora debemos agregar una carpeta en el Content donde colocaremos nuestras imágenes. No es requerido crear un directorio, pero lo recomiendo para mantener nuestro contenido gráfico organizado. Simplemente da un clic-derecho en tu proyecto Content, le das clic a agregar->nueva carpeta, y lo nombraremos “Imagenes”.
Para agregar una imagen (que la pueden encontrar aqui para descargar), dale clic-derecho a la carpeta “Imagenes” ya creada, luego clic en agregar->item existente. Te saldrá un explorador de archivos, para que busques el archivo de imagen que deseas agregar a tu proyecto. Selecciona la imagen que descargaste previamente (smiley.png), y le das clic a “Agregar”).
Paso 3. Dibujar el sprite en la Escena
Ya que tenemos nuestra imagen en el Content de nuestro proyecto, debemos cargarla y desplegarla escribiendo código. Lógicamente para desplegar esta imagen, dependemos lógicamente de dos cosas: Posición y Textura. Para eso, agrega las siguientes dos variables dentro de tu clase principal (Game1), debajo de spriteBatch. El código se vería de la siguiente manera:
Vector2 es un tipo de datos que posee dos campos float x,y; a modo de trabajar con coordenadas de dos dimensiones. Ininializa posicion en el método Initialize:
Ahora procedemos a cargar la imagen a nuestro juego. Esto se hace en el método LoadContent. El código quedaría así:
Puedes observar que se instancia la variable spriteBatch (el cual puedes verlo por los momentos como el pincel encargado de pintar todos los elementos en la escena de nuestro juego). También observa como se carga una textura2D con el método Load. Toma en cuenta el string que pasamos como parámetro; es la ruta del elemento que queremos cargar. Por esto, es importante colocar en qué directorio se encuentra si esta organizado de esta manera.
Paso 4. Desplegar nuestro sprite en la escena
Recapitulando, hemos agregado nuestra imagen archivo al contenido de nuestro proyecto; hemos agregado una variable para la posición donde desplegaremos nuestro sprite, y declaramos una variable Texture2D, donde realizamos la carga de nuestra imagen del contenido a la aplicación. Ahora, sin más preámbulos, dibujemos nuestro sprite. Esto se implementa en el método Draw.
Para pintar nuestro sprite, debemos utilizar nuestra variables spriteBatch, ya que este es el encargado de dibujar los elementos en la escena como ya mencione a priori. Todos los elementos que vayamos a dibujar se hacen mediante su método Draw(), y estos deben estar encerrados dentro de los métodos spriteBatch.Begin() y spriteBatch.End(). Muy importante estos dos métodos, porque estamos avisando a nuestra aplicación que vamos a pintar elementos, y cuando terminemos, invocamos el método End(). En nuestro caso, nuestro código se vera así:
Fíjate el método spriteBatch.Draw(). Solo estamos pasando la textura que deseamos desplegar, la posición, y el color que queremos que sea desplegado. Si colocamos Blanco, se mostraran los colores originales de la imagen. Cualquier otro color modificara los colores de nuestro sprite.
Finalmente, al ejecutar nuestra aplicación, tendrás un resultado como este:
Sencillo, no crees? Esta es la manera mas elemental para desplegar un sprite en nuestro juego. El método Draw que utilizamos es el mas básico disponible, ya que este método cuenta con 7 formas distintas de invocar con diversos parámetros, incluyendo efectos, manejo de rectángulos para dibujar ciertas áreas, etc. Para proyectos más complejos, se trabajan con clases donde encapsulan estas propiedades (textura, posición), y se le agregan mas propiedades para ser mas flexibles ante transformaciones y efectos.
