Aprender desarrollo de videojuegos para móviles y web con Phaser.js: Con 100 ejercicios prácticos
Por Pablo Monteserín
()
Información de este libro electrónico
Este manual de programación con Phaser se apoya en Javascript para explicarle, paso a paso, el desarrollo de cada uno de los 8 juegos que presenta. Los contenidos están ordenados de manera que, al llegar a los juegos más complejos, ya dominará la programación de videojuegos.
· Juegos básicos: Elige tu propia aventura y Acierta la imagen
· Juegos clásicos: Fall Down, Galería de tiro y Flappy Bird
· Juego deportivo
· Juego de carreras
· Juego de plataformas
Además, en la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá acceder de forma gratuita al código fuente de cada juego en www.marcombo.info. De este modo, tendrá a su alcance todo lo necesario para materializar los juegos sin gran esfuerzo.
Tras hacer los juegos propuestos y entender su código, podrá crear sus propios proyectos y publicarlos para que nadie se quede sin jugar.
¡Crear un juego nunca había sido tan sencillo!
Relacionado con Aprender desarrollo de videojuegos para móviles y web con Phaser.js
Libros electrónicos relacionados
Aprender VueJS con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesPrograme Juegos con HTML5 Calificación: 0 de 5 estrellas0 calificacionesEl gran libro de Angular: 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesAprender Javascript Avanzado con 100 ejercicios prácticos Calificación: 5 de 5 estrellas5/5Diseño de Videojuegos. 2ª Edición. Calificación: 5 de 5 estrellas5/5El gran libro de Angular Calificación: 0 de 5 estrellas0 calificacionesAprender jQuery con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesUnity 3D Calificación: 4 de 5 estrellas4/5HTML5 y CSS3 para diseñadores Calificación: 5 de 5 estrellas5/5PHP: Programación web avanzada para profesionales Calificación: 0 de 5 estrellas0 calificacionesEl gran libro de PHP: Creación de páginas web dinámicas (2ª EDICION) Calificación: 0 de 5 estrellas0 calificacionesAprender HTML5, CSS3 y Javascript con 100 ejerecios Calificación: 5 de 5 estrellas5/5Aprender React con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesAprender Dreamweaver CS5 con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesManual de Dreamweaver CS5 Calificación: 0 de 5 estrellas0 calificacionesVideojuegos: Construye tu empresa en 10 pasos Calificación: 0 de 5 estrellas0 calificacionesArte de videojuegos. Da forma a tus sueños Calificación: 5 de 5 estrellas5/5Aprender Dreamweaver CS6 con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesDesarrollo de aplicaciones web con Jakarta EE Calificación: 0 de 5 estrellas0 calificacionesProgramación en C# para Principiantes Calificación: 0 de 5 estrellas0 calificacionesAprender a crear su primera página web con 100 ejercicios prácticos Calificación: 5 de 5 estrellas5/5Aprender Dreamweaver CS4 con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesLEGO EV3. Programación de Robots: Robótica Calificación: 5 de 5 estrellas5/5Aprender las mejores aplicaciones para Android con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesAprender Maya 2012 Avanzado con 100 Ejercicios Prácticos Calificación: 0 de 5 estrellas0 calificacionesAprender DREAMWEAVER CC con 100 ejercicios Calificación: 0 de 5 estrellas0 calificacionesBackbone JS. JavaScript Framework. 2ª Edición Calificación: 0 de 5 estrellas0 calificacionesAprende programación de computadoras Calificación: 5 de 5 estrellas5/5Aprender Flash CS5 con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificacionesAprender Adobe After Effects CS5.5 con 100 ejercicios prácticos Calificación: 0 de 5 estrellas0 calificaciones
Internet y web para usted
Marketing en redes sociales 2021 Calificación: 5 de 5 estrellas5/5Guía De Hacking De Computadora Para Principiantes: Cómo Hackear Una Red Inalámbrica Seguridad Básica Y Pruebas De Penetración Kali Linux Su Primer Hack Calificación: 0 de 5 estrellas0 calificacionesCómo ser una Persona más Sociable: Aprende a hablar con cualquiera sin temor e incrementa por completo tu inteligencia social Calificación: 5 de 5 estrellas5/5GuíaBurros: Crear una Web en WordPress: Todo lo que debes saber para crear tu propia Web en WordPress Calificación: 5 de 5 estrellas5/5Cómo Eliminar Distracciones: Dispara tu Atención y Concentración Mental con Sencillos Métodos que Puedes Empezar a Usar Hoy Mismo Calificación: 5 de 5 estrellas5/5CÓMO MONETIZAR LAS REDES SOCIALES Calificación: 4 de 5 estrellas4/5Cómo ganar dinero con las redes sociales Calificación: 4 de 5 estrellas4/5Conquista de las Redes Sociales: 201 Consejos para Marketeros y Emprendedores Digitales Calificación: 5 de 5 estrellas5/5Habilidades de Conversación para Introvertidos: Descubre cómo interactuar socialmente cómo un extrovertido natural y a ser la persona más interesante del lugar Calificación: 0 de 5 estrellas0 calificacionesMarketing de contenidos. Guía práctica Calificación: 4 de 5 estrellas4/5Marketing de Influencers Calificación: 5 de 5 estrellas5/5El Gran Cuaderno de Podcasting: Cómo crear, difundir y monetizar tu podcast Calificación: 4 de 5 estrellas4/5Tu tienda online con Wordpress y Amazon Calificación: 5 de 5 estrellas5/5Las Estafas Digitales Calificación: 5 de 5 estrellas5/5Desarrolla tu marca personal: Todas las claves del personal branding Calificación: 3 de 5 estrellas3/57 Pasos Para Ser Un Pentester: Cómo hackear, #0 Calificación: 5 de 5 estrellas5/5Curso de Marketing Online Calificación: 5 de 5 estrellas5/5SEO Copywriting. Mejora tus textos y tu posicionamiento en buscadores Calificación: 4 de 5 estrellas4/5Cómo trabajar desde casa por Internet Calificación: 4 de 5 estrellas4/5Consejos de Redacción para los Anuncios: Cómo Escribir Publicidad que Venda Calificación: 4 de 5 estrellas4/5Curación de contenidos. Guía práctica Calificación: 5 de 5 estrellas5/5Cómo ser un buen Community Manager Calificación: 4 de 5 estrellas4/5Editor de contenidos web: Dominar la web y las redes sociales con una estrategia de contenidos Calificación: 4 de 5 estrellas4/5Publicidad en Redes Sociales Curso Práctico: Aprende cómo anunciar tu marca con Facebook, Instagram, YouTube y Pinterest Ads Calificación: 0 de 5 estrellas0 calificacionesCómo empezar un canal de YouTube: Cómo puede pasar de hacer vídeos para subirlos y conseguir suscriptores a ganar dinero Calificación: 0 de 5 estrellas0 calificacionesMarketing en Redes Sociales: Una Guía Completa Para Hacer Crecer su Marca en Redes Sociales Calificación: 0 de 5 estrellas0 calificacionesEstrategias de Marketing en Instagram Calificación: 4 de 5 estrellas4/5
Comentarios para Aprender desarrollo de videojuegos para móviles y web con Phaser.js
0 clasificaciones0 comentarios
Vista previa del libro
Aprender desarrollo de videojuegos para móviles y web con Phaser.js - Pablo Monteserín
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.
IllustrationEl 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...
IllustrationPara 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
IllustrationIllustrationEjecutar 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)
IllustrationEn 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.
IllustrationPasos a seguir en la ejecución de nuestro código Phaser:
Tras haber instalado y arrancado el servidor...
Illustration1. 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.
Illustration3. 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/
IllustrationDescargar 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.
IllustrationIMPORTANTE
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
IllustrationAprender desarrollo de videojuegos para móviles y web con Phaser.js con 100 ejercicios prácticos
003
IllustrationIllustrationEditores 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.
IllustrationPuede 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
IllustrationAtom
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