Aprender desarrollo de videojuegos para móviles y web con Phaser.js . Pablo Monteserín

es incorrecta o simplemente no estamos cargando la librería en ninguna parte, o no estamos utilizando una sintaxis correcta. Recuerde que para cargar Phaser debemos usar el siguiente código:

      <script src="phaser.min.js"></script>

      El valor del atributo src es la ruta para cargar Phaser desde la ubicación del fichero index.html que estamos lanzando. Si el fichero phaser.min.js y el index.html están en el mismo sitio, simplemente pondremos el nombre del fichero .js, como en el ejemplo.

      • Ha hecho doble click sobre el fichero que quiere cargar (la url comienza por file:/// en lugar de por localhost).

      Para lanzar los ficheros HTML no debe hacer doble click sobre ellos, sino que debe seguir estos pasos:

       Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos

      009

      1. Arrancar el servidor.

      2. Ir a localhost con el navegador y luego a la carpeta de nuestro proyecto (en este caso eligetu-propia-aventura). Recuerde que el navegador irá a buscar directamente el fichero index. html.

      3. Navegar hasta la ubicación del HTML que quiere lanzar. Este error es muuuuuuuuy típico. Le volverá a pasar, así que guárdelo firmemente en su memoria.

      Elige tu propia aventura: Introducción

      Vamos a hacer la base para el típico juego point and click. En este caso, el protagonista debe decidir entre dos opciones que se le presentan en su vida. En la primera pantalla puede escoger entre ir a su nave espacial o volar hasta la tierra. En función de sus decisiones se desencadenarán acontecimientos que le llevarán a la gloria o al mayor de los desastres.

      Tras esta pretenciosa presentación, podemos comenzar a programar el juego. Realmente, es bastante sencillo y podremos terminarlo bastante rápido.

      IMPORTANTE

      Puede encontrar el código fuente, paso por paso, y todos los recursos (imágenes, sonidos, tiles...) que se han utilizado para realizar este juego dentro de los archivos que se ha descargado:

       Carpeta: elige-tu-propia-aventura

      Los libros de elige tu propia aventura y las novelas visuales

      Elige tu propia aventura fue una serie de libros juveniles muy popular en los años ochenta y noventa. La serie fue traducida a 38 idiomas y tubo un gran impacto, ya que logró acercar la lectura a un público nuevo.

      Por otro lado, la novela visual es un género de videojuego surgido en Japón con una gran carga de lectura. El lector va leyendo la historia y los diálogos en pantalla, como si fuese una novela. Suelen tener algún tipo de interacción con el usuario (como en el videojuego que vamos a hacer), aunque no es estrictamente necesario.

       Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos

      010

      Elige tu propia aventura: Métodos, fondos y botones

       Métodos fundamentales del juego:

      Los métodos preload y create precargan y colocan en pantalla las imágenes, respectivamente.

      • preload: la llamada al método this.load.image precarga la imagen para su posterior ubicación en pantalla. El método this.load.image recibe dos parámetros. El primero es el nombre que le asignamos el objeto para ser utilizado más adelante en nuestro código fuente. El segundo es la ruta para llegar a la ubicación de la imagen.

      • create: la llamada al método this.add.sprite coloca efectivamente la imagen en pantalla. Los dos primeros parámetros de la función son sus coordenadas x e y. El tercer y último parámetro de esta función es el nombre del objeto que vamos a colocar en pantalla y que habíamos definido en su precarga.

      • update: en este juego no necesitaremos usar este método.

      Cargamos el fondo

      Utilizando las llamadas a los métodos this.load.image y this.add.sprite vamos a ubicar la imagen de fondo en pantalla.

      Almacenaremos las imágenes que usaremos en nuestros juegos en una carpeta llamada img, que estará dentro de la carpeta donde estamos programando.

      El código this.add.sprite(480, 320, 'fondo'); coloca el centro de la imagen en las coordenadas indicadas. Como queremos que la imagen esté en el centro de la pantalla, las coordenadas serán 960/2 = 480 y 640/2=320. Esto es la mitad del ancho de la pantalla y la mitad del alto de la pantalla.

      Ahora podemos testear los dos métodos resize que vimos en el capítulo número 7 y ver sus diferencias.

      IMPORTANTE

      ¡OJO!

      No se olvide de ejecutar el juego desde localhost, no desde la carpeta donde esté almacenado

       Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos

      011

      Opción pulsada

      Cuando el usuario pulse sobre la nave espacial o la bola del mundo, evaluaremos la opción escogida para ir a la pantalla correspondiente.

      Para ello, dentro del método create, definiremos dos zonas. A continuación le muestro el código de una de ellas. El código de la otra zona será muy similar:

      Con esto habremos definido una zona cuyo origen serán las coordenadas x=140, y=10, y que tendrá un ancho de 450px y un alto de 410px (estas medidas variarán si estamos haciendo que el canvas se redimensione para ocupar toda la pantalla).

      Llamamos al método setOrigin(0) para que el origen de coordenadas de esta área se sitúe en su esquina superior izquierda y no en su centro.

      La última de las tres líneas se encarga de añadir un recuadro rojo (0xff0000) de 2 píxeles de grosor al objeto opcionNave. Esta es la forma que tenemos de poder visualizar sus límites.

      Seguimos modificando el objeto opcionNave:

      • Le asignamos un nombre, que utilizaremos después para evaluar la opción