Llevo algún tiempo «jugueteando» con el framework Phaser e intentando documentarme con ayuda de la documentación oficial del framework y en tutoriales, blogs etc. Me ha costado un poquito encontrar buena documentación o ejemplos acerca de como manejar los estados de juego en Phaser, y por este motivo voy a explicar cómo lo he hecho yo en una serie de artículos.
¿Qué es Phaser?
Empecemos por el principio. Phaser es un framework de desarrollo de videojuegos HTML5, basado en la librería Pixel.js, cuya finalidad es facilitar el desarrollo de potentes videojuegos multiplataforma, especialmente diseñado para que éstos funcionen correctamente en navegadores móviles.
Si quieres empezar a probar Phaser, te recomiendo que empieces directamente por el tutorial «Making your first Phaser game«, es un tutorial muy guiado donde te van explicando sobre la marcha conceptos básicos sobre Phaser mientras vas construyendo tu primer videojuego HTML5.
A partir de este momento, asumiré que si has llegado a este artículo es porque estás buscando información específica de cómo gestionar los estados en Phaser, así que doy por hecho de que tienes unas nociones mínimas sobre el framework, o que has realizado el tutorial que recomiendo en el párrafo anterior.
Gestión de los estados de juego en Phaser
Para explicar cómo gestionar los estados en Phaser, qué mejor manera de hacerlo que con un ejemplo. Basado en el tutorial de la documentación oficial, he creado un pequeño videojuego en que se ilustra cómo se pueden gestionar los estados. Supongo que no será la única manera de hacerlo, ni por supuesto, la mejor. Pero así es como he logrado que funcione.
Nuestro videojuego estará compuesto por 6 estados: un estado de arranque, precarga, pantalla de título, el juego en sí, y dos pantallas de fin de juego (una para cuando completas el juego y otra para cuando te «matan»).
Voy a centrar cada artículo en un fichero distinto del videojuego, y por lo tanto, hoy empezaré por el fichero inicial del proyecto: index.html. El código de este fichero será el siguiente:
<!doctype html>
<html>
<head>
<script src=»js/phaser.min.js»></script>
<script src=»src/boot.js»></script>
<script src=»src/preload.js»></script>
<script src=»src/gametitle.js»></script>
<script src=»src/thegame.js»></script>
<script src=»src/gameover.js»></script>
<script src=»src/gameover_ko.js»></script><style>
body{margin:0}
</style><script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, «game»);
game.state.add(«Boot»,boot);
game.state.add(«Preload»,preload);
game.state.add(«GameTitle»,gameTitle);
game.state.add(«TheGame»,theGame);
game.state.add(«GameOver»,gameOver);
game.state.add(«GameOverKO»,gameOverKO);game.state.start(«Boot»);
</script>
</head>
<body>
</body>
</html>
Este fichero es muy sencillo, en primer lugar incluimos en el proyecto los ficheros que vamos a usar.
El primero en incluir es el propio framework Phaser (phaser.min.js) que podemos descargar en este enlace.
A continuación incluimos los ficheros .js con el código fuente del resto de estados y que iré explicando en próximos artículos.
Del resto del código podemos destacar la sentencia:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, «game»);
En ella, damos vida Phaser, creando una instancia del objeto Phaser.Game, asignándolo a una variable local llamada ‘game’.
A continuación declaramos todos los estados que va tener nuestro videojuego mediante la sentencia game.state.add. En cada declaración de estado, indicamos el nombre del estado y la función asociada que lo va a definir (estas funciones estarán descritas en los ficheros .js que hemos declarado al principio):
game.state.add(«Boot»,boot);
game.state.add(«Preload»,preload);
game.state.add(«GameTitle»,gameTitle);
game.state.add(«TheGame»,theGame);
game.state.add(«GameOver»,gameOver);
game.state.add(«GameOverKO»,gameOverKO);game.state.start(«Boot»);
Por último, con la sentencia game.state.start(«Boot»); definimos cual será el estado inicial de nuestro videojuego, en este caso el estado inicial será «Boot».
Hasta aquí nuestro fichero index.html. Es solo el comienzo de nuestro videojuego, pero por algún punto hay que empezar. En posteriores artículos iré mostrando y explicando el resto de ficheros. Espero que os sirvan de ayuda…