Haciendo juegos con Html5

Agregar un sprite a un grupo en Phaser.

En la anterior entrada vimos como agregar varias imágenes, pero en nuestros juegos en html5 tener muchos objetos que ya no se estén usando sin control alguno puede traernos problemas de performance, para eso necesitamos mas control sobre los objetos que agregamos en pantalla.Esto normalmente lo hacemos creando un array donde meteríamos objetos a eliminar , estos serian aquellos que ya no estén visible en pantalla o sean destruidos y asi poder controlar el uso de recursos.
 En phaser esto lo hacemos creando grupos , Phaser.Group es una de la partes mas importante del nucleo de este framework, y gracias a esto podemos hacer un uso adecuado de nuestros sprites si necesitamos reciclar objetos, un grupo es lo que necesitamos pero de eso hablare en próximas entradas. Por ahora veamos como crear un grupo y agregar cosas a el.



 Declaramos nuestras variables que usaremos para crear nuestro grupos.

var monedas,plantas;

Cargamos nuestras imágenes normalmente y le colocamos un nombre clave:

function preload() {
    game.load.image('moneda', 'coin.png');
    game.load.image('_hierba', 'hierba.png');
}

En nuestra función create tenemos:

function create() {
    monedas = game.add.group();
    plantas = game.add.group();
    for (var i = 0; i < 5; i++)
    {
        monedas.create(100 + Math.random() * 200, 120 + Math.random() * 200, 'moneda');
    }
    var plantica = game.add.sprite(100, 240, '_hierba');
    plantas.add(plantica);
};

En el código de arriba inicializamos nuestras variables creando dos grupos eso lo hacemos con game.add pero esta vez necesitamos agregar un grupo entonces llamamos al método .group():

game.add.group();

Luego hacemos un simple bucle “for”, dentro de ese loop llamamos al método la clase Phaser.Group :

.create(posición en X, posición en Y,nombre clave de nuesstra imagen)

Con este método automáticamente se creara un sprite , para que aparezcan un poco dispersas usamos Math.random(),pero también podemos agregar un sprite directamente al grupo lo que hacemos es agregar un sprite normalmente:

  var plantica = game.add.sprite(100, 240, '_hierba');

Y con el método .add(objeto):

plantas.add(plantica);

Así el objeto sera agregado en la primera posición de nuestro grupo, de esta forma podemos controlar con gran facilidad diferente cantidad de objetos. Hasta la próxima.