Acabamos de añadir código a nuestra función create que merece una explicación más detallada. Primero, esta parte:
platforms = this.physics.add.staticGroup();Esta línea crea un nuevo grupo de elementos estáticos con física y lo asigna a la variable local platforms. En el sistema de físicas Arcade hay dos tipos de cuerpos: dinámicos y estáticos. Un cuerpo dinámico es aquel que puede moverse aplicandole fuerzas como velocidad o aceleración. Puede rebotar y chocar con otros objetos y esa colisión está influenciada por la masa del cuerpo y otros elementos.
Por el contrario, un cuerpo estático simplemente tiene una posición y un tamaño. No está influido por la gravedad, no puede establecerse su velocidad y cuando algo choca con el no se mueve. Estático por nombre, estático por naturaleza. Y perfecto para el suelo y las plataformas en las que vamos a dejar que el personaje corra.
Pero ¿qué es un Grupo? Como su nombre indica, es una forma de agrupar objetos similares y controlarlos a todos como uno solo. También se puede comprobar la colisión entre grupos y otros objetos del juego. Con los Grupos se pueden crear elementos del juego de forma sencilla a través de funciones de ayuda como create. Los miembros de un Grupo tendrán habilitada automáticamente la física, lo que le ahorrará algo de trabajo en el proceso.
Ahora podemos usar el Grupo platforms para crear las plataformas:
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');Como vimos anteriormente crea esta escena:
Durante la precarga importamos una imagen 'suelo'. Es un simple rectángulo verde de 400 x 32 píxeles de tamaño y servirá para las necesidades básicas de las plataformas:
La primera línea del código anterior añade una nueva imagen del suelo en la posición 400 x 568 (recuerde, las imágenes se posicionan según su centro). El problema es que necesitamos que esta plataforma ocupe todo el ancho de nuestro juego o, de lo contrario, el personaje simplemente se caerá por los lados. Para ello la escalamos x2 con la función setScale(2). Ahora tiene un tamaño de 800 x 64, lo cual es perfecto para nuestras necesidades. La llamada a refreshBody() es necesaria ya que se ha escalado un cuerpo físico estático, por lo que es necesario avisar al sistema de físicas sobre los cambios que hicimos.
El terreno está escalado y en su lugar, por lo que es hora de crear el resto de plataformas:
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');El proceso es exactamente el mismo que antes, solo que no necesitamos escalar estas plataformas porque ya tienen el tamaño correcto.
Se colocan 3 plataformas alrededor de la pantalla, separadas con las distancias correctas para que el personaje pueda saltar hacia ellas.
Así que vamos a añadir nuestro personaje.