XNA Mexico Desarrollo de Videojuegos con XNA

     SpriteFont spriteFont;

	spriteBatch.Begin();
        spriteBatch.DrawString(spriteFont, "Hola XNA Mexico!!!!",
                new Vector2(400, 300), Color.Red);
     	spriteBatch.End();

using Microsoft.Xna.Framework.Input;

float velocidad = 0.5f;

GamePadState control = GamePad.GetState(PlayerIndex.One);
if (control.ThumbSticks.Left.X < 0) 

      posicion.X -= velocidad * gameTime.ElapsedGameTime.Milliseconds; 

else if (control.ThumbSticks.Left.X > 0)
     posicion.X += velocidad * gameTime.ElapsedGameTime.Milliseconds;

posicion.X -= velocidad * gameTime.ElapsedGameTime.Milliseconds;

posicion.X += velocidad * gameTime.ElapsedGameTime.Milliseconds;

Tutorial 1: Animando un Sprite

Una parte muy importante en un videojuego son las animaciones, ya sea un menú, un personaje, un modelo en 3D. Hay muchas técnicas para “dar vida” por medio de animación, pero en este tutorial nos enfocaremos a una técnica que utiliza hojas de sprites (sprite sheets).

Primero, descarga esta imagen a tu computadora. Puedes guardarla en cualquier directorio e incluso cambiarle el nombre si quieres. La imagen es editada y pertenece originalmente a George Clingerman de http://xnadevelopment.com.
Pues comencemos:
En la barra de herramientas selecciona View > Solution Explorer. Esta nueva ventana es la que se encarga de mostrarnos los documentos y referencias de nuestro proyecto, ahí hay un nodo llamado content, ahí van todas nuestras imágenes sonidos, modelos, etc. Da click derecho a Content > Add > Existing Item. Se abrirá una nueva ventana, busca la imagen que descargaste anteriormente y dale Add.

Saquen sus cuadernos que viene un poco de teoría.
Como pueden ver en la hoja de sprites, el personaje se “repite” cinco veces. ¿Encuentras las diferencias? Claro, los pies son los que cambian, pero ¿cómo paso de eso a un personaje animado? Imagina que sólo puedes dibujar en pantalla una parte de la imagen original, en nuestro caso, esa pequeña parte es precisamente la quinta parte de la imagen, por lo que sólo puedes dibujar algo como esto:

Ahora simplemente tendríamos que cambiar de cuadro cada cierto tiempo, esto es lo que le daría el efecto de que se está animando nuestro personaje.
Perfecto, ahora pasemos a codificar nuestra animación, como queremos ser un poco ordenados y aprovechar el paradigma orientado a objetos de C#, vamos a crear una nueva clase para nuestro personaje. En el Solution Explorer, damos click derecho en el nombre de nuestro proyecto, Add > Class y le ponemos de nombre Sprite.
Nuestra nueva clase es genérica así que tenemos que agregar los namespaces necesarios para convertirla a una clase de XNA. En la parte de arriba agrega las siguientes líneas:

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

Ahora proseguiremos a definir cuáles son los atributos de nuestro sprite, necesitamos que quede así:

class Sprite
{
    Texture2D hojaSprites; //La imagen con los sprites
    Vector2 posicion; //La posicion en pantalla donde queremos dibujar
    int cuadrosAnimacion;//Cuantos cuadros tiene la animacion
    int milisegundosPorCuadro; //Cuando debe durar cada cuadro
    int tiempoDesdeUltimoCuadro = 0; //Tiempo desde la ultima   actualizacion
    int indiceAnimacion = 0; //En que cuadro de la animacion vamos
}

Debajo de int indiceAnimacion = 0; vamos a escribir nuestro constructor, el cual nos servirá para crear nuevos sprites:

public Sprite(Texture2D hojaSprites, Vector2 posicion, int cuadrosAnimacion, int milisegundosPorCuadro,
            Point tamanoCuadro)
        {
            this.hojaSprites = hojaSprites;
            this.posicion = posicion;
            this.cuadrosAnimacion = cuadrosAnimacion;
            this.milisegundosPorCuadro = milisegundosPorCuadro;
            this.tamanoCuadro = tamanoCuadro;
        }

Lo que hace el constructor, es el de asignar los valores que se le mandan como parámetros y de esta forma inicializar los atributos de nuestro objeto sprite.
Debajo de nuestro constructor vamos a escribir nuestro método Update(), este método será en encargado de actualizar el índice del cuadro que vamos a dibujar, el código queda así:

public void Update(GameTime gameTime)
{
            tiempoDesdeUltimoCuadro += gameTime.ElapsedGameTime.Milliseconds;
            if (tiempoDesdeUltimoCuadro >= milisegundosPorCuadro)
            {
                tiempoDesdeUltimoCuadro = 0;

                if (indiceAnimacion < cuadrosAnimacion-1)
                    indiceAnimacion++;
                else
                    indiceAnimacion = 0;
            }
}

Cada milisegundo vamos a ir aumentando la variable tiempoDesdeUltimoCuadro,si esa variable es mayor que el tiempo que habíamos definido para cada cuadro de animación, entonces es momento de actualizar el índice.
Para actualizar el índice, simplemente checamos si estamos 2 números antes de cuadrosAnimacion, si es así, podemos a vanzar la animación, en caso contrario, la reseteamos volviéndola cero.
Ahora que ya sabemos qué cuadro debemos dibujar, procedemos a dibujarlo:

public void Draw(SpriteBatch spriteBatch)
        {
            spriteBatch.Begin();

            spriteBatch.Draw(hojaSprites, posicion,
                new Rectangle(indiceAnimacion * tamanoCuadro.X, 0, tamanoCuadro.X, tamanoCuadro.Y),
                Color.White, 0.0f, Vector2.Zero, 1.0f, SpriteEffects.None, 0);

            spriteBatch.End();
        }

Nuestro método Draw() recibe como parámetro un objeto tipo SpriteBatch, el cual podemos ver como si fuera un lienzo para pintar. Siempre que queremos dibujar algo con el SpriteBatch debemos encerrar nuestro “dibujo” entre spritebatch.begin() y spritebatch.end().
El método spriteBatch.Draw(…) puede ser utilizado de varias formas, nosotros estamos utilizando una sobrecarga que recibe 8 parámetros:

• 1)La Texture2D a dibujar, en nuestro caso la hoja de sprites.
• 2)Un Vector2 con la posición donde queremos dibujar.
• 3) El SourceRectangle, que representa un rectángulo formado por una parte de nuestra imagen (la quinta parte para nosotros).
• 4)El color que queremos darle.
• 5)La rotación que en este caso no necesitamos.
• 6) El origen que tomaría la rotación.
• 7)La escala, que se queda como 1.0f para conservar el tamaño original.
• 8)Un SpriteEffect que puede en esta ocasión no usaremos.
• 9)La capa en la que lo queremos dibujar, por ahora dejémoslo en cero.

En este punto, ya tenemos a nuestro personaje animado, pero nos falta meterlo al juego…
Dentro de la clase Game1.cs hay que hacer lo siguiente:
Debajo de SpriteBatch spriteBatch; define un nuevo Sprite y nombralo personaje.

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Sprite personaje;

Modifica el método LoadContent() para que quede así:

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);

            Texture2D imagen = Content.Load(@"walkingSquareSheet");
            personaje = new Sprite(imagen, new Vector2(400, 300), 5, 50, new Point(70, 80));
        }

personaje = new Sprite(imagen, new Vector2(400, 300), 5, 50, new Point(70, 80));
Es la inicialización del constructor, le pasamos la imagen, la posición, el número de cuadros de la animación, los milisegundos por cuadro y el tamaño.
Texture2D imagen = Content.Load(@"walkingSquareSheet");
Se encarga de cargar una textura a memoria (asignada a la variable imagen) para después pasarla al constructor.
Ahora simplemente falta que modifiques los métodos Update() y Draw() de modo que se llamen los métodos correspondientes de nuestro Sprite.

        protected override void Update(GameTime gameTime)
        {
            personaje.Update(gameTime);//Llamando al método Update de Sprite

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            personaje.Draw(spriteBatch); );//Llamando al método Draw de Sprite

            base.Draw(gameTime);
        }

Ahora sólo queda darle F5 al proyecto y ver a nuestro personaje cobrar vida.
Te recomiendo que trates de jugar con los valores de inicialización de Sprite para que veas diferentes resultados.
Espero que te haya servido el tutorial, si tienes dudas, quejas o sugerencias, deja tu cometario.