Haciendo juegos con Html5

Usando la camara en Phaser

En los juegos de tipo plataforma por ejemplo el mas grande de todos Mario Bros es normal ver que el mundo se mueve a la par con nuestro héroe esto no es mas que una cámara que lo sigue hacia donde se mueva, en esta oportunidad vamos a ver como se logra hacer esto.

En Phaser todos los objetos viven en un mundo world y para ver estos objetos dentro de este necesitamos una cámara, como sabemos el Stage visto en el tutorial de particulas en Phaser es quien controla nuestro canvas y por defecto nuestro world tiene el mismo tamaño que el stage, pero no esta limitado por este, podemos hacerlo del tamaño que deseamos, teniendo esto claro. 

 Comenzemos.

 Creamos una nueva instancia:

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

Declaramos nuestras variables:

var alien;
var teclas;  

Cargamos nuestras imágenes:

function preload() {
    game.load.image('X', 'salta.png');
   game.load.image('_cielo', 'cielo.png');
}

Creamos nuestra función create:

function create() {

    game.world.setBounds(0, 0, 1000, 1000);
       game.add.tileSprite(0, 0, 1000, 1000, '_cielo');
    alien = game.add.sprite(300, 240, 'X');
   alien.anchor.setTo(0.5, 0.5);
   teclas = game.input.keyboard.createCursorKeys();
   game.camera.follow(alien);
};

Como dije el limite de nuestro mundo lo podemos modificar como queramos, esto lo hacemos accediendo a la clase Phaser.World y usando su método setBounds(posX,posY,ancho,alto); esto quiere decir colocar un nuevo limite que corresponde a un nuevo ancho y alto del mundo y el centro será en cero(esquina superior izquierda),como resultado si deseamos rotar el mundo será tomado por ahí.

Luego agregamos un tileSprite con iguales valores que el mundo para que se repita las veces necesarias y lo cubra todo, lo siguiente es agregar un sprite, modificamos su anchor, agregamos nuestras teclas y aquí el método que hace la magia, Phaser provee la clase Phaser.Camera que esta es creada por defecto por Phaser.Game usamos el método follow(objeto)(seguir) asi le decimos que no pierda de vista a nuestro sprite teniendo claro que esta cámara no es mas que un rectángulo, además existen diferentes estilos de cámara(tipo plataforma, arriba/abajo) la que estamos usando es colocada por defecto.

Y en la función update:

function update() {
    if (teclas.right.isDown){
        alien.x += 4;
    }
    else if (teclas.left.isDown)
    {
        alien.x -= 4;
    }
    else if (teclas.up.isDown)
    {
        alien.y -= 4;
    }
    else if (teclas.down.isDown)
    {
  alien.y += 4;
    }
} 
 

Aquí no hay nada nuevo que explicar esto fue visto en el tutorial teclado en Phaser movemos el sprite por todo el mundo para poder apreciar el efecto que conseguimos.Hasta la Proxima.