Aprender desarrollo de videojuegos para móviles y web con Phaser.js
Tekst- Rozmiar: 420 str. 503 ilustracje
- Kategoria: matematykaEdytuj
Visual Studio Code
Está desarrollado por Microsoft y es de código abierto. Pienso que es más completo que el sublime text, aunque algo más lento.
Puede descargarlo en https://code.visualstudio.com
Atom
Desarrollado por la gente de github y de código abierto. Es el que menos me convence de los tres, aunque confieso que no le he dado muchas oportunidades. Para algunos de mis alumnos esta es la primera opción.
Puede descargarlo en: https://atom.io/
Estructura básica del videojuego: El HTML
Todos los juegos que vamos a realizar en Phaser parten de un una estructura, unas primeras líneas de código idénticas.
Vamos a verlo por partes. Primero veremos el fichero index.html en el que insertaremos nuestro código Javascript.
Cuando accedemos con el navegador a una carpeta en la que hay un fichero index.html, el navegador ejecuta directamente ese fichero.
A partir de entonces, aunque solo le mostraré las capturas del código Javascript, usted debe tener en cuenta que dicho código estará insertado dentro de un documento HTML como el que puede observar en la página de la derecha.
A continuación voy a comentar un poco este código, aunque en principio ya debería estar familiarizado con él.
• <!DOCTYPE html>: esta línea le indica al navegador que está leyendo un documento HTML5.
• <head>: aquí va la configuración y carga de estilos de la página. Hay dos líneas súper importantes:
· <meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximumscale=1, width=device-width” />: necesitamos poner esta etiqueta para que el juego se adapte correctamente a las dimensiones de la pantalla y para que el usuario no pueda redimensionarlo.
· <style>: dentro de esta etiqueta, los códigos CSS harán varias cosas:
- Dejar los márgenes de la página a cero.
- Poner el background de la página a color negro (black). Si el juego ocupa toda la pantalla de juego, el color de fondo de la página dará igual, pero si no ocupa toda la pantalla, deberíamos tener en cuenta cuál será el color de fondo que se verá.
- Colocar el canvas en el centro de la pantalla. El canvas es una etiqueta HTML. Es el lienzo donde se va a ir dibujando el juego que vamos a programar.
· <script src=”phaser.min.js”>: esta etiqueta cargará la librería de Phaser. Según mi código, para que la ruta sea correcta, el fichero index.html que estamos editando y el fichero phaser. min.js que hemos descargado de Internet estarán en la misma ubicación.
· <script src=”javascript.js”>: esta etiqueta cargará el fichero Javascript donde está el código que vamos a programar. Según mi código, para que la ruta sea correcta, el fichero index.html que estamos editando y el fichero javascript.js que debemos crear estarán en la misma ubicación.
Aprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
005
En este punto, todavía no es necesario que comience a escribir código con su editor. Todo esto son solo conceptos teóricos. Si comenzase a codificar y ejecutase el código, todavía no vería nada en su pantalla.
Estructura básica del videojuego: El Javascript
En el capítulo anterior vimos la estructura básica del documento HTML que va a enlazar a nuestro código Javascript. Ahora veremos este código Javascript (página de la derecha) que habitualmente cargaremos cada vez que empecemos a programar nuestros videojuegos y que irá justo antes del cierre de la etiqueta </body>). En el documento anterior, la carga de este fichero está referenciada por la línea:
<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 probablemente la ruta que hayamos escrito para cargar la librería de Phaser 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 escogida.
• Lo hacemos interactivo (setInteractive()) para que reaccione a los eventos del usuario.
• Le vinculamos el evento pointerdown. De esta forma, cuando pulsemos sobre la zona se disparará el método opcionPulsada, que puede ver al final de esta página.
Como comentaba, dentro de la clase Escena definiremos el método que se lanzará en el caso de que el usuario pulse sobre la nave. Para ello, utilizaremos el siguiente código:
Debemos escribir un código similar para la zona correspondiente a la bola del mundo.
Elige tu propia aventura: Cambio de escena
Evalúa opción
Vamos a retocar un poco el código del método opciónPulsada. Ahora, además de mostrar un mensaje de alerta mostrando el name de la opción pulsada vamos a evaluar dicha propiedad. De esta forma, si el name es nave, tomaremos un camino, en caso contrario, tomaremos otro.
Cambio de escena
Vamos a sustituir los mensajes de alerta que se 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
