Cómo agregar muchas imágenes en Phaser

En esta oprtunidad aprenderemos como agregar cierta cantidad de sprites y en lugares diferentes de la pantalla,empezemos:

↻

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

Tenemos nuestras variables declaradas :

_alien: nuestro sprite.

Contador: cada cuanto aparece un nuevo sprite

Cantidad:cuantos sprite queremos que aparezcan.

Cargamos nuestra imagen:

JavaScriptCódigo histórico

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

Llamamos a la función creaSprite.

JavaScriptCódigo histórico

function create(){
 creaSprite();
};

Creamos la función responsable de gestionar nuestros sprites.

JavaScriptCódigo histórico

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:

JavaScriptCódigo histórico

_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):

JavaScriptCódigo histórico

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.

JavaScriptCódigo histórico

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.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de sprites y recursos 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