A la hora de trabajar con Phaser (y prácticamente con cualquier proyecto), es conveniente tener una estructura de carpetas sólida para trabajar, que tenga bien definido donde debemos colocar los ficheros, para encontrarlos luego rápidamente. Probablemente, nuestro proyecto de Phaser tendrá muchos archivos, así que vamos a definir bien dicha estructura.
Estructura general
Cómo puedes ver a continuación, vamos a tener la siguiente estructura, donde hay tres niveles principales de carpetas, que tendrán sus ficheros y subcarpetas:
├── public/
│ └── assets/
│ ├── sounds/
│ └── sprites/
├── src/
│ ├── modules/
│ ├── scenes/
│ ├── index.html
│ ├── index.js
│ └── index.css
├── jsconfig.json
├── package.json
├── .eslintrc.json
└── vite.config.js
- 1️⃣ La carpeta
public/tendrá los archivos estáticos (imágenes, sonidos, tipografías, música...) - 2️⃣ La carpeta
src/tendrá el código fuente del juego (javascript) - 3️⃣ La carpeta raíz del proyecto tendrá los archivos de configuración
La carpeta public
Nuestra carpeta public va a tener todos los archivos estáticos de nuestro juego. Lo recomendable sería crear una carpeta assets que incluirá todos estos archivos. En mi caso, suelo crear una subcarpeta sounds o fx para incluir ahí los efectos de sonido, una carpeta sprites para incluir las imágenes del juego, una carpeta music para incluir la música, una carpeta fonts para incluir las fuentes, etc...
La organización de carpetas depende del programador. Creo que esta es una buena estructura para empezar, aunque si el juego es muy grande y tiene muchos ficheros, quizás convendría segmentar más aún las carpetas y dividir más, por ejemplo, subcarpetas items, players, enemies dentro de sprites, etc.
La carpeta src
La carpeta src contendrá nuestros archivos de código javascript del proyecto. Empezaremos, como en cualquier proyecto frontend normal, por un archivo index.html que incluirá un archivo index.css que tendremos un poquito de CSS general (muy poco) y un archivo index.js que será nuestro punto de entrada para comenzar a trabajar con Phaser.
Por otro lado, empezamos con dos subcarpetas: modules y scenes. La carpeta modules contendrá pequeños módulos o ficheros .js con funciones o elementos de ayuda para nuestra aplicación. Pero probablemente, la carpeta más importante es scenes, que contendrá las escenas del juego.
¿Qué es una escena?
En Phaser, una de las unidades principales de un juego son las Escenas. Una escena es una parte del juego. Lo más sencillo es pensar en una «pantalla» de nuestro juego: la pantalla de carga, la pantalla del menú, la pantalla del juego, la pantalla de game over, etc.
Sin embargo, las escenas de Phaser van un poco más allá, e incluso pueden ser más modulares. Por ejemplo, una escena también puede ser pequeñas regiones con las que luego compondremos una escena más grande. Ejemplos: el HUD inferior de vida, energía y experiencia del juego, una ventana que aparece para indicar que el juego está pausado, etc.
De la misma forma, a medida que nuestro proyecto crezca, probablemente una sola carpeta de scenes sea insuficiente y debamos crear subcarpetas para organizar mejor el proyecto: characters/ para incluir personajes o NPC, items/ para el uso de objetos, etc.
Archivos de configuración
En nuestra carpeta raíz del proyecto tenemos varios archivos de configuración:
jsconfig.json: Este archivo contiene la información de rutas especiales. Por ejemplo, en nuestro caso tenemos definida una ruta especial llamada@que apunta a la carpetasrc. Por lo tanto, a la hora de importar módulos o ficheros.jsno tenemos que hacerlo con../o similares, sino simplemente escribimos@/scenes/Game.jsy ya el sistema lo encontrará. Así las rutas serán mucho más consistentes. Más información en evitar rutas relativaspackage.json: Es el archivo de configuración del proyecto. Aquí tenemos las librerías y dependencias que utilizaremos. Más información sobre package.json..eslintrc.json: Nuestro linter de Javascript. Un sistema que se encargará de revisar y aconsejarte como escribir mejor el código Javascript. Más información sobre ESLintvite.config.js: La configuración de Vite. Tenemos ciertos detalles preconfigurados para hacer mucho más fácil trabajar con el proyecto y tenerlo automatizado. Más información sobre Vite
Hay muchas formas de crear la estructura de nuestro proyecto, y es importante tener en cuenta que esta no es la única. Pero si creo que con esta información, ya estamos preparados para comenzar a escribir el código de un proyecto de Phaser de la forma más sencilla y cómoda posible, así que comenzaremos con ello en los siguientes artículos.
