Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Puedes descargar este editor visual de Phaser en phasereditor2d.com.
Estructura básica de un proyecto
/src/main.js
Desde aquí cargaremos todas las escenas del juego. La primera escena que cargaremos será la escena Preload, que muestra el icono del juego mientras este se carga y precarga todos los assets necesarios.
/src/preload.js
El método editorPreload accederá a un JSON (assets/asset-pack.json) en el que estan todos los assets del videojuego.
Para cargar recursos en el JSON:
1. seleccionaremos la carpeta assets → upload files → browser → upload files.
2. Seleccionamos el recurso en la carpeta assets → panel Onspector → Import as Image / Import as spritesheet → Add to /assets/asset-pack.json
Escenas
Cada fichero de escena tiene vinculado un fichero llamado con el mismo nombre pero con extensión .scene. Este fichero nos permite reubicar y modificar visualmente todos los elementos de la escena. Este fichero está vinculado por defecto a un método llamado editorCreate() que será llamado desde el create() y cuyo contenido se actualiza cada vez que reubicamos algo.
Físicas
Para poder usarlas, habrá que añadir el siguiente código al objeto de configuración de main.js:
,physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: {
y: 300,
},
},
},Cuando añadimos una imagen a la escena, por defecto se añade como un objeto de tipo Image. Podemos seleccionarlo y cambiarlo a un objetio de tipo ArcadeImage para que tenga físicas.
Crear Prefabs
Son clases que con su propia funcionalidad. Serán vinculados, al igual que las escenas, a ficheros de tipo scene.
Crear Animaciones
1. Botón derecho sobre la carpeta assets → New → Animations File → Llamamos al fichero animations.
2. Con el nuevo fichero creado seleccionado, pulsamos en el botón de Add Animation → Seleccionamos los frames del Spritesheet que habíamos precargado.
3. Cuando hagamos doble click en el fichero animations, podremos ver, en el panel outline las animaciones vinculados al fichero animations.json.
4. Debemos importar el fichero de animaciones al preload-asset-pack.js.
5. Para vincular la animación a un objeto, ten en cuenta que este no puede ser de tipo Image, ya que este no puede ejecutar animaciones. Podría ser de tipo Sprite o ArcadeSprite.
6. Finalmente para lanzar la animación deberemos usar código:
this.player.play('playerLeftWalk');Usando un tilemap
Botón derecho sobre la escena → Add Object → Tile Map → TileMap