Por Pablo Farías Navarro
En un mundo donde el tiempo se ha vuelto escaso ya nadie tiene tiempo para cuidar ni darle de comer a una mascota. Por alguna extraña razón (los humanos somos un poco raros) se inventaron las virtual pets,es decir, aplicaciones que simulan una mascota de verdad y permiten cuidarla y darle de comer. Todo desde la comodidad de tu móvil.
Dada la popularidad de este género, que comenzó como llaveritos “Tamagochi” y evolucionó a mega-éxitos de Android como Pou, pensé que sería interesante crear un tutorial de mascota virtual para enseñar desarrollo de videojuegos con HTML5 y Cordova, utilizando la librería de juegos de HTML desarrollo de videojuegos con HTML5 y Cordova, la cual es gratis y de código abierto.
HTML5 es una de mis áreas de especialización, y este tutorial está pensado como punto de partida para desarrolladores que nunca han creado juegos pero que quieren empezar a crear sus propios juegos móviles multi-plataforma. Pueden obtener más información sobre mis recursos educativos en mi sitio web Zenva y también pueden visitar mi curso online gratuito de Desarrollo de Juegos en HTML5.(en inglés) en mi plataforma de cursos ZenvaAcademy.
Mis otros tutoriales de Phaser:
- How to Make a Sidescroller Game with HTML5en HTML5 Hub.
- HTML5 Phaser Tutorial – SpaceHipsterenGameDev Academy
- HTML5 Phaser Tutorial – Top-down GamesenGameDev Academy
- HTML5 Mobile Game Development with HTML5 Mobile Game Development with Phaser – Curso online enZenva Academy.
Código Fuente del Tutorial
Descarga el código de este tutorial en un archivo ZIP acá. Puedes también clonarlo de Github.
Si quieres ver el producto terminado puedes verlo acá.
¿De dónde salieron las imágenes de este juego?
Todo el arte de este juego fue creado por mi Zenva y lo puedes utilizar en proyectos comerciales y no comerciales, no es necesaria la atribución. (aunque si creas el próximo Candy Crush no me quejo si me compras un Ferrari 🙂
Metas de Aprendizaje
En este tutorial vas a aprender a crear un juego sencillo de mascota virtual para Android (aunque exportable a otras plataformas también) utilizando la librería de juegos en HTML5 Phaser y Cordova
Luego de completar este tutorial estarás familiarizado (espero!) con lo siguiente:
- Trabajo con sprites, animaciones, tweens y “estados” en Phaser.
- Recepción de input del usuario en Phaser.
- Creación de un juego sencillo de mascota virtual.
- Cómo agregar Cordova en tu proyecto y utilizar el plugin de vibración del teléfono.
- Testeo de tu juego en un móvil utilizando el Intel XDK.
- Cómo construir tu aplicación para Android con y sin Crosswalk.
Aplicaciones Híbridas
Antes de mencionar los requerimientos de este tutorial y el entorno de desarrollo me gustaría hablar sobre las APP híbridas.
Una aplicaciones web común y corriente está hecha con HTML, CSS y JavaScript, más un backend o lado del servidor. Para abrirla, basta un navegador.
Una aplicación híbrida es una aplicaciones web empaquetada como aplicación nativa en un “webview”. Un webview es un componente nativo (de Android, iOS y otras plataformas) que permite mostrar HTML en el teléfono. Cordova es una libraría de código abierto que nos permite empaquetar nuestros juegos y apps de HTML5 en plataformas nativas utilizando este enfoque. Cordova nos entrega además la posibilidad de acceder a muchas API nativas del teléfono, como la cámara, acelerómetro, sistema de archivos y mucho más, de manera que podamos utilizar estas funcionalidades en nuestros juegos y apps de HTML5.
Durante el transcurso del tiempo, algunas de estas APIs se han vuelto estándares reconocidos por el W3C y son soportados por los principales navegadores (sin tener que incluir Cordova).
Mediante la creación de plugins de Cordova, se puede extender e incluir prácticamente cualquier característica nativa en nuestras apps de HTML5.
¿Cordova o Phonegap?
Esta es una pregunta que escucho muy seguido y quiero aclararlo antes de continuar. El proyecto original se llamaba Phonegap, luego la empresa Adobe compró a la empresa que estaba creando este producto, y se quedó con los derechos de la marca registrada Phonegap. El proyecto de código fuente pasó a la fundación Apache y se cambió de nombre a Cordova. Phonegap hoy en día no es nada más que Cordova + algunas configuraciones predeterminadas + servicios adicionales en la nube que ofrece Adobe.
En este tutorial hablaré sólo de Cordova, pero todo aplica también para Phonegap (porque es lo mismo!).
(No, no pasó a llamarse Cordova porque los desarrolladores eran de Argentina. Se llamó de esta manera porque es el nombre de la calle donde tenían su oficina).
Requisitos de este Tutorial
Este tutorial asume conocimientos básico-intermedios de JavaScript. Si no sabes JavaScript o sientes que necesitas un reforzamiento puede ver nuestro curso online en ZenvaAcademyCómo Programar para Emprendedores – JavaScript que cubre
No se necesita de experience previa con Phaser, desarrollo de juegos, Cordova ni Android.p>
Los juegos creados con Phaser no se puede ejecutar simplemente haciendo doble click en el archivo index.html. Para ejecutarlos necesitas de un servidor local. Si dejas de lado el uso de Cordova, te basta cualquier alternativa de servidor web: WAMP para Windows ,MAMP para Mac , Python simple HTTP server o el paquete http-server de Node.js.
El juego que construiremos utiliza el plugin de Vibración de Cordova de manera que el teléfono vibre cuando hacemos girar a la mascota virtual. Cuando corras este ejemplo en tu computador éste no vibrará, pero el juego no se caerá y funcionará bien, por lo que puedes correrlo desde cualquier navegador.
Para correr juegos que utilicen Cordova, éstas son algunas alternativas:
- El Intel XDK viene con Cordova, el emulador RippleEmulator y herramientas para testear en el teléfono.
- El RippleEmulator se puede descargar por separado como extensión de Chrome.
- Si instalas el Android SDK y la línea de comandos de Cordovapuede utilizar el emulador y el resto de las herramientas de Android.
En este tutorial vamos a utilizar el Intel XDK ya que nos permite emular, construir y testear en el teléfono sin tener que instalar SDKs o líneas de comando. El XDK también se puede utilizar como editor de código ya que incluye el editor Brackets. En mi caso yo prefiero desarrollar con Sublime Text.
Desarrollo de Juegos con HTML5
A lo largo de la historia humana, cada vez que aparece una nueva tecnología (la electricidad, los computadores, Internet) siempre habrá alguien con mucho tiempo libre que creará un juego con esta nueva tecnología. HTML5 por supuesto no fue la excepción.
Se pueden crear juegos sin ninguna librería adicional, utilizando solamente HTML y JavaScript, pero este camino es recomendado sólo si quieres crear una librería de juegos en vez de un juego. La mayoría de las cosas necesarias para crear un juego (mostrar imágenes, animar, mover una imagen, input del usuario, etc) ya han sido empaquetas en cómodas librerías. Quienes hemos participado en el desarrollo de estos frameworks nos aseguramos que todo lo anterior funcione para que tú te concentres en tu juego y no en las herramientas.
En un mundo ideal los frameworks de juegos se podrían tratar como una “caja negra”, es decir ignorar su interior. Pero en el mundo real si vas a crear juegos de HTML5, debes entender cómo fuciona tu framework.
Si te familiarizas con el código fuente de la librería que estás utilizando, tendrás una enorme ventaja al momento de trabajar en tus juegos. Como estamos hablando de última tecnología, no todo está en Google ni en StackOverflow. Aprender cómo funciona tu framework te ahorrará mucho tiempo y dolores de cabeza.
Algunos frameworks populares, gratis y de código abierto son Phaser, Quintus, MelonJs, Crafty, Babylon.js para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados. Phaser tiene una de las communities para juegos en 3D. Yo utilizaré Phaser en este tutorial porque es adecuado tanto para principiantes como para usuarios más avanzados. Phaser tiene una de las
Antes de Comenzar – Ten todo esto listo!
Como siempre, estoy transformando un simple tutorial en un ebook de proporciones faraónicas, pero así me gusta escribir así que resumamos todo lo que he mencionado hasta ahora. Ten lo siguiente listo para comenzar:
- El Intel XDK o alguna otra opción para desarrollar apps híbridas
- Descarga el código fuente e imágenes del tutorial..
- Descarga Phaser
- Mantén abierta la documentación de Phaser durante todo el tiempo
