Creando nuestra primera clase en Xna

Bueno en la última entrega vimos como cargar una imágen en Xna, en éste caso vamos a crear una clase para cargar una imágen en Xna. ¿Para que nos sirve esto? para que cada vez que querramos cargar una imágen no tengamos que escribir todo el código de nuevo, y simplemente llamemos al código que se encuentra en la clase.

Empecemos: Sobre el nombre de nuestro proyecto, en el explorador de soluciones, botón derecho del mouse, Agregar nuevo elemento. Una vez en la ventana que nos aparece, seleccionamos clase y le ponemos un nombre, en mi caso le puse imagen, ya que ésta clase la vamos a usar para cargar imágenes.

En la región includes vamos a añadir lo siguiente.

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;

Esto es necesario ya que lo necesitamos para trabajar con las imágenes.

Luego, abajo de     class imagen  {

Vamos a crear un vector que nos va a servir para definir la posición de la imágen, y vamos a crear una variable del tipo Texture2D para poder cargar la imágen que deseemos.

public Vector2 Position = new Vector2(0, 0);
private Texture2D mSpriteTexture;

El vector llamado Position lo definimos como público ya que necesitamos usarlo desde nuestro main (Game1.cs)  y la textura como privada. Para los que no entiendan bien estos términos recomendamos hacer algun tutorial de C# o de C++ ya que son cosas específicas del lenguaje.

Al igual que hicimos en nuestro main, vamos a tener que hacer un método para cargar nuestro contenido, quedandonos algo asi:

  public void LoadContent(ContentManager theContentManager, string theAssetName)
        {

            mSpriteTexture = theContentManager.Load(theAssetName);

        }

Acá le tenemos que pasar el contentmanager  ya que de otra forma no lo podríamos obtener y el nombre de la imágen. Dentro de la función le asignamos a la textura la imágen.

Ya tenemos cargada la imágen ahora nos queda dibujarla, bueno al igual que en nuestro main, vamos a hacer un método Draw.

       public void Draw(SpriteBatch theSpriteBatch)

        {

            theSpriteBatch.Draw(mSpriteTexture, Position, Color.White);

        }

Acá le pasamos el sprite, textura, dibujo o como más les guste llamarle, y lo dibujamos en la posición "Position" y con el color de la imágen sin alterarla.

Bien ya tenemos nuestra clase para cargar imágenes, ahora lo que tenemos que hacer es borrar el código anterior en nuestro main y añadir algunas modificaciones.

Primero tenemos que borrar lo que declaramos

        //Declaramos Fondo como una variable de tipo Texture2D
        Texture2D Fondo;
        //Declaramos Rectangulo como una variable de tipo Rectangle
        Rectangle Rectangulo;

ya que esto lo estamos haciendo en nuestra clase, y vamos a declarar una variable del tipo de nuestra clase.

imagen cubito;

ahí declaramos a cubito del tipo de nuestra clase imagen. Luego de declararla tenemos que inicializarla, bueno vamos al initialize y ponemos algo así:

cubito = new imagen();

Vamos a borrar lo que habíamos hecho anteriormente en el Load y vamos a cargar nuestra imágen.

 cubito.LoadContent(this.Content, "cubito");

Acá llamamos al loadcontent de la clase y cargamos a cubito

 cubito.Position = new Vector2(125,200);

Le definimos la posición a cubito llamando a position de nuestra clase y definiendo el vector.

Ya casi terminamos ahora lo único que nos falta es dibujar a cubito, bueno para eso vamos a reemplazar lo que habíamos hecho en la entrega anterior en el metodo Draw por lo siguiente:

Remplazamos spriteBatch.Draw(Fondo, Rectangulo, Color.White);

Por cubito.Draw(this.spriteBatch);

Ahora le podemos dar play y ver los resultados.

En la próxima entrega vamos a ver como cargar múltiples imágenes.

Próximamente dejo el link con los fuentes con el código bastante comentado, igual cabe aclarar que cada vez se irá comentando menos el códgo ya que vamos a ir saliendo de lo básico y ya vamos a tener idea de como funcionan las cosas.

Leer entrada

Escribiendo código en Xna

Bueno ya sabemos lo que es Xna como funciona, y sabemos como se conforma el programa en Xna, bien ahora vamos a pasar a la parte práctica y vamos a escribir nuestro primer código.
En esta entrega veremos como dibujar una imágen. El código vamos a escribirlo en nuestra clase principal.
En donde definimos las variables vamos a crear las siguientes variables:

Texture2D Fondo;

Rectangle Rectangulo;

Acá creamos la variable Fondo que va a ser nuestra imágen de fondo, como un tipo Texture2D, y vamos a definir la variable Rectangulo como un tipo Rectangle. 

En el constructor de la clase principal (para el que no sepa lo que es el constructor recomiendo leer el artículo como se conforma un programa en Xna y bajarse el ejemplo) vamos a escribir lo siguiente:

graphics.IsFullScreen = false;

graphics.PreferredBackBufferWidth = 800;

graphics.PreferredBackBufferHeight = 600;

Acá estamos seteando la variable graphics.IsFullScreen en false, ésta variable nos sirve para que la aplicación sea full screen o no, despues le seteamos el ancho y el alto de la aplicación, en nuestro caso 800 x 600, pueden hacer pruebas cambiando estos valores y van a ver como cambia la aplicación.

Luego de hacer esto y crear nuestras variables vamos a inicializarlas como se explicó anteriormente. Ésto lo hacemos en el método Initialize.

Fondo = Content.Load("NombredelaImagen");
Rectangulo = new Rectangle(0,0,graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height );
 

Lo que hacemos es inicializar la variable fondo cargandole una textura 2d con el nombre de nuestra imágen entre comillas dobles, luego inicializamos nuestro rectangulo con una posición x 0, posición y 0, un ancho igual al ancho de nuestra ventana, y un alto igual al alto de nuestra ventana.

Aclaración: Las imágenes, sonidos o todo el contenido externo que tengamos que cargar en el juego, lo tenemos que cargar en "Content" en el explorador de proyectos. Hacemos click derecho sobre content le ponemos agregar elemento existente, buscamos la imágen o el contenido que queramos y quedaran ahí.

Por último en el método Draw vamos a poner lo siguiente:

spriteBatch.Begin();

spriteBatch.Draw(Fondo, Rectangulo, Color.White);

spriteBatch.End();

Lo que hacemos aca es poner spriteBach.Begin(); para poder comenzar a dibujar, y luego dibujamos nuestro fondo con spriteBatch.Draw(Fondo,Rectangulo, Color.White); . Acá lo que hacemos es dibujar nuestra imágen que la definimos como "Fondo" al principio del programa y que luego le cargamos la imágen que queríamos que se muestre, le pasamos el parametro Rectangulo para indicarle las dimensiones de la imágen, y el color que le pusimos White para que quede tal cual está. Recomiendo jugar con estos valores, se puede cargar otra imágen, cambiarle la dimension a la misma, y el color.
Por último damos por finalizado el proceso de dibujado con spriteBatch.End(); y podemos dar ejecutar tranquilamente para ver nuestro resultado.

 Les dejo un código sobre este artículo muy comentado para que no puedan no entenderlo.

Código de fuente: Descargalo acá

Leer entrada