Haciendo juegos con Html5

Como reciclar objetos en Phaser

En el tutorial de grupos vimos como se crea un grupo y para que sirve, en esta oportunidad aprenderemos como utilizarlo para reutilizar esos objetos con el fin de optimizar recursos,esto resulta muy útil debido a que en juegos de disparos en el cual habrá cantidad de balas de las cuales muchas ya no estarán en pantalla pero aun siguen vivas y se siguen creando mas causando un gasto de memoria.

Entonces lo mejor seria detruirlas para luego volver a utilizarlas creando un proceso de reciclaje que se activaría cuando dicha partícula golpee con algo o salga de los limites de nuestro mundo.

Comenzemos:

 Creamos un nueva instancia:

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

Declaramos nuestras variables.

var aliens,teclas;

Cargamos nuestra imagen a usar:

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

Creamos un grupo, creamos nuestro sprite aleatoriamente, creamos una señal que se activa cuando presionamos click en cualquier parte del canvas y creamos nuestras teclas nada que no hayamos visto:

function create() {
    aliens = game.add.group();
    for (var i = 0; i < 5; i++)
    {
       aliens.create(0 + Math.random() * 200, 120 + Math.random() * 200, 'X');
    }
 game.input.onDown.add(destruir,this);
   teclas=game.input.keyboard.createCursorKeys();
}

Ahora tenemos:

function destruir() {
    var local = aliens.getFirstAlive();
    if (local)
    {
        local.kill();
    }
};

Primero esta funcion se la pasamos a la señal que creamos anteriormente asi que siempre que se presione click se destruira un objeto, todo los sprite en Phaser tiene un propiedad "alive" (vive) la palabra lo dice por si mismo si esta propiedad es false el objeto es destruido, para sacar del grupo todo objeto vivo usamos el metodo .getFirsAlive() que nos devuelve el primer objeto que este vivo(alive=true), luego comprobamos si se ha obtenido algun objeto entonces usamos el metodo .kill()(eliminar) con el cual destruimos a nuestro sprite. 

Bien pero ahora resucitemos a nuestro amigo, para esto usamos:

function crear() {
    var local = aliens.getFirstExists(false);
    if (local)
    {
        local.revive();
    }
};

Otra propiedad que tiene nuestro es "exists"(existe) cuando usamo el metodo .kill() para destruir a nuestro objeto lo que paso fue que coloco la propiedad "alive" y "exists" en "false" asi que para revivirla usamos el metodo del grupo getFirstExists(false) para encontrar objetos en ese grupo con esta propiedad en "false".

Comprobamos si hay alguno de ser asi usamos el metodo revive()(revivir) para recuperar a nuestro sprite. Luego comprobamos si se presiona la tecla direccional izquierda llamamos a la funcion crear() y que reviva lo que tenga que revivir, aclarar que como en el "for" solo creamos cinco sprite esta sera limite que podemos recuperar:

function update(){
if(teclas.left.isDown){
crear();
}

Aqui solo use la funcion render para escribir algun texto usando el metodo  .text(texto, posX,posY) y usando el metodo del grupo countLiving() que devuelve el numero de objetos en el grupo que estan vivos.

function render() {
    game.debug.text('VIVOS:' + (aliens.countLiving()), 0, 20);
}

Hasta la proxima.