jairogarcíarincón
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:
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.
Publicado el 21 de Noviembre de 2024
phaservideosonido para videojuegos