Videojuegos en HTML5

Mover los personajes Más videos

Descripción del tema

Ya vimos como hacer animaciones utilizando sprites, pero tanto los pájaros como el personaje principal están en el mismo lugar, en este tutorial vamos a ver como moverlos de posición.

Ya que nuestro juego es en 2D el movimiento será sobre el eje x o y, cada sprite que definimos contiene estas propiedades que pueden ser modificadas dentro del método update que se ejecuta constantemente en el loop infinito.

Lo primero que vamos a realizar es mover el pájaro modificando la propiedad x de la siguiente manera.

var GameState = {
    preload : function(){
        //...
    },

    create  : function(){
        //...
    },

    update  : function(){
        var me = this;

        me.crow.x += 5; //<---
    }
}

Utilizando la propiedad crow que creamos en el método create,  vamos a incrementar 5px en cada iteración del método update, esto comenzará a mover al pájaro hacia la derecha.

Si en este momento ejecutamos el juego veremos que el pájaro comienza a moverse pero desaparece de la escena y nunca regresa. Si quisiéramos que inicie la animación deberíamos verificar que cuando llegue al final cambiar la propiedad x a cero para que inicie nuevamente el recorrido.

var GameState = {
    preload : function(){
        //...

    create  : function(){
        //...
    },

    update  : function(){
        var me = this;

        me.crow.x += 5;
        if(me.crow.x >= me.game.world.width){ //Step 1
            me.crow.x = -100;                 //Step 2
        }
    }
}
  1. En el paso uno revisamos si la posición x del sprite ha llegado al final del mundo.
  2. En el segundo paso simplemente reiniciamos el movimiento al inicio del mundo. 

Con esto podremos ver como el pájaro se va moviendo de principio a fin en un ciclo. Ahora intenta hacer lo mismo con el personaje principal que ya hemos creado en el tema anterior.

Movimiento de personajes

Moviendo los personajes

Corrigiendo la animación del personaje principal

Entre los comentarios del tutorial anterior me hicieron notar que la animación del personaje principal pareciera que camina hacia atrás, lo cual se ve un poco raro y debemos corregirla.

Para corregir la animación tenemos dos opciones, la primera es ir a cambiar el orden de las imágenes en el sprite, eso lo podemos hacer en nuestro editor de imágenes favorito, es un proceso sencillo pero nos tomara tiempo.

La segunda opción es simplemente cambiar el orden de los frames directamente en el código, esta opción es la que nos tardaremos mucho menos tiempo, es muy sencillo simplemente debemos cambiar la numeración de la siguiente manera.

me.man.animations.add('left', [15,14,13,12,11,10,9,8], 10, true);

Con eso ahora los frames se mostrarán en el order invertido y la animación se verá más natural.

Conclusiones

Ya logramos mover nuestros personajes dentro del juego, simplemente modificando la posición X o Y de cada sprite. Aunque ya lo estamos moviendo, más adelante cuando introduzcamos el motor de física vamos a cambiar esto ya que el motor de física será el responsable de calcular las posiciones tomando en cuenta la gravedad, velocidad, dirección y algunas otras variables.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Videojuegos en HTML5, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

6Comentarios

  • Avatar-7 Nehuen Escalada 06/03/2015

    Muy bien explicado, espero el próximo artículo, gracias. ¡Saludos!

    • Avatar-11 alto_lino 07/03/2015

      Estuve mirando el curso muy bien explicado pero me gustaría que se explicara el diseño del juego completo incluyendo la instalación de el juego en un celular y los programas necesarios para esta instalación.

      • Avatar-5 Julio Yacot 08/03/2015

        Hola... creo que deberías revisar cursos y documentaciones de Apache Córdova, que te permite hacer aplicaciones Híbridas (Html5, Css3 y Javascript), pero ese seguramente es tema de otro curso..... Un saludo!

        • Avatar-10 Crysfel Villa 08/03/2015

          Hola Alto, la idea es deployar este juego en in iPad usando Cordova como menciona Julio. Saludos

        • Avatar-8 Roxana 10/03/2015

          Muy bien ! también espero los próximos tutoriales de este curso, Saludos :)

          • Avatar-12 ROBERTO CARVAJAL 06/11/2015

            Claro y conciso , satisfecho y esperando la continuación del curso, por favor avísen al correo cuando salga la continuación. Gracias

            Instructor del curso

            Crysfel3

            Autor: Crysfel Villa

            Amante de los videojuegos y programador, actualmente desarrollando juegos sencillos para dispositivos móviles solo por diversión.

            Descarga video Descarga Código Fuente Ver Demostración

            Regístrate a este curso

            Este tutorial pertenece al curso Videojuegos en HTML5, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

            Ya que este curso no está finalizado al registrarte podrás recibir en tu correo los nuevos tutoriales de este curso!

            Tendrás acceso a descargar los videos, códigos y material adicional.

            Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

            Llevarás un registro de tu avance.