Animar graficos en 2D

febrero 19, 2009 at 6:50 pm 7 comentarios

En el anterior capitulo aprendimos como cargar un gráfico en pantalla, pero estaremos de acuerdo que pocas veces veremos un gráfico en parntalla que no esté animado.

Creo que no le decrubo un secreto a nadie si digo que para animar un grafico en 2D hay que hacerlo fotograma a fotograma, hay que ir dibujando cada uno de los movimientos y luego irlos mostrando rápidamente uno detrás del otro para conseguir el efecto de movimiento.

Para conseguir esto en el mundo de los videojuegos en 2D lo que se hace es ir dibujando todos los movimientos de un personaje en un archivo gráfico, como comente el capitulo anterior puede ser un jpg, bmp, png, etc… (pero vuelvo a reiterar que los que me gusta usar a mi son los png, ya que permiten transparencias), para ver un ejemplo de lo que os digo fijaos en esta animación de Buu andando (estos recuerdos de infancia…)

buu

Podemos ver que en un mismo archivo gráfico están los cinco dibujos que conformarán la animación, ahora lo que hay que hacer es mostrar cada unos de estos dibujos uno tras otro para que como hemos comentado antes se produzca el efecto de movimiento, para ello lo que haremos será cargar el gráfico tal y como lo hicimos en el anterior tutorial pero esta vez en vez de mostrar el dibujo entero, solo mostraremos una parte de él e iremos iterando por el dibujo mostrando solo la parte que nos interese.

Para que te hagas una idea de lo que vamos a hacer imáginate que defines un rectángulo que vas a ir moviendo por el gráfico, y en pantalla solo mostraras lo que hay dentro de los limites de ese reactángulo, algo como esto: 

buuanim

Una vez explicado esto, vamos a ver como lo hacemos:

Primero crea un proyecto nuevo, y haz doble clic en el fichero Game1.cs para poder ver y modificar su código.

Ahora hay que añadir al proyecto el gráfico que vamos a usar, para ello haz clic con el botón derecho en la carpeta Contenta y selecciona añadir > elemento existente y selecciona el gráfico que quieras cargar. Yo he usado el siguiente:

run

(Te preguntarás porque he usado un gráfico para escribir el tutorial y otro para picar el código, la respuesta es muy sencilla, empecé con el grafico de buu e hice el gif animado, luego cambie por este gráfico( que por cierto viene con el plataformer stated kid de XNA 3.0), y me da mucha pereza hacer el gif animado con este nuevo gráfico)

Lo primero de todo es crear las variables que usaremos:

//Grafico que se usará
Texture2D sprite;
//Para controlar el cambio de frame
float temporizador = 0f;
float intervalo = 1000f / 10f;
//Número de frames que tendrá la animación
int numFrames = 10;
int frameActual = 0;

//Tamaño del cada uno de los fotogramas (el rectángulo del ejemplo del tutorial)
int spriteAncho = 96;
int spriteAlto = 96;

Rectangle rectanguloOrigen;
Rectangle rectanguloDestino;

Ahora vamos a cargar nuestro gráfico en el juego, en el método LoadContent agrega el siguiente código después del comentario:

            sprite = Content.Load("Run");
            rectanguloDestino = new Rectangle(0, 0, spriteAncho, spriteAlto);

Lo siguiente que vamos a hacer es crear el código que hará que nuestro personaje se “anime”, esto lo haremos en el método Update, que como sabemos es donde se actualiza la lógica del juego, agrega las siguientes líneas de código:

 //Le sumamos al temporizador los milisegundos transcurruridos
            temporizador += (float)gameTime.ElapsedGameTime.TotalMilliseconds;

            //Si es mayor al tiempo que le hemos definido en el intervalo
            if (temporizador > intervalo)
            {
                //Pasamos al siguiente frame
                frameActual++;

                //Controlamos que no nos pasemos de frames
                if (frameActual > numFrames - 1)
                {
                    frameActual = 0;
                }
                //Se pone el temporizador a cero
                temporizador = 0f;
            }

            //definimos el rectángulo que mostrará el siguiente frame.
            rectanguloOrigen = new Rectangle(this.frameActual * this.spriteAncho, 0, this.spriteAncho, this.spriteAlto);

            base.Update(gameTime);

Y por último solo nos queda dibujar por pantalla, como siempre, en el método Draw:

GraphicsDevice.Clear(Color.CornflowerBlue);

spriteBatch.Begin();
spriteBatch.Draw(sprite, rectanguloDestino, rectanguloOrigen, Color.White);
spriteBatch.End();

base.Draw(gameTime);

Descarga el proyecto con el código.

Anuncios

Entry filed under: XNA. Tags: , , , , , , .

Cargar un gráfico en pantalla. Nueva sección: Enlaces.

7 comentarios Add your own

  • 1. edward rodriguez  |  febrero 23, 2009 en 9:27 pm

    hola solo queria preguntar si estos tutoriales sirven para xna2.0 y cual es la diferencia con el codigo, y tambien si es posible decirme por que no me corren los started kits de creators club parece que sale un error de codigo bueno eso es todo gracias

    Responder
  • 2. kennyhp  |  febrero 23, 2009 en 10:39 pm

    Creo que este código si te servirá para la versión 2.0, aunque no lo he probado. De todos modos mi proyecto lo he creado con Visual Studio 2008, así que si estas usando la 2005 creo que no te dejará abrirlo, aunque tampoco lo he probado. Te recomiendo que actualizes al Visual Studio 2008 (la express si no tienes licencia) y a XNA 3.0, es gratis!
    Lo de los errores tendria que ver que es lo que pasa, escribe que error te da y en que started kit.
    Saludos.

    Responder
  • 3. Crow  |  junio 29, 2009 en 8:03 pm

    Muchísimas gracias por este tutorial. Me estaba rompiendo la cabeza intentando hacer una animación y aquí lo has explicado muy bien.
    Me gusta mucho tu trabajo, continúa así!

    Responder
  • 4. Kenny_hp  |  junio 29, 2009 en 8:36 pm

    Gracias por tus comentarios.
    Puedes seguir viendo nuevos tutoriales en la nueva dirección del blog: desarrolloxna.blogspot.com

    Responder
  • 5. Gaston  |  marzo 20, 2012 en 1:52 pm

    Estube revisando un poco el tutorial y me perdi un poco en la parte en que dentro del metodo Update, haces una actualización del temporizador. Podrias ser un poco mas especifico sobre como trabaja esta parte de codigo y que funcion cumple?
    Gracias 🙂

    Responder
  • 6. Evan AF  |  julio 23, 2012 en 6:04 pm

    Con que Herramienta puedo hacer esa secuencia de imagenes?

    Responder
  • 7. Erick Bernal  |  abril 24, 2013 en 10:46 pm

    hola gracias por la publicacion quiero hacerte un comentario constructivo el codigo tiene un pequeñisimo error de sintaxis a la hora de declarar
    sprite = Content.Load(“Run”);
    hace falta
    sprite = Content.Load(“Run”);
    saludos y gracias

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Entradas recientes

Categorías

febrero 2009
L M X J V S D
« Dic   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

Feeds

Visitas totales:

  • 92,931 visitas
wordpress stats

A %d blogueros les gusta esto: