Plugins en Phaser: del antiguo phaser-debug al sistema moderno

La comunidad siempre ha sido una de las fortalezas de Phaser. En 2014 escribí esta entrada para mostrar phaser-debug, un plugin que añadía paneles de rendimiento y un árbol de escena directamente al juego. Hoy esa implementación pertenece a Phaser 2, pero el concepto de extender el engine mediante plugins sigue existiendo.

↻

Tutorial histórico de Phaser 2 · actualizado para 2026

El código original se conserva como referencia. No debes copiar game.add.plugin(Phaser.Plugin.Debug) en un proyecto moderno de Phaser 3 o Phaser 4.

Imagen original de la entrada sobre plugins de Phaser.

Qué era phaser-debug

phaser-debug fue un módulo creado para Phaser 2 que mostraba información de rendimiento y diagnóstico directamente sobre el juego. Permitía inspeccionar tiempos de actualización y visualizar la jerarquía de objetos sin depender únicamente de las herramientas del navegador.

Phaser 2 · phaser-debug 1.x

Phaser 2Fragmento histórico

// Archivo externo usado entonces
// phaser-debug.js

var game = new Phaser.Game(
  500,
  500,
  Phaser.AUTO,
  "caja",
  {
    preload: preload,
    create: create,
    update: update
  }
);

function create() {
  game.add.plugin(Phaser.Plugin.Debug);
}

No utilizar como código moderno

Ese plugin pertenece al ecosistema de Phaser 2 y su última actividad publicada es de hace muchos años. Mantengo el fragmento porque documenta cómo trabajábamos entonces.

Cómo funcionan los plugins en Phaser moderno

Phaser 3 dispone de un PluginManager y distingue principalmente entre plugins globales y plugins de escena. Un plugin puede cargarse durante el preload, incluirse en la configuración del juego o instalarse desde una escena.

Phaser 3Ejemplo conceptual moderno

class MiPlugin extends Phaser.Plugins.BasePlugin {
  start() {
    console.log("Plugin iniciado");
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 450,

  plugins: {
    global: [
      {
        key: "MiPlugin",
        plugin: MiPlugin,
        start: true
      }
    ]
  },

  scene: Juego
};

new Phaser.Game(config);

Phaser 2 frente a Phaser 3/4

Entrada original

• game.add.plugin(...)
• Phaser.Plugin.Debug.
• PIXI y World descritos según Phaser 2.
• Demo alojado en Google Drive.

Phaser moderno

• PluginManager.
• Global Plugins y Scene Plugins.
• Game Config y Scene Config.
• Tooling y arquitectura actuales.

¿Y el antiguo panel de Performance?

En aquella entrada me interesaba especialmente poder ver FPS, tiempos de actualización y el árbol de objetos. El objetivo sigue siendo válido: medir el rendimiento dentro del contexto real del juego, identificar qué sistemas consumen tiempo y entender qué existe en la escena.

Lo que ha cambiado es la herramienta concreta. No conviene construir un proyecto actual alrededor de phaser-debug; utiliza las herramientas, APIs y plugins compatibles con la versión de Phaser que realmente esté ejecutando tu proyecto.

!

Demo histórico retirado

La demostración original se servía mediante Google Drive Web Hosting, un servicio que dejó de funcionar en 2016.

Estado de Phaser en 2026

Phaser continúa activamente mantenido. Phaser 3.90.0 sigue disponible y Phaser 4 ya cuenta con releases estables. Antes de instalar cualquier plugin, comprueba explícitamente para qué rama y versión fue creado.

ADVERTISEMENT

ADVERTISEMENT