Una de las mejores cosas de Phaser 3 es el sistema de plugins. Por ejemplo, ¿sabía usted cada vez que carga una imagen, o se comprueba para la entrada en un objeto de juego, en realidad se está utilizando un sistema incorporado en plugin? No sólo hace uso de estos plugins Phaser internamente para una gran cantidad de su funcionalidad del núcleo, pero Phaser también permite que le permite ampliar su funcionalidad principal añadiendo sus propios plugins.

El objetivo de este tutorial es que le enseñe cómo crear un nuevo plugin de diálogo modal que usted será capaz de extender y reutilización en cualquiera de sus juegos. Se puede ver lo que vamos a crear a continuación:


Tabla de contenidos

Código fuente

Puede descargar todos los archivos asociados con el código fuente de la primera parte aquí.

Tutorial Requisitos

En este tutorial, necesitará lo siguiente:


  • Básico de habilidades intermedias de JavaScript
  • Un editor de código
  • Un servidor web local

    Se recomienda también que está familiarizado con los conceptos básicos Phaser (escenas, crear el objeto del juego Phaser, etc.) Si usted no está familiarizado con estos conceptos, usted todavía será capaz de seguir adelante con el tutorial, pero no se cubre en profundidad. Si desea obtener más información acerca de estos conceptos o desea un repaso, puede revisar la Cómo crear un juego con 3 Phaser tutorial aquí en GameDev Academia.

    Aprender Phaser 3 con nuestro nuevo mini-Grado

    El desarrollo del juego HTML5 Mini-Grado ya está disponible para pre-pedido en Zenva Academia. Aprender a código y hacer que los juegos impresionantes con JavaScript y Phaser 3!

    El acceso al instante temprano

    Configuración del servidor Web local

    Para ejecutar el juego Phaser localmente, tendrá que tener un servidor web que se ejecuta localmente. Si ya tiene un servidor web local o está familiarizado con la forma de configurar esta opción, se puede saltar a la siguiente parte del tutorial.

    En este tutorial, voy a utilizar una aplicación de Google Chrome llamado Servidor Web para Chrome. Esta aplicación es muy fácil de usar, y que llega a su servidor web que se ejecuta muy rápidamente. Si usted no es capaz de utilizar esta aplicación, o si le gustaría aprender más sobre algunas otras opciones, Phaser tiene un gran guía aquí:. Introducción a la Phaser 3

    Después de instalar la aplicación de Chrome, que puede lanzar yendo a tus aplicaciones de Chrome.


    Una vez que inicie la aplicación, debería ver una nueva ventana abierta que le permitirá elegir la carpeta que desea utilizar, activar / desactivar el servidor, y ver la URL del servidor web.


    Después de crear la carpeta del proyecto en el siguiente paso, todo lo que necesita hacer es hacer clic en el botón ‘Seleccionar carpeta’ y vaya a esa carpeta.

    Configuración del Proyecto

    Ahora que su servidor web local está funcionando, vamos a establecer nuestra estructura básica del proyecto. En primer lugar, tendrá que crear una nueva carpeta de proyecto, y en esta carpeta, tendrá que crear dos nuevos archivos: index.html y game.js. En el editor de código, abra index.html y agregue el código siguiente: