Haciendo juegos con Html5

Agregando muchas Imagenes en Phaser

En esta oprtunidad aprenderemos como agregar cierta cantidad de sprites y en lugares diferentes de la pantalla,empezemos:
Tenemos nuestras variables declaradas :
_alien: nuestro sprite.
 Contador: cada cuanto aparece un nuevo sprite
Cantidad:cuantos sprite queremos que aparezcan.
Cargamos nuestra imagen:

 function preload(){
 game.load.image("extra",'alien.png');
 };

Llamamos a la función creaSprite.

function create(){
 creaSprite();
};

Creamos la función responsable de gestionar nuestros sprites.

function creaSprite(){
_alien=game.add.sprite(game.world.randomX,(Math.random()*400),'extra');
_alien.angle = game.rnd.angle();
cantidad-=1;
contador = game.time.now + 200;
}; 

Comenzamos con: _alien = game.add.sprite(game.world.randomX,(Math.random() * 400), 'extra'); Ahora agregamos un sprite, en el primer parámetro pasamos la posición en “x” donde deseamos que aparezca nuestro sprite, esta posicion no puede ser estatica porque de lo contrario aparecerán todos uno encima del otro como resultado solo tendríamos un solo sprite en pantalla para eso usamos una propiedad de nuestra clase Phaser.World a la cual accedemos mediante game.world, .randomX esta propiedad nos devuelve un valor dentro de un rango especifico en esta caso nuestro game.width, es decir, el ancho de nuestro mundo el cual es 400. En el segundo parámetro tenemos : (Math.random() * 400) Esto es opcional ya que podemos colocar cualquier valor por ejemplo 100 y todos nuestros sprite aparecerán en diferentes posiciones eso si solo cambiando su posición en “x” pero para que aparezcan a lo largo y ancho tenemos Math.random() que devuelve un valor entre 0 y 1 como esos valores no nos sirven le multiplicamos el alto de nuestro mundo que también es 400 ahora el valor que devuelve será entre 0 y 400. Tenemos una nueva propiedad que tiene todos nuestro sprites y que apunta al angulo:

 _alien.angle = game.rnd.angle();

Modificamos el angulo de nuestro sprite usando game.rnd.angle que devuelve un angulo en grados entre -180 y 180. Restamos en uno la cantidad de nuestra variable llamada cantidad cada vez que se llame a la funcion: cantidad-=1; Obtenemos el tiempo actual usando la clase Phaser.Time, esto también se puede hacer usando Date.now(), le sumamos 200 esto será la diferencia es decir es el tiempo en que tarda en aparecer un sprite: contador = game.time.now + 200; En la función update(actualizar):

function update() {
    if (cantidad > 1 && game.time.now > contador)
    {
        creaSprite();
    }
}

Comprobamos que nuestra cantidad(10) que esta disminuyendo en uno en cada llamada sea mayor que uno, usando el operador lógico && que significa “y” este operador arroja verdadero solo si ambas sentencias son verdaderas, obtenemos el tiempo actual y comprobamos si es mayor que el almacenado en nuestra variable "contador", con esto conseguimos que aparezcan nueve sprites en pantalla y con un pequeño intervalo entre cada uno.

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

 //nuestra imagen
 var _alien, 
 //cada cuanto aparece un alien
 contador=0,
 // cuantos alien queremos que aparezcan
 cantidad=10;
 
 function preload(){
 game.load.image("extra",'alien.png');
 };

function create(){
//inicializamos nuestra funcion 
        creaSprite();
};

function creaSprite() {

_alien=game.add.sprite(game.world.randomX,(Math.random() * 400),'extra');
      
   //angulo en grados ej:-180 a 180
_alien.angle = game.rnd.angle();

    cantidad-=1;
 
    contador = game.time.now + 200;
}

function update() {

    if (cantidad > 1 && game.time.now > contador)
    {
 //llamamos a la funcion cada cierto tiempo
        creaSprite();
    }

}

Hasta la próxima.