Mejorando la animación (¡Nadie mueve los brazos tan rápido!).

Ver artículo anterior de esta serie
Ver artículo siguiente de esta serie
Bueno, según mi peque, para correr rápido hay que mover los brazos lo más rápido posible así que si le ves igual se parezca al de la animación anterior.
Esto va a ser bastante sencillo teniendo en cuenta que la animación anterior era toda una patata.
Mejoras a introducir:

1. Más dibujos para el movimiento:
   
   
2. Dejar de saltar del último componente de la animación al primero. Esto lo conseguimos con el código siguiente:
       this.frame = this.frame + this.incrementoFrame;
       if (this.frame > 4)
          this.incrementoFrame = -1;
       if (this.frame < 1)
          this.incrementoFrame = 1;
   
3. Para que los brazos y las piernas vayan más despacio mantenemos cada dibujo de la animación durante tres “frames”. Introducimos la variable “paso” y sólo cambiamos de dibujo cuando paso toma el valor 3.
   
4. Al cambiar de dibujo corregimos el desfase que existe entre la posición de los dibujos poniendo, por ejemplo, la posición de referencia de cada uno de los dibujos en el segundo pixel del casco (esto no me suena muy ortodoxo pero creo que debería ser más correcto). De este modo el casco debería avanzar siempre a la misma velocidad.
   
   
   El desfase  es de 4, 6, 1, 2, 3, 8 pixeles, respectivamente. Para no hacer que el “muñeco” avance siempre a más velocidad de la debida podemos relativizar el desfase (cambiaríamos la línea roja cuatro pixeles a la derecha) por lo que el desfase será de 0, 2, -3, -2, -1 y 4 pixeles. El código para corregir esto es:
   if (this.paso == 0)
       this.posX = this.posX - desfaseFrameRelativo[this.frame];
   
5. Podemos hacer que el sprite se borre a sí mismo en lugar de borrar toda la pantalla. Esto debería aunque es más óptimo no se aprecia en la animación.
   

La animación con los cambios realizados se puede ver aquí:
http://bajoeltejadodezic.googlecode.com/svn/trunk/ejemplo2/movimiento2.html

Estamos pidiendo al navegador que ejecute nuestro código de dibujo a razón de 30 frames por segundo (1000 milisegundos / 30 frames por segundo = 33 milisegundos):
setInterval(function(){principal.actualizarJuego()}, 33);
Es posible que el hardware del equipo no sea capaz de realizar las llamadas a esa velocidad por lo que en los libros sobre programación de videojuegos introducen el concepto de velocidad y el del tiempo “real” transcurrido entre cada uno de los frames de modo que es posible que el “muñeco” avance un número de pixeles en un paso y otro distinto en el siguiente. Además se consigue también que independientemente de los frames por segundo en los que se ejecute nuestro código el juego se mueva a la misma velocidad en los distintos equipos por lo que siempre tendría la misma dificultad. En mi caso, “juego pa mi peque”, la dificultad, “habilidad”, no es necesaria y el hardware, capaz de ejecutar un navegado, debería ser capaz, también, de mover el juego a los frames marcados por lo que no voy a introducir esto en mi código. No obstante dejo aquí la versión con estos conceptos introducidos:
http://bajoeltejadodezic.googlecode.com/svn/trunk/ejemplo3/movimiento3.html

Ver artículo anterior de esta serie