Setup: config, preload, create y update

Todo juego Phaser tiene la misma columna vertebral: un objeto config que define el juego, y una ESCENA con tres momentos — preload (cargar), create (montar) y update (el loop). Reconocerás dos de ellos al instante: son tu "setup" y tu "loop" del módulo 13, ahora con nombres y superpoderes. Domina esta estructura y ya sabes leer cualquier juego Phaser del mundo.

La config: el plano del edificio

const config = {
type: Phaser.AUTO,        // WebGL si se puede, Canvas si no (tú no decides: Phaser sí)
width: 400, height: 280,  // tamaño del lienzo
parent: "game",           // el id del <div> donde vive el juego
backgroundColor: "#0b1120",
physics: { default: "arcade", arcade: { gravity: { y: 0 } } },
scene: { preload, create, update },   // la escena y sus tres momentos
};
new Phaser.Game(config);    // enciende el motor

La config es declarativa: describes QUÉ quieres (tamaño, física, gravedad) y Phaser lo monta. Phaser.AUTO es un buen default — usa la GPU (WebGL) si está disponible y cae a canvas 2D si no, sin que te enteres.

Los tres momentos de una escena

function preload() {
// cargar assets ANTES de empezar (una imagen, un sonido, un spritesheet)
this.load.image("nave", "nave.png");
// Phaser espera a que TODO cargue antes de llamar a create()
}

function create() {
// montar la escena UNA vez: crear objetos, texto, física, input
this.nave = this.add.image(200, 140, "nave");
this.cursors = this.input.keyboard.createCursorKeys();
}

function update() {
// el LOOP: se ejecuta cada fotograma (~60/s). Aquí va el movimiento y la lógica
if (this.cursors.left.isDown) this.nave.x -= 3;
}

El puente entre create y update es this — la escena misma. Guardas ahí lo que necesites después (this.nave, this.cursors) y update lo lee. Es el equivalente ordenado a las variables globales que usabas en el módulo 13, pero encapsuladas en la escena.

Móntalo tú

Fíjate en lo que NO escribiste: no hay requestAnimationFrame, no hay clearRect, no hay listeners de teclado con un objeto de estado. Phaser provee el loop (llama a update solo), limpia el lienzo entre fotogramas y te da los cursores ya gestionados. Tú solo dices qué pasa en cada momento.

Mini-reto

Añade un segundo objeto a la escena — un "recolectable" (otra textura generada, de otro color) en una posición fija — y en update() haz que gire lentamente con this.item.angle += 1. Practicas el patrón completo: crear en create, guardar en this, animar en update. Y descubres que angle es una propiedad que Phaser anima por ti con solo cambiarla.

Qué sigue

Tu jugador es un cuadrado de color. La próxima lección le pone cara de verdad: cargar sprites e imágenes reales con preload, y animar personajes con spritesheets — el mismo concepto del módulo 13, pero con el sistema de animaciones de Phaser haciendo el trabajo pesado.