<script src="javascript.js"></script>
A continuación voy a comentar las variables declaradas en el código de la página de la derecha:
La variable config
Como puede ver, tenemos un objeto llamado “config” que define varios aspectos básicos del juego:
• Phaser.AUTO: especifica el renderizador. Sus valores pueden ser CANVAS, WEBGL, HEADLESS y AUTO. Programaremos utilizando el valor AUTO, que automáticamente escogerá una buena opción.
• El ancho (960px) y el alto (640px): estas medidas definen el tamaño del canvas (el rectángulo dónde se desarrollará el juego). Más adelante añadiremos un código Javascript para que, manteniendo la proporción definida por esas medidas, el canvas se deforme para ocupar toda la pantalla del dispositivo.
• Scene: aquí indicamos la o las escenas de juego. Si el juego tiene una sola escena, como el que estamos haciendo, la indicamos directamente. Si fueran varias, utilizaríamos un array, y el primer elemento de dicho array sería la escena inicial del juego.
La clase escena
Ya que estamos usando ECMAScript6, cada una de las escenas de nuestros juegos será una clase. Esta clase tendrá habitualmente tres métodos fundamentales (aunque en este primer juego no usaremos el método update):
• preload: dentro de este método precargaremos los recursos que utilizará el juego (imágenes, sonidos, ficheros JSON, etc).
• create: esta función se ejecuta una sola vez al comienzo del programa. Se encarga de hacer la configuración básica y poner los objetos en pantalla.
• update: esta función se ejecuta varias veces por segundo. Gestiona los movimientos del protagonista del juego y de sus enemigos, las colisiones entre ellos y, en general, todo lo que necesite ser evaluado de manera constante.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
006
La siguiente captura muestra lo que veremos por consola. Para acceder a ella, pulsaremos F12 o botón derecho > Inspeccionar. En la pestaña Consola podemos ver el resultado de ejecutar la instrucción console.log. Con esto, comprobaremos si el código que hemos escrito funciona correctamente. En la siguiente pantalla se ve lo que muestra por consola el navegador Firefox.
Redimensionado de la pantalla
Método resize
Tras añadir y llamar a la siguiente función, lograremos que el área de juego y todo su contenido se redimensionen para ocupar el cien por cien de la pantalla. Lo malo es que, utilizando este código, las imágenes se verán deformadas si la pantalla no mantiene la proporción de 960x640.
Llamaremos a la función resize desde el método preload. Además, he añadido una línea de código (addEventListener) que escucha cuando redimensionamos la ventana del navegador para llamar a la función resize que hará que el área de juego se ajuste en todo momento a las dimensiones de la pantalla.
Si prefiere que las proporciones del juego no se vean alteradas, aunque el área de juego no ocupe toda la pantalla del navegador, puede usar este otro código para la función resize, en lugar del anterior:
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
007
Primeros pasos
Ha llegado el momento de comenzar a escribir código.
Estos son los pasos que debe dar (alguno de ellos ya los habrá hecho):
1. Instalar XAMPP o cualquier servidor web que le guste (WAMP, MAMP, etc.).
2. Dentro de la carpeta htdocs de XAMPP (o la análoga del servidor web que haya instalado), le recomiendo crear una carpeta donde guardará los ficheros de nuestro juego. En este momento, serán:
· La librería de Phaser (phaser.min.js) que hemos descargado de https://phaser.io.
· Una página HTML (index.html)
· Un documento Javascript en el que escribiremos el código fuente de nuestro juego (javascript.js).
3. Como nuestro primer juego será el de elige tu propia aventura, puede crear la carpeta elige-tu-propia-aventura de tal forma que tendríamos la siguiente ruta para acceder a los ficheros de juego:
c:/xampp/htdocs/elige-tu-propia-aventura
4. Editamos el fichero index.html conforme a las instrucciones del apartado Estructura básica: El HTML.
5. Editamos el fichero javascript.js conforme a las instrucciones del apartado Estructura básica: El Javascript.
6. Lanzamos el fichero juego.html desde:
http://localhost/elige-tu-propia-aventura
es decir, no haremos doble click sobre el fichero, sino que arrancaremos el juego desde el servidor.
7. Para comprobar que todo ha ido bien, desplegamos las trazas de la consola (botón derecho -> inspeccionar -> pestaña Console). Deberíamos ver una única traza con los textos preload y create, mientras que la palabra update aparece muchas veces porque el método es llamado constantemente.
8. Si no consigue completar correctamente todos los pasos indicados, continúe leyendo, le explico algunos errores que podría tener.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
008
Ejecutando archivos en el servidor
Errores típicos al ejecutar nuestro código en el servidor
• Phaser is not defined
Este es un error típico que podemos ver en la consola.
Muy