Home | Clases | Videojuego sencillo con Phaser | Iniciar JS y precargar las imágenes

Iniciar JS y precargar las imágenes


El archivo JavaScript

El videojuego completo lo generaremos a partir de Phaser, con lo que el archivo index.html será realmente sencillo, incluyendo únicamente el título del juego, que es como lo tenemos ahora mismo. No utilizaremos ningún tipo de estilos, con lo que el archivo style.css quedará vacío. No obstante, la plantilla nos vale para futuros proyectos.

Por tanto, lo siguiente que vamos a hacer es inicializar nuestro juego desde el archivo script.js, añadiendo el siguiente código:



En este punto, si arrancamos el juego solo veremos el título con un recuadro negro de 800x600px, correspondiente al canvas que vamos a utilizar.

Precargar las imagenes

Para precargar las imágenes utilizaremos el método preload() inicializado antes:



Las 4 primeras líneas cargarán 4 imágenes que utilizaremos para el cielo, el suelo (y las vigas) los coleccionables y los enemigos. La última línea corresponde al jugador, y carga lo que se conoce como spritesheet: un conjunto de imágenes agrupadas en una sola que iremos llamando para generar el movimiento del jugador:

Fuente: http://phaser.io


Si analizamos la imagen, podemos ver cómo funciona esto:

  • Internamente está compuesta de 9 imágenes de 32x48 pixeles (justo los valores que hemos puesto en al cargar el spritesheet.
  • Las cuatro primeras corresponden al movimiento del jugador hacia la izquierda.
  • Las cuatro últimas corresponden al movimiento a la derecha.
  • La del medio al jugador cuando está parado.

Más adelante indicaremos al juego qué sub-imágenes o frames y en qué secuencia debemos utilizar en cada tipo de movimiento.
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