GAMES IN HTML5

Cómo 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.

Artículo original de 2014 · revisado en 2026

Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.

Phaser clásico · código histórico

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:

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

Declaramos nuestras variables.

JavaScriptCódigo histórico
var aliens,teclas;

Cargamos nuestra imagen a usar:

JavaScriptCódigo histórico
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:

JavaScriptCódigo histórico
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:

JavaScriptCódigo histórico
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:

JavaScriptCódigo histórico
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:

JavaScriptCódigo histórico
function update(){
if(teclas.left.isDown){
crear();
}

Aqui solo use la funcionrenderpara 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.

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

Hasta la proxima.

!
Demo histórico no disponible

El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://googledrive.com/host/0B2Br6oKX-RFNOVpkLWtwYURaODg/grupos.html.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de sprites y recursos, gestión de objetos sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.

ADVERTISEMENT
ADVERTISEMENT

No comments:

Post a Comment

Search the blog

Blog archive

Latest in English