Kitabı oku: «Aprender desarrollo de videojuegos para móviles y web con Phaser.js »

Agradecimientos:

Las ilustraciones de este libro tienen mucha alma y personalidad. Coinciden exactamente con los dibujos que yo quería para este manual.

Además, hay muchas buenas ideas para mejorar los juegos que solo pueden ser fruto de la implicación. Eso se lo debo a Wahab Zeghlache (wahab.es), mi amigo e ilustrador.

El diseño de la portada, así como la conceptualización de algunas ideas mediante un diseño explicativo (las imágenes con celos en las esquinas) y la corrección de infinidad de detalles se lo debo a Mar Serra (diproartdigital.com), mi amiga y diseñadora. Gracias a mi amiga Sofía A. Soro por pelearse conmigo (literalmente) para que me diese cuenta de cuál era la mejor forma de hacer las cosas.

Gracias a David Zapo, Marc Planas, Xavier Pintor y Nacho Iacovino por ayudarme a pulir varios aspectos del libro.

Gracias a Pablo Martínez, de la editorial Marcombo, por descolgar siempre el teléfono con voz amiga, independientemente de la hora y de la chorrada que tenía que preguntarle.

Gracias a mis padres, Mari Carmen y Antonio Monteserín, por estar ahí siempre para todo lo que necesito.

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

© 2020 Pablo Monteserín

Primera edición, 2020

© 2020 MARCOMBO, S.L.

www.marcombo.com

Diseño de la cubierta: Mar Serra (diproartdigital.com)

Ilustraciones: Wahab Zeghlache (wahab.es) [Elige tu propia aventura, Acierta la imagen, Fall Down, Galería de tiro, Flappy Bird, Pong, Carrera espacial y Plataformas] y Raúl Grabau [Mazmorras, Cupido, Selva y Fórmula 1]

Director de colección: Pablo Martínez Izurzu

Directora de producción: Mª Rosa Castillo Hidalgo

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.»

ISBN: 978-84-267-2753-4

Producción del ebook: booqlab.com

Presentación
DESARROLLO DE VIDEOJUEGOS PARA MÓVILES Y WEB CON PHASER.JS CON 100 EJERCICIOS PRÁCTICOS

Con este libro aprenderá a programar videojuegos 2D utilizando Javascript. Para ello, se ha dividido cada videojuego en varios pasos. Tiene el código fuente de cada uno de los pasos tanto en las páginas de este libro como en Internet para que lo pueda descargar. Con la compra de este libro también tendrá acceso a todas las imágenes que se han utilizado para los videojuegos. Para programar usaremos Phaser, que es un entorno de trabajo (framework) donde encontrará a su disposición gran variedad de elementos ya programados y que ha sido concebido para crear videojuegos con Javascript. Es de código abierto y tiene una comunidad muy activa que lo respalda.

Existen otros frameworks para el desarrollo de videojuegos con Javascript. En base a la experiencia del autor con el resto de frameworks, Phaser es el programa que tiene mejor relación dificultad / resultados.

A QUIÉN VA DIRIGIDO

Para poder afrontar con garantías este libro, necesita tener unas nociones básicas de programación, preferentemente Javascript. No hace falta que sea un experto, pero sí que conozca conceptos como variables, funciones, bucles o arrays.

También sería positivo que supiese algo de programación orientada a objetos.

Si ya conoce Phaser, también podrá sacarle mucho partido al libro. Los juegos que se han programado tocan conceptos y formas de hacer las cosas muy dispares, así que es probable que se encuentre con muchas ideas que enriquecerán su forma de programar videojuegos con Phaser.

LA FORMA DE APRENDER

Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre los temas tratados en los ejercicios.

LOS ARCHIVOS NECESARIOS

En la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá acceder de forma gratuita a los contenidos adicionales en www.marcombo.info.

Cómo leer los libros “Aprender...”

Gerardo tiene un amigo que se llama Pablo.

Pablo tiene un amigo que se llama Gerardo.

Índice

001 Introducción al desarrollo de videojuegos con Phaser.js

002 Ejecutar en el servidor

003 Descargar y cargar Phaser

004 Editores de código

005 Estructura básica del videojuego: El HTML

006 Estructura básica del videojuego: El Javascript

007 Redimensionado de la pantalla

008 Primeros pasos

009 Ejecutando archivos en el servidor

010 Elige tu propia aventura: Introducción

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

012 Elige tu propia aventura: Cambio de escena

013 Elige tu propia aventura: Escena nave

014 Acierta la imagen: Introducción y carga de fondo

015 Acierta la imagen: Carga de imágenes inferiores

016 Acierta la imagen: Detectar pulsaciones

017 Acierta la imagen: Generar solución aleatoria

018 Acierta la imagen: Caras inferiores aleatorias y refrescar

019 Acierta la imagen: Marcardor de puntos

020 Acierta la imagen: Temporizador

021 Acierta la imagen: Perder el juego

022 Publicación

023 Fall Down: Introducción e imagen de fondo

024 Fall Down: Misiles

025 Fall Down: Posiciones random y perder el juego

026 Fall Down: Los misiles explotan

027 Galería de tiro: Fondo y cargas de sprites

028 Galería de tiro: Sprites

029 Galería de tiro: Posición y desplazamiento

030 Galería de tiro: Disparo y animaciones

031 Flappy Bird: Carga del fondo y el héroe

032 Flappy Bird: Animación y físicas

033 Flappy Bird: Animación de saltar

034 Flappy Bird: Las tuberías

035 Flappy Bird: Colisiones y mejora de las tuberías

036 Flappy Bird: Fin de juego y fondo animado

037 Pong: Introducción e imagen de fondo

038 Pong: La pelota

039 Pong: Físicas: así, no

040 Pong: Físicas: así, sí

041 Pong: Rebote contra las paredes

042 Pong: El jugador

043 Pong: Controles visuales

044 Pong: Colisión y dos jugadores

045 Pong: Perder

046 Pong: Marcador y mejorar colisiones

047 Carrera espacial: Introducción

048 Carrera espacial: Fondo y sprites animados

049 Carrera espacial: Mover jugador

050 Carrera espacial: Controles visuales

051 Carrera espacial: Controles visuales II

052 Carrera espacial: Girar los controles visuales

053 Carrera espacial: Physics Editor

054 Carrera espacial: Integrando el JSON generado

055 Carrera espacial: Corrigiendo las posiciones de matter

056 Carrera espacial: Detectar vueltas I

057 Carrera espacial: Detectar vueltas II y poner marcador

058 Carrera espacial: Aumentar marcador

059 Carrera espacial: Evitar trampas y ganar el juego

060 Carrera espacial: Portada

061 Carrera espacial: Cargar música

062 Plataformas: Introducción, estructura y fondo

063 Plataformas: Tiled: Instalación y creación de un mapa

064 Plataformas: Tiled: Interfaz

065 Plataformas: Tiled: Dibujando

066 Plataformas: Cargar player con JSON de Tiled

067 Plataformas: Uso de clases para cargar al jugador

068 Plataformas: Carga de layers

069 Plataformas: Bounding box y movimiento

070 Plataformas: Movimiento del jugador

071 Plataformas: Animación

072 Plataformas: Saltar y caer

073 Plataformas: Controles visuales

074 Plataformas: Controles visuales II

075 Plataformas: La cámara

076 Plataformas: Añadir un enemigo 164

077 Plataformas: Enemigo con animación y movimiento 166

078 Plataformas: Enemigo inteligente 168

079 Plataformas: Enemigo muere 170

080 Plataformas: Player explota 172

081 Plataformas: Método para inserción de enemigos 174

082 Plataformas: Herencia e insertar oruga 176

083 Plataformas: Insertar avispa dando vueltas 178

084 Plataformas: Estados de la avispa 180

085 Plataformas: Avispa detecta player y lo persigue 182

086 Plataformas: Avispa ataca y vuelve 184

087 Plataformas: Avispa continúa volando, player dañado 186

088 Plataformas: El jugador sale despedido por los aires 188

089 Plataformas: Reactivar controles y llegada a meta 190

090 Plataformas: Limitando movimiento cámara 192

091 Plataformas: Perder y fin de juego 194

092 Carreras con Tiled I 196

093 Carreras con Tiled II 198

094 Carreras con Tiled: Mover y controles visuales 200

095 Carreras con Tiled: Controles visuales y colisión con pared 202

096 Carreras con Tiled: Marcadores y detectar vueltas 204

097 Carreras con Tiled: Detectar vueltas y evitar trampas 206

098 Carreras con Tiled: Evitar Trampas y fin del juego 208

099 Juegos extra: Mazmorras y fall down game 210

100 Juegos extra: Plataformas y carreras 212

Introducción al desarrollo de videojuegos con Phaser.js
¿Qué va a aprender con este libro?

Con este libro adquirirá las destrezas necesarias para poder programar videojuegos utilizando Javascript.

El creador de Phaser, Richard Davey, ha colaborado conmigo en la realización de este libro, resolviendo algunas dudas y aportando la mejor forma de hacer las cosas.

En ocasiones tengo ideas e inquietudes que quiero materializar y compartir. Al término de este libro, usted también debería poder programar sus propias ideas por medio de la creación de videojuegos. En este sentido, estoy muy agradecido a la editorial Marcombo por haberme brindado la oportunidad de compartir este conocimiento con usted por medio de este libro.

Una vez haya descargado los recursos gráficos necesarios desde www.marcombo.info y haya adquirido ciertas destrezas, podrá programar un videojuego de manera muy rápida. Lo bonito de esto es que puede utilizar estos conocimientos para transmitir ideas: imagine un videojuego de plataformas que sea su curriculum, donde va superando las diferentes fases correspondientes a los trabajos que ha tenido en su vida, o una aventura gráfica con la historia de cómo conoció a su pareja, o un juego educativo para crear buenos hábitos en los niños, o para aprender a multiplicar de una forma más divertida...

Para programar nuestros videojuegos utilizaremos Phaser, que es una librería de Javascript orientada al desarrollo de videojuegos 2D con una gran comunidad que le ayudará a resolver sus dudas y con la que usted también puede colaborar.

Una librería es un conjunto de funcionalidades que han sido desarrolladas para ser reutilizadas. Habitualmente, cuando programa un videojuego, tiene que llevar a cabo muchas tareas repetitivas. Phaser aglutina estas operaciones para que no tenga que programarlas, solo usarlas.

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

001

El código fuente de los videojuegos de este libro utiliza la tercera y última versión de Phaser.

Los videojuegos que haremos pueden ser fácilmente integrados en una página web o compilados para ser subidos a una tienda de aplicaciones móviles (Google Play, Apple Store, etc). De hecho, los programas que desarrollará en este libro están pensados para ser ejecutados en un dispositivo móvil.

Tras esta declaración de intenciones, viene la hora de ponerse manos a la obra. Este libro está lleno de retos y mi objetivo desde esta primera página hasta la última es suavizar y facilitarte el camino que implica aprender a programar videojuegos con Phaser.

Muchos de los ejercicios que propongo se repiten en el libro de diferentes formas. En el Flappy Bird, el protagonista cae por gravedad. En el juego de plataformas, también. La idea es que una vez que haya programado una mecánica una vez, preste atención para poder utilizar esa mecánica en otro contexto.

IMPORTANTE

Puede instalar en su dispositivo Android una muestra de los juegos que podrá hacer al término de este libro escaneando el siguiente código QR o yendo a:

https://play.google.com/store/apps/details?id=com.pablomonteserin.librophaser

Ejecutar en el servidor

El código fuente de los juegos que haremos en Phaser está escrito en ficheros con código HTML y Javascript. Los documentos con extensión HTML suelen utilizarse para el desarrollo de páginas web. En nuestro caso, contendrá el código fuente de nuestro videojuego. Para lanzar un fichero HTML en nuestro navegador, en general, basta con hacer doble click sobre él; de esta forma, se abrirá con el navegador que el sistema operativo tenga asociado por defecto.

Sin embargo, por motivos de seguridad, los navegadores web (Chrome, Firefox, etc) bloquean ciertas funcionalidades cuando no ejecutamos nuestra aplicación a través de un servidor. Por ejemplo, bloquean peticiones Ajax, que es un tipo de petición que Phaser usa para cargar los recursos gráficos, sonidos, etc.

Por ello, para ejecutar videojuegos hechos con Phaser no basta con hacer doble click. Para ejecutar nuestros juegos necesitamos instalar un software que creará un servidor web local en nuestro ordenador. A través del servidor web local (en adelante localhost) debemos ejecutar nuestros videojuegos.

Por tanto, para programar con Phaser vamos a instalar un servidor local. Existen varias aplicaciones que nos permiten instalar un servidor local cómodamente. Yo le propongo descargar e instalar XAMPP. Si ya conoce o quiere probar otras opciones, le dejo los enlaces de otros servidores locales:

• WAMP: http://www.wampserver.com (para Windows)

• EASY PHP: http://www.easyphp.org (para Windows)

• MAMP: https://www.mamp.info (para Mac)

En nuestro caso, instalaremos XAMPP. Pasos en la instalación de XAMPP:

1. Iremos a su página web: https://www.apachefriends.org

2. Pulsamos sobre la versión de XAMPP correspondiente a nuestro sistema operativo para descargar el instalador.

3. Ejecutamos el instalador. La instalación muy sencilla y bastará con seguir las instrucciones que nos dan e ir pulsando el botón de siguiente cuando sea necesario. Cuando lleguemos al final, tendremos un servidor local instalado en nuestro equipo.

4. Arrancamos el servidor. Si es usuario de Windows, podrá acceder al panel de administración de nuestro servidor ejecutando la aplicación xampp-control que está en la carpeta xampp.

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

002

Tras ejecutar el programa xampp-control, debemos pulsar sobre el botón de Start que corresponde al módulo de Apache. Fíjese en la captura. Está señalado con un cículo naranja alrededor del botón de Start. En la siguiente imagen ya se ve el servicio arrancado, resaltando en verde el módulo de Apache.

Pasos a seguir en la ejecución de nuestro código Phaser:

Tras haber instalado y arrancado el servidor...

1. Accedemos mediante un navegador a

http://localhost/

y se mostrará la página de bienvenida de Apache. Sin embargo, en el siguiente paso vamos a eliminarla.

2. Borramos el contenido de la carpeta:

c:/xampp/htdocs

Esta es la carpeta de su ordenador que se corresponde con la dirección:

http://localhost/

Verá que en esa carpeta hay más cosas. Le recomiendo eliminar todo su contenido. De esta forma le será más cómodo utilizar el navegador web para acceder a los juegos, ya que cuando navegue por esta carpeta verá el contenido de la misma, en lugar de la página de bienvenida de XAMPP.

3. Dentro de la carpeta htdocs vamos a crear la carpeta elige-tu-propia-aventura, en la que dejaremos el código fuente de nuestro juego. Para acceder a ella desde el navegador, usaremos la siguiente dirección:

http://localhost/elige-tu-propia-aventura/

Descargar y cargar Phaser

Para poder usar Phaser debemos seguir los siguientes pasos:

1. Descargar un fichero Javascript con el código fuente de Phaser. Para descargar este fichero, debemos ir a la web de Phaser:

https://phaser.io/

2. Una vez aquí, pulsaremos en el enlace de descarga desde Github.

3. Llegaremos a una segunda pantalla donde volveremos a pulsar sobre el enlace de descarga llamado min.js.

Con esto habremos descargado la librería de Phaser a nuestro ordenador. Debemos mover este fichero a la carpeta:

c:/xampp/htdocs/elige-tu-propia-aventura

Aquí es donde vamos a trabajar.

IMPORTANTE

Si es usuario de Windows, por defecto las extensiones de archivo no se visualizan. Así, para un fichero llamado index.html usted estará viendo en el explorador de ficheros solo su nombre sin extensión (index). Es mejor si puede ver su nombre completo, con la extensión.

Para visualizar las extensiones de ficheros en Windows 10:

Menú vista -> Panel mostrar u ocultar -> Extensiones de nombre de archivo

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

003

Editores de código

Como ya comenté en la introducción, este libro está orientado a alguien que ya tiene conocimientos de programación. Siendo así, ya tendrá un editor de código preferido y muy probablemente ese será el que deba usar para codificar los ejemplos.

No obstante, le hago unos comentarios sobre algunos editores de código interesantes:

Sublime text

Este es el editor de código que yo uso. No es de código abierto, aunque lo puede usar gratuitamente (no obstante, cada veinte o treinta veces que salves tu código, aparecerá un pop up sugiriéndote que lo compres). Aunque todos los editores que comento son muy rápidos, este es el más rápido.

Puede descargarlo en: https://www.sublimetext.com/3

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

004

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="https://www.litres.rujavascript.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="https://www.litres.ruphaser.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