Es el momento de darle a nuestro peque├▒o juego un prop├│sito. Dejemos caer una pizca de estrellas en la escena y permitamos que el personaje las recoja. Para lograr esto crearemos un nuevo grupo llamado 'stars' (estrellas). En nuestra funci├│n create, a├▒adimos el siguiente c├│digo (esto se puede ver en el archivo part8.html):
stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});El proceso es similar a cuando creamos el grupo de plataformas. Como necesitamos que las estrellas se muevan y reboten, creamos un grupo de física dinámica en lugar de uno estático.
A un grupo se le puede pasar un objeto json de configuración en el momento de su creación. En este caso, el objeto json tiene 3 partes: Primero, establece que la clave de textura sea la imagen de la estrella. Esto significa que a todos los elementos del grupo se les dará la textura de estrella por defecto. Luego establece que el valor de repetición sea 11. Debido a que se crea un elemento automáticamente, al repetir 11 veces obtendremos 12 en total, que es justo lo que necesitamos para nuestro juego.
La parte final es setXY - esto se usa para establecer la posici├│n de los 12 elementos que forman el grupo. Cada estrella se colocar├í a partir de x: 12, y: 0 y se usar├í un incremento en x de 70. Esto significa que el primer elemento se colocar├í a 12 x 0, el segundo a 70 p├¡xeles desde este a 82 x 0, el tercero se posicionar├í en 152 x 0, y as├¡ sucesivamente. Los valores de 'step' son una manera realmente ├║til de separar los elementos de un grupo durante su creaci├│n. Se elige el valor de 70 para que las 12 estrellas est├®n perfectamente repartidas en la pantalla.
El siguiente fragmento de código recorre todos los elementos del grupo y le da a cada uno un valor de rebote de Y aleatorio entre 0,4 y 0,8. El rango de rebote está entre 0, sin rebote, y 1, rebote completo. Debido a que todas las estrellas tienen su coordenada Y en 0, la gravedad las tirará hacia abajo hasta que colisionen con las plataformas o el suelo. El valor de rebote hace que reboten aleatoriamente hasta que finalmente se paren.
Si se ejecuta el código tal y como está ahora, las estrellas caerían al final del juego y se perderían de vista. Para evitarlo, hay que habilitar que colisionen con las plataformas. Podemos usar otro Collider para hacer esto:
this.physics.add.collider(stars, platforms);
Además hay que comprobar si el personaje se superpone con alguna estrella:
this.physics.add.overlap(player, stars, collectStar, null, this);
Esto le indica a Phaser que monitorice si hay una superposición entre el personaje y cualquier estrella en el grupo de estrellas. Si tienen contacto, se ejecuta la función 'collectStar' pasándole los dos objetos implicados:
function collectStar (player, star)
{
star.disableBody(true, true);
}Ahora simplemente se desactiva el cuerpo físico de la estrella y con esto se vuelve inactiva e invisible, lo que la elimina de la pantalla. Ejecutar ahora el juego nos da un personaje que puede correr, saltar, rebotar en las plataformas y recoger las estrellas que caen. No está mal para unas pocas líneas de código, en su mayoría, bastante legibles :)
