Miércoles, 4 de Febrero de 2015

Cómo crear una mascota virtual usando HTML5 y Cordova

En esta entrega de los posts de Intel orientados al desarrollo móvil, emprendemos la creación de una app estilo “Virtual pet”.

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.

intel post 1

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:

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.

intel post 2

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.

intel post 3

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:

 

Continúa leyendo aquí sobre el desarrollo juegos móviles con HTML5 y Cordova. Para más información, puedes ingresar a la Zona para desarrolladores de Intel

TAGS

Más artículos de esta serie Ver más

Hace 3 años

Descarga de Multi-Media Sample Framework para Android

Multi-Media Sample Framework para Android permite decodificar múltiples secuencias de video simultáneas y luego mostrarlas por medio de la API de gráficos 3D OpenGL* ES 2.0. Les presentamos 5 ejemplos para desarrolladores Android.

Hace 3 años - 1 Comentario

Creación de juegos multiplataforma con Cocos2d-x

En esta guía mostraremos cómo crear un juego sencillo con el uso del marco de trabajo Cocos2d-x en un entorno de desarrollo Windows y cómo compilarlo para que se ejecute en Windows 8 y Android.

Hace 4 años - 3 Comentarios

Intel y Unity se unen y despiertan entusiasmo

Hay solo una palabra que puede describir lo que sentimos acerca de la recién anunciada colaboración entre Intel y Unity*: ¡HURRA!
Bueno, quizá dos: ¡HURRA, HURRA!

Hace 4 años - 7 Comentarios

Por qué los usuarios desinstalan aplicaciones

Los desarrolladores a veces se enfrentan con un problema desmoralizador: los usuarios dejan de usar sus apps. En este post se analizan los factores que influyen en la desinstalación de aplicaciones.

Últimos lanzamientos Ver más

  • Alejandro Caro

    Falta un tutorial de cómo crear digimons (archivos de animación con extensión .mon)

  • Alejandro Caro

    Falta un tutorial de cómo crear digimons (archivos de animación con extensión .mon)

  • Martin Guillermo Acosta

    muy buen aporte!

    un proyecto que esta andando muyyyyy bien como alternativa a cordova es crosswalk!! la verdad que la webview que ofrecen es impresionante!

    lastima que un juego usando crosswalk te va a ocupar minimo 20 mb, peero…es un juego, los juegos tienden a ser pesados.

  • Interesante, sin dudas las webapps estan ganando terreno rápidamente gracias a las facilidad de HTML5, CSS3 y el deployment multiplataforma que se hace en cuestión de minutos.

    • Antonio mexicano

      Estoy contigo, soy un enamorado de HTML, CSS Y JavaScript.
      Saludos desde México

      ¡¡¡¡¡ NOS FALTAN 43 !!!!!

  • Pingback: Cómo crear una mascota virtual usando HTML5 y Cordova | DoYouFeelApp()

  • Pingback: Cómo crear una mascota virtual usando HTML5 y Cordova | TecnoticiasDigitales()