Cómo crear una mascota virtual usando HTML5 y Cordova

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 Zenva Academy.
Mis otros tutoriales de Phaser:
•How to Make a Sidescroller Game with HTML5 en HTML5 Hub.
•HTML5 Phaser Tutorial – SpaceHipster en GameDev Academy
•HTML5 Phaser Tutorial – Top-down Games en GameDev Academy
•HTML5 Mobile Game Development with HTML5 Mobile Game Development with Phaser – Curso online en Zenva 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.
Image: (CC) Laig- http://commons.wikimedia.org/wiki/File:Roti_Wrap_Trafasie.jpg
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 Zenva Academy Có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 Ripple Emulator y herramientas para testear en el teléfono.
•El Ripple Emulator se puede descargar por separado como extensión de Chrome.
•Si instalas el Android SDK y la línea de comandos de Cordova puede 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.