Curso de Phaser | Estructura del código de nuestro videojuego 1

Curso de Phaser
Estructura del código de nuestro videojuego

Curso de Phaser | Estructura del código de nuestro videojuego 2

Estructura del HTML

Para poder crear la estructura que utilizará cada uno de los juegos que crearemos, necesitamos seguir los siguientes pasos:

1. Instalamos la aplicación estable de nodejs (LTS, long time support).

2. En la consola, ejecutamos el siguiente comando:

npm create phaserjs/game .

3. Comienza un asistente para la creación del proyecto. La combinación de opciones más habitual que más nos interesará utilizar será:

  • Web Bundler → Vite → Vite

4. Tras crear el proyecto, debemos instalar las dependencias necesarias:

npm i

Estructura del proyecto

/index.html

Aquí definemos los estilos mínimos del documento HTML en el que se cargará la aplicación y cargamos main.js, que contiene la configuración de nuestro juego.

/public

Dentro de la carpeta assets de esta carpeta public estarán todos los recursos que usará nuestro juego (imágenes, sonidos, músicas, etc.)

/src

Aquí está el código fuente de nuestro juego.. Destaca la carpeta scenes con las escenas de nuestro juego:

  • /src/scenes/Boot: La escena de inicio en la que se precargan todos los assets necesarios.
  • /src/scenes/Preloader: La barrita de carga de nuestro juego.
  • /src/scenes/MainMenu: Aquí suele estar el menú de inicio. Si nuestro juego no tiene, podríamos pasar directamente al fichero Game.
  • /src/scenes/Game.js: La escena principal de nuestro juego.
  • /src/scenes/GameOver: La escena que se mostrará cuando perdamos el juego.

/src/main.js

Contiene la configuración básica de nuestro juego:

  • Proporciones de la pantalla.
  • Motor de físicas (si las hubiese) usado.
  • Redimensionamiento de la pantalla.
  • Carga de todas las escenas de nuestro juego.