Mostrando entradas con la etiqueta spritebatch. Mostrar todas las entradas
Mostrando entradas con la etiqueta spritebatch. Mostrar todas las entradas
miércoles, 2 de junio de 2010

Creando nuestra primera clase en Xna

2 comentarios
 
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
miércoles, 12 de mayo de 2010

Escribiendo código en Xna

0 comentarios
 
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
jueves, 6 de mayo de 2010

Como se conforma un programa en Xna (Capítulo 1)

3 comentarios
 
En este capítulo vamos a ver como se conforma un programa en Xna osea como es el ciclo de vida del mismo. Ya vimos que es Xna y como funciona, también vimos como instalarlo. Ahora que ya lo tenemos instalado vamos a poner manos a la obra.



La imágen no se ve muy bien pero hagan click en ella asi se amplia.
Ahora vamos a elegir Windows Game (3.0), le ponemos un nombre a nuestro proyecto y hacemos clic en aceptar.
Al aceptar vamos a ver que se nos abre el proyecto ya con un código, vamos a explicar el ciclo de vida de un programa en Xna basandonos en el código que obtenemos al iniciar un nuevo proyecto.
Vamos a ver el código que se encunetra en la clase Game1 que es el que nos va a servir por ahora.
El código que nos aparece es similar a este.

//Sección: Includes
//Aca se incluyen todas las bibliotecas que vamos a usar como sonido, graficos, red, e.t.c.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

//En NameSpace se encuentra el nombre que le vamos a poner a la clase, para llamarla desde otro lugar.

namespace MiPrimerJuego
{


    public class Game1 : Microsoft.Xna.Framework.Game
    {

//Sección: Declaración de variables
//Acá es en donde vamos a definir nuestras variables, en este caso se definieron dos variables una para el GraphicsDeviceManager, que nos va a servir para manejar diferentes aspectos sobre la pantalla y los gráficos los cuales vamos a ver más adelante, y SpriteBach el cual nos va a servir para dibujar "Sprites" o "Imágenes".

        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;



//Sección: Constructor
        public Game1()
        {

//Acá se crea contenido para las variables que ya vienen definidas por XML, osea cuando hablamos de objetos si la variable existe pero no se hace un new del objeto el objeto no se crea.  Es como cocinar, nosotros queremos comer "Comida", ya tenemos definido lo que queremos comer "Comida" (Nuestro objeto), pero para comer la "Comida" hay que hacer la comida (new Comida(Fideos) ) y una vez hecha podemos usar el objeto "Comida" (Comida.Comer) . También se define la ruta de donde va a estar archivado el contenido ("Imágenes, Música, Sonidos, e.t.c."). Generalmente esto quedará así y no se toca más.
 
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }


//Sección: Metodo Initialize

        protected override void Initialize()

        {
 

 //Acá vamos a inicializar todas las variables o las constantes del juego, según la lógica del XNA inicializar las constantes como es el ejemplo de la ruta de nuestro contenido se hace en Public Game1() pero lo más correcto seria es hacerlo en el Initialize, eso queda a criterio de cada uno. Lo que si les podría decir es que las variables hay que definirlas acá si o si, no nos conviene inicializarlas en Public Game1() porque seguramente vamos a hacer lío.

            spriteBatch = new SpriteBatch(GraphicsDevice);

            base.Initialize();
        }

//Sección: Metodo Load Content
        protected override void LoadContent()
        {

 //Acá es donde cargamos todos los elementos del programa, la música, los sonidos, todo tipo de gráficos,e.t.c.

        }

//Sección: Metodo Unload Content
        protected override void UnloadContent()
        {

 //Acá vamos a descargar de memoria los elementos que ya no usemos más. Nos va a servir para optimizar nuestro juego y no se vuelva super lento.

        }

//Sección: Metodo Update
        protected override void Update(GameTime gameTime)
        {


 //Acá en el update tenemos lo que se va a ejecutar mientras el juego esta corriendo. En este caso verifica en todo momento que no se aprete el botón para salir de la aplicación.
         
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

    
           base.Update(gameTime);
        }

//Sección: Metodo Draw

        protected override void Draw(GameTime gameTime)
        {

 //Acá vamos a poner todo lo que queramos dibujar. En este caso me esta pintando toda la pantalla de un color azul claro.

           GraphicsDevice.Clear(Color.CornflowerBlue);

            base.Draw(gameTime);
        }
    }
}

Gráficamente sería algo así:



Voy a dejar el código de fuente con todo esto explicado y organizado ya que a mucha gente le resulta más fácil verlo en el ejemplo práctico.

Código de fuente de MiPrimerJuego: Descargalo acá

Bueno en la próxima entrega ya vamos a comenzar a escribir un poco de código asi ponemos toda ésta teoría en práctica.

Leer entrada