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:


//Inicia un nuevo juego de 800x600 pixels en modo de renderizado automático (Canvas si es soportado por el navegador, WebGL en caso contrario) sin id del DOM (string vacío como cuarto parámetro)
var juego = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//Aquí cargaremos las imágenes y todos aquellos recursos de modo que estén listos para utilizarlos en el juego
function preload() {
}

//Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {
}

//Aquí añadimos lo que debe ir actualizándose a medida que transcurre el videojuego
function update() {
}


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

Desde ESTA DIRECCIÓN es posible obtener todos los archivos de imágenes necesarios. Una vez descargado, copia los archivos sky.png, dude.png, star.png y platform.png de la carpeta assets a la carpeta img de tu proyecto.

Una vez que tenemos los archivos necesarios, es posible precargar dichas imágenes modificando el método preload:


//Inicia un nuevo juego de 800x600 pixels en modo de renderizado automático (Canvas si es soportado por el navegador, WebGL en caso contrario)
var juego = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//Aquí cargaremos las imágenes y todos aquellos recursos de modo que estén listos para utilizarlos en el juego
function preload() {

juego.load.image('cielo', 'img/sky.png');
juego.load.image('suelo', 'img/platform.png');
juego.load.image('estrella', 'img/star.png');
juego.load.spritesheet('jugador', 'img/dude.png', 32, 48);
}


Las 3 primeras líneas cargarán 3 imágenes que utilizaremos para el fondo, el suelo (y las vigas) y las estrellas. 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: 01/02/2018
Asignaturas: realización de proyectos multimedia interactivosmontaje y mantenimiento de equipos
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