Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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 iEstructura 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.