Aprender desarrollo de videojuegos para móviles y web con Phaser.js
- -
- 100%
- +
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
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
