jairogarcíarincón

Dibujar el mundo


2.04K

En este capítulo nos centraremos en el método create() para pintar sobre el canvas los diferentes elementos del videojuego, a saber: fondo, suelo, vigas, jugador y estrellas.

El fondo, el suelo y las vigas



Para mostrar estos tres elementos, añade la siguiente variables global después de la declaración de la variable game e incluye el siguiente código dentro de el método create():



La física del juego



Además, modifica la variable config para que incluya las propiedades físicas del juego:



Estas son las acciones realizadas:

  1. Hemos añadido la física al juego para poder establecer acciones como solidez de objetos, velocidad, rebote, movimientos, etc.
  2. Hemos creado un grupo para añadir todos los elementos de tipo plataforma de modo que podamos establecer acciones en grupo más adelante.
  3. Hemos añadido el suelo y lo hemos escalado al doble de su tamaño para que ocupe todo el ancho de la pantalla. Por último, le hemos dicho que no se puede mover, esto es, que cuando algún objeto (estrella, jugador, etc.) rebote sobre él, no se "caiga" hacia abajo.
  4. Hemos creado dos vigas a unas distancias determinadas en pixeles utilizando de nuevo la imagen del suelo, y les hemos dicho que tampoco se pueden mover.

Si ahora ejecutamos el juego, deberíamos acceder a una pantalla similar a esta:

Fondo y plataformas
Fuente: http://phaser.io


El jugador



Para añadir el jugador, añade la siguiente declaración de variable después de la declaración de la variable de las plataformas, y modifica el método create() para añadir al jugador y modificar la configuración de propiedades físicas y las animaciones:




Estas son las acciones realizadas:

  1. Hemos añadido el jugador con su spritesheet para que aparezca a 150px de la altura total del juego
  2. Hemos habilitado las opciones de física para el jugador
  3. Hemos configurado valores para el rebote, la gravedad y la colisión con los bordes del juego
  4. Hemos declarado las animaciones izquierda y derecha para utilizarlas cuando añadamos los controles de teclado del videojuego y que el muñeco de la sensación de que camina hacia ambos lados.


El jugador
Fuente: http://phaser.io


Al ejecutar el juego, vemos que aparece el jugador y cae hasta el final del juego (en altura). Esto es porque aún no le hemos dicho que debe colisionar con las plataformas. Además, mira siempre hacia la izquierda, que es el primer frame de nuestro spritesheet. esto es porque aún no le hemos establecido cual debe mostrar.


Publicado el 30 de Junio de 2022

phaservideosonido para videojuegos