El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección aprenderás cómo configurar un juego básico en Phaser y cómo funcionan las escenas, que son la base para estructurar cualquier juego. Entender estos conceptos es fundamental para organizar tu código y crear juegos escalables y fáciles de mantener.

¿Qué es la Configuración del Juego en Phaser?

La configuración del juego es el primer paso para iniciar cualquier proyecto en Phaser. Aquí defines aspectos clave como el tamaño de la pantalla, el renderizador, las escenas iniciales y otras opciones importantes.

Elementos Clave de la Configuración

type: Define el renderizador (por ejemplo, Phaser.AUTO, Phaser.CANVAS, Phaser.WEBGL).
width y height: Dimensiones del área de juego.
scene: Escena(s) que se cargarán al iniciar el juego.
physics: Configuración del motor de física (opcional).
parent: ID del elemento HTML donde se insertará el juego (opcional).

Ejemplo de Configuración Básica

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MyScene
};

const game = new Phaser.Game(config);

Explicación:

type: Phaser.AUTO permite a Phaser elegir el mejor renderizador disponible.
width y height definen el tamaño de la ventana del juego.
scene indica la escena que se cargará primero.
Se crea una nueva instancia de Phaser.Game con la configuración.

¿Qué es una Escena en Phaser?

Una escena es una sección independiente del juego, como un menú principal, un nivel o una pantalla de Game Over. Phaser utiliza escenas para organizar el flujo del juego y separar la lógica de diferentes partes.

Ciclo de Vida de una Escena

Cada escena tiene métodos especiales que Phaser llama automáticamente:

Método	Descripción
`preload`	Cargar recursos (imágenes, sonidos, etc.) antes de que la escena inicie.
`create`	Inicializar objetos y lógica cuando la escena comienza.
`update`	Se ejecuta en cada frame; ideal para lógica de juego y animaciones.

Ejemplo de una Escena Básica

class MyScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MyScene' });
    }

    preload() {
        // Cargar recursos aquí
    }

    create() {
        // Inicializar objetos aquí
        this.add.text(100, 100, '¡Hola, Phaser!', { font: '32px Arial', fill: '#fff' });
    }

    update(time, delta) {
        // Lógica que se ejecuta en cada frame
    }
}

Explicación:

constructor: Define la clave de la escena.
preload: Ideal para cargar imágenes, sonidos, etc.
create: Se ejecuta una vez, al iniciar la escena.
update: Se ejecuta continuamente, ideal para animaciones y lógica de juego.

Añadiendo Múltiples Escenas

Puedes definir varias escenas y especificar cuál se carga primero, o cambiar entre ellas durante el juego.

Ejemplo con Varias Escenas

class MenuScene extends Phaser.Scene {
    constructor() { super({ key: 'MenuScene' }); }
    create() {
        this.add.text(100, 100, 'Menú Principal', { font: '32px Arial', fill: '#fff' });
        this.input.once('pointerdown', () => {
            this.scene.start('GameScene');
        });
    }
}

class GameScene extends Phaser.Scene {
    constructor() { super({ key: 'GameScene' }); }
    create() {
        this.add.text(100, 100, '¡Juego Iniciado!', { font: '32px Arial', fill: '#fff' });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [MenuScene, GameScene]
};

const game = new Phaser.Game(config);

Explicación:

Se definen dos escenas: MenuScene y GameScene.
En el menú, al hacer clic, se inicia la escena del juego con this.scene.start('GameScene').
En la configuración, el array scene indica el orden de carga.

Tabla Comparativa: Métodos de Escena

Método	¿Cuándo se llama?	Uso principal
`preload`	Antes de iniciar la escena	Cargar recursos (imágenes, audio, etc.)
`create`	Al iniciar la escena	Crear objetos, inicializar variables
`update`	Cada frame	Lógica de juego, animaciones, comprobaciones

Ejercicios Prácticos

Ejercicio 1: Crea una Escena de Bienvenida

Instrucciones:
Crea una escena llamada WelcomeScene que muestre el texto "¡Bienvenido a mi juego!" en el centro de la pantalla.

Solución:

class WelcomeScene extends Phaser.Scene {
    constructor() {
        super({ key: 'WelcomeScene' });
    }

    create() {
        this.add.text(400, 300, '¡Bienvenido a mi juego!', {
            font: '32px Arial',
            fill: '#fff'
        }).setOrigin(0.5);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: WelcomeScene
};

const game = new Phaser.Game(config);

Consejo:
Recuerda usar .setOrigin(0.5) para centrar el texto en la posición dada.

Ejercicio 2: Cambia de Escena al Hacer Clic

Instrucciones:
Agrega una segunda escena llamada PlayScene. Cuando el usuario haga clic en la pantalla de bienvenida, cambia a la escena de juego.

Solución:

class WelcomeScene extends Phaser.Scene {
    constructor() { super({ key: 'WelcomeScene' }); }
    create() {
        this.add.text(400, 300, '¡Bienvenido a mi juego!\nHaz clic para empezar', {
            font: '32px Arial',
            fill: '#fff',
            align: 'center'
        }).setOrigin(0.5);

        this.input.once('pointerdown', () => {
            this.scene.start('PlayScene');
        });
    }
}

class PlayScene extends Phaser.Scene {
    constructor() { super({ key: 'PlayScene' }); }
    create() {
        this.add.text(400, 300, '¡Juego en marcha!', {
            font: '32px Arial',
            fill: '#fff'
        }).setOrigin(0.5);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [WelcomeScene, PlayScene]
};

const game = new Phaser.Game(config);

Errores comunes:

Olvidar registrar la clave correcta de la escena en this.scene.start('PlayScene').
No incluir ambas escenas en el array scene de la configuración.

Conclusión

En esta sección aprendiste cómo configurar un juego en Phaser y cómo funcionan las escenas, el pilar fundamental para estructurar cualquier juego. Ahora sabes:

Cómo definir la configuración básica del juego.
Qué es una escena y cómo se estructura.
Cómo crear y cambiar entre múltiples escenas.

Estos conocimientos te preparan para el siguiente tema, donde aprenderás a cargar y mostrar imágenes en tu juego, ¡dando vida visual a tus escenas!

Configuración del Juego y Escenas

¿Qué es la Configuración del Juego en Phaser?

Elementos Clave de la Configuración

Ejemplo de Configuración Básica

¿Qué es una Escena en Phaser?

Ciclo de Vida de una Escena

Ejemplo de una Escena Básica

Añadiendo Múltiples Escenas

Ejemplo con Varias Escenas

Tabla Comparativa: Métodos de Escena

Ejercicios Prácticos

Ejercicio 1: Crea una Escena de Bienvenida

Ejercicio 2: Cambia de Escena al Hacer Clic

Conclusión

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final