mostraban en el paso anterior por cargar la escena que corresponda:
Debemos definir las escenas que vamos a cargar:
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
012
El método this.scene.start recibe como parámetro de entrada el identificador de la escena que vamos a cargar. Este identificador debe ser indicado en el constructor de la escena que queremos cargar.
El constructor de una clase es el código que se ejecuta al instanciar dicha clase.
Y en la constante config debemos haber definido que vamos a cargar estas escenas.
Elige tu propia aventura: Escena nave
Si el usuario decide tomar el camino de ir hacia la nave, volverá a tener dos opciones. Puede atravesar la puerta que le lleva a una lucha encarnizada contra el jefe final del juego, o ir a la tierra.
Esta escena es prácticamente igual a la escena inicial; volvemos a tener dos zonas interactivas que determinarán la escena que vamos a cargar. Después de hacer las modificaciones pertinentes, la clase EscenaNave nos quedaría así:
Ya solo faltaría añadir la escena del monstruo final. Deberíamos activar esta escena en el caso de que el jugador pulse sobre la puerta de la izquierda en la escena de la nave. Dejo en sus manos desarrollar el código fuente de la EscenaMonstruo. Tenga en cuenta que es muy similar al código fuente de la EscenaHome ya que allí termina el juego y nuestro personaje es comido por el monstruo.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
013
Finalmente, no se olvide de añadir la EscenaMonstruo a la propiedad scene del config.
scene: [Escena, EscenaNave, EscenaHome, EscenaMonstruo],
Acierta la imagen: Introducción y carga de fondo
Introducción
En este juego tendremos una imagen grande centrada horizontalmente en la parte superior de la pantalla y otras tres imágenes en la parte inferior. Una de ellas coincide con la superior. Debemos pulsar sobre la imagen de la fila inferior que coincide con la imagen superior.
Haciendo algunas variaciones en este juego, podríamos programar el típico juego de los topos, en el que estos animales van saliendo de su correspondiente madriguera y hay que golpearlos antes de que pasen cierto tiempo en la superficie.
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 en los archivos que ha descargado:
Carpeta: acierta-imagen
Cargar fondo
El siguiente código se ocupa de cargar la imagen de fondo en la escena. Es muy similar al que usamos en el anterior juego de Elige tu propia aventura.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
014
Acierta la imagen:
Carga de imágenes inferiores
Lo que hemos hecho en el código anterior es:
• Dentro del método preload:
1. Redimensionamos el área de juego para que ocupe el 100% de la pantalla del dispositivo.
2. Añadimos un listener que escuche constantemente cuando redimensionamos la pantalla, para, en caso de hacerlo, volver a llamar al método resize que volverá a redimensionar la pantalla.
3. Precargamos las cuatro imágenes que pondremos en pantalla cuando llamemos al método create. En este caso, precargamos las imágenes fondo, caraIMG0, caraIMG1 y caraIMG2. También vamos a precargar caraIMG3, ya que más adelante la utilizaremos cuando carguemos las imágenes inferiores de manera aleatoria. Tenga en cuenta que aunque, por ejemplo, caraIMG0 identificará al recurso gráfico que hemos cargado, no tiene por qué coincidir con el nombre de la foto.
• Dentro del método create:
1. La primera línea se encarga de colocar en pantalla la imagen de fondo del juego.
2. Las tres siguientes colocan en pantalla las imágenes correspondientes a caraIMG0, caraIMG1 y caraIMG2.
3. Los tamaños con los que se habrán insertado estas imágenes en pantalla son demasiado grandes. Esto es porque las imágenes que le he pasado tienen un tamaño pensado para la televisión de arriba y no para las tres televisiones de abajo. Por tanto, habrá que redimensionarlas para ajustarlas a las televisiones inferiores llamando al método setScale.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
015
Конец ознакомительного
