Home | Clases | Videojuego sencillo con Phaser | Dibujar el mundo

Dibujar el mundo


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:

  • Hemos añadido la física al juego para poder establecer acciones como solidez de objetos, velocidad, rebote, movimientos, etc.
  • Hemos creado un grupo para añadir todos los elementos de tipo plataforma de modo que podamos establecer acciones en grupo más adelante.
  • 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.
  • 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:

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:

  • Hemos añadido el jugador con su spritesheet para que aparezca a 150px de la altura total del juego
  • Hemos habilitado las opciones de física para el jugador
  • Hemos configurado valores para el rebote, la gravedad y la colisión con los bordes del juego
  • 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.


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.
Fecha de publicación: 09/12/2019
Asignaturas: realización de proyectos multimedia interactivosaplicaciones web
Temas: phaser video sonido para videojuegos
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos