Elige tu propia aventura con PhaserJS

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Vamos a programar nuestro primer videojuego con Phaser. Es un juego basado en los conocidos libros de elige tu propia aventura. En nuestro juego, el jugador visualizará una pantalla con dos opciones. Debe escoger una de ellas haciendo click en su correspondiente imagen. Dependiendo de la imagen pulsada, el jugador será redireccionado a una u otra escena. Por tanto, dependiendo de sus decisiones el juego puede tener un final feliz o desastroso.

Para este primer juego trabajaremos intensamente con los cambios de escena, ya que cada vez que el jugador haga click sobre un área interactiva de la pantalla, haremos uno.

Cargamos el fondo

import spaceship from './assets/spaceship.jpg';
import { gameWidth, gameHeight } from './consts';

class Init extends Phaser.Scene {

    preload() {
        this.load.image('spaceship', spaceship);
    }

    create() {
        this.add.sprite(gameWidth/2, gameHeight/2, 'spaceship');
    }

    update() {
        console.log('update');
    }
}

export default Init;

Definimos las carpetas Home, Spaceship y Monteser para cada una de las 3 escenas restantes y cargamos los assets que les correspondan.

Área de la puerta pulsada

utils.js

export const loadZone = (scene, x, y, width, height, nextScene) => {
    const zone= scene.add.zone(x, y, width, height);
    zone.setOrigin(0);
    zone.setInteractive();
    zone.once('pointerdown', () => scene.scene.start(nextScene));

    // const graphics = scene.add.graphics();
    // graphics.lineStyle(2, 0xFF0000);
    // graphics.strokeRect(x, y, width, height);
}

Space.js

create() {
        this.add.sprite(480, 320, 'spaceship');
        loadZone(this, 140, 10, 440, 400, 'Spaceship');
        loadZone(this, 590, 240, 370, 410, 'Home');
}

class Starship extends Phaser.Scene {

	constructor() {
		super('Spaceship');
	}
	...
}

const config = {
    ...,
    scene: [Init, Spaceship, Home, Monster],
    ...
};