Haciendo juegos con Html5

Fisica en Phaser

En nuestro ultimo paso para entrar de lleno a hacer nuestro juego vamos a aprender fisica gracias a Phaser, aclaro esto no quiere decir que no hay mas cosas para aprender y que explicar para que tengas una nocion Phaser tiene mas de 200 ejemplos oficiales. 

Solo he querido explicar lo que considero basico para abordar un juego ya que en demasiada informacion se produce mucha confusion y claro aprenderemos mas cosas en este mundo nunca vamos a dejar de aprender.

En este framework tenemos tres tipos de fisicas (Arcade,P2,Ninja), nosotros usaremos Arcade en primera medida porque es mas facil de usar sino estas muy familiarizado con sistemas de fisicas claro tiene sus limitaciones por ejemplo el body siempre es un cuadro entonces si agregas una imagen circular igual el cuerpo sera un cuadro. 



Comenzemos: 

Creamos una nueva instancia y declaramos nuestras variables.

game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo',{preload:preload,create:create,update:update});
var game,
alien,
grupoDiamante,
grupoBloque,
teclas;

Cargamos nuestras imagenes:

function preload(){
game.load.image("_diamante","diamante.png");
game.load.image("jugador","alienx.png");
game.load.image("bloque","morada.png");
};

Aqui empezamos con la fisica:

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = '#2d2d2d';
    alien = game.add.sprite(32, 100, 'jugador');
    game.physics.enable(alien, Phaser.Physics.ARCADE);
    
    grupoDiamante = game.add.group();
    grupoDiamante.enableBody = true;
    grupoDiamante.physicsBodyType = Phaser.Physics.ARCADE; 

    grupoBloque = game.add.group();
    grupoBloque.enableBody = true;
    grupoBloque.physicsBodyType = Phaser.Physics.ARCADE;
    for (var i = 0; i < 3; i++)
    {
        var l = grupoDiamante.create(10+(150*i), 250, '_diamante');
        l.body.immovable = true;
    }
    for (var i = 0; i < 3; i++)
    {
        var local = grupoBloque.create(10+(150*i), 300, 'bloque');
        local.body.immovable = true;
    }
    teclas = game.input.keyboard.createCursorKeys();
};

Por defecto todos los objetos tienen el sistemas de fisicas Arcade por defecto, lo primero que debemos hacer es iniciar dicho sistemas antes que todo esto lo hacemos con: game.physics.startSystem(Phaser.Physics.ARCADE);
 Esto es la clase Phaser.Physics que tiene como metodo startSystem que recibe como parametro el tipo de sistema. 

Luego agregamos un color gris suave al fondo Phaser Stage, agregamos nuestro sprite, para activar la fisica en nuestro sprite usamos: 
game.physics.enable(alien, Phaser.Physics.ARCADE);

La clase Phaser.Physics tiene como metodo enable que recibe como parametro el sprite y el tipo de sistema. 

Ahora creo un grupo pero para activar la fisica en los hijos de este grupo Phaser Grupo usamos:
 grupoDiamante.enableBody = true;
 grupoDiamante.physicsBodyType = Phaser.Physics.ARCADE; 

 Todo grupo tiene la propiedad enableBody con la cual ordenamos que a todos los elementos a crear en este grupo se activada este sistema y tambien la propiedad physicsBodyType donde le pasamos el nombre del sistema a usar. 

 Creamos nuestros grupos :

    for (var i = 0; i < 3; i++)
    {
        var l = grupoDiamante.create(10+(150*i), 250, '_diamante');
        l.body.immovable = true;
    }

Una vez activamos nuestra fisica nuestro sprite puede acceder a la clase Body que se refiere a los propiedades de dicho objeto(velocidad,masa,salto,etc...). 

Como no quiero que se mueva el sprite al colisionar con el alien entonce usamos la propiedad immovable pasandole "true". 

 En la funcion update:

function update() {
    game.physics.arcade.collide(alien, grupoDiamante, colision, null, this);
    game.physics.arcade.collide(alien, grupoBloque);
    alien.body.velocity.x = 0;
    alien.body.velocity.y = 0;
    if (teclas.left.isDown)
    {
        alien.body.velocity.x = -200;
    }
    else if (teclas.right.isDown)
    {
        alien.body.velocity.x = 200;
    }
    if (teclas.up.isDown)
    {
        alien.body.velocity.y = -200;
    }
    else if (teclas.down.isDown)
    {
        alien.body.velocity.y = 200;
    }
}

Para logra que nuestro objetos colisionen usamos:
 game.physics.arcade.collide(alien, grupoDiamante, colision, null, this); game.physics.arcade.collide(alien, grupoBloque); 

Phaser.Physics.Arcade tiene el metodo .collide(objeto1,objeto2,callback,no se usa mucho(null),contexto del callback,) que recibe como parametro dos objetos pueden ser grupos o un sprite, en la colision del alien vs grupoDiamante quiero que suceda algo a parte de chocar, este metodo tambien puede recibir un callback donde podemos colocar algun accion luego de colisionar. 

En el tutorial usar teclas, vimos como mover objetos pero afectando directamente la posicion del sprite esta lo hacemos: 

 alien.body.velocity.x = 0; 
alien.body.velocity.y = 0; 

Primero una de la propiedades de body como ya lo menciones es la velocidad en ingles(velocity) con sus respectivos ejes lo coloco en cero fuera de la comprobacion porque sino al presionar alguna tecla direccional este seguiria como loco y lo que quiero es que este al dejar de presionar se deje de mover es decir su velocidad regrese a cero.

 Para mover nuestro alien no es mas que pasarle algun valor a la velocidad, si quieres que se mueva a la izquierda un valor negativo de lo contrario un valor positivo:

 if (teclas.left.isDown)
    {
      alien.body.velocity.x = -200;
    }

Y por ultimo la funcion que sera llamada cuando se produzca una colision entre el alien, esta funcion devuelve los objetos envueltos en la colision tal como los pasamos en la funcion que colisiona quiere decir primero colocamos el alien y luego los diamantes, si se da esto el diamante es eliminado usando el metodo .kill(). 

.