IndieDev: CocoonJS e Intel XDK, rendimiento en Android/iOS de un juego HTML5

Luego de una semana santa que pareció eterna, otra vez es miércoles y es hora de escribir un poco sobre el vídeo juego.

Como comenté en un post anterior existen varias herramientas para empaquetar un proyecto web en una aplicación móvil nativa, lamentablemente siendo este el caso de un canvas el performance en la mayoría de estas herramientas como phonegap no nos presta la fluidez suficiente, para esta tarea las opciones mas optimas son CocoonJS o Intel XDK

CocoonJS

CocoonJS tiene en sus haberes una tecnología llamada Canvas plus, es una maquina virtual de javascript que optimiza al máximo el rendimiento de nuestra aplicación HTML5.

La manera de utilizarlo es muy sencilla, lo primero es crear una cuenta en su sitio web http://cocoon.io, luego debemos descargar una plantilla de ejemplo (tienen plantillas para varias librerías y frameworks) y empezar a trabajar nuestro proyecto en la carpeta WWW que trae la plantilla.

El punto negativo de Canvas plus es que no permite el acceso al DOM, no podrás manipular divs u otros componentes mas allá del canvas.

Ambiente de desarrollo y debug

Una vez tengamos nuestro código en la plantilla de CocoonJS es hora de probarlo, y seguramente tendremos errores que debemos depurar, para esto utilizaremos otra herramienta de Ludei, Cocoon Developer App.

Lo primero es comprimir la plantilla que bajamos en un archivo ZIP y pasarlo a nuestro celular, luego ejecutamos Cocoon Developer App y buscamos el archivo ZIP, si el archivo es correcto saldrán 3 opciones para ejecutarlo, Webview, Webview+ y Canvas+, seleccionamos Canvas+ y seguidamente nuestro proyecto se lanzará en un entorno de desarrollo donde tendremos a disposición una consola similar a la de chrome con logs, errores y alertas.

Despliegue en producción

El proceso de llevar nuestra aplicación a producción se hace a través de la página de CocoonJS, debemos crear nuevamente un archivo ZIP y subirlo a http://cocoon.io para hacer la compilación en sus servidores.

En su plataforma tenemos opciones para añadir plugins, keys, editar el config.xml y otros parámetros, CocoonJS por defecto nos agregar un splash screen con su logotipo, si queremos remover este elemento debemos pagar 500 dolares.

Intel XDK

Por otro lado está intel XDK, una herramienta gratuita que a través de Crosswalk nos permite mejorar el rendimiento de nuestra aplicación, podemos descargarla de https://software.intel.com/en-us/intel-xdk, luego te pedirá un registro para poder utilizarla.

La única desventaja es el tamaño final del proyecto que suele partir desde los 25MB en comparación a 5MB de CocoonJs + Canvas plus, con respecto al rendimiento ambas herramientas ofrecen una fluidez similar.

Ambiente de desarrollo y debug

Aquí Intel XDK se lleva el premio, el desarrollo en su plataforma es absurdamente sencillo, conectas tu dispositivo, seleccionas la opción Run my app y automaticamente Intel XDK instalará los componentes necesarios y lanzará la aplicación.

Lo que más me sorprendió fue su opción de debug remoto que te permite abrir una pestaña de chrome en tu PC donde se sincroniza en tiempo real todo lo que ocurre con la aplicación que corre en tu celular, debes probarlo para entender el alcance de esta herramienta, realmente es increíble!

Despliegue a producción

Intel XDK nos facilita mucho el trabajo de llevar nuestra aplicación a producción, tiene opciones para manejo de plugins, cambiar iconos, keys y publicación directa en las tiendas de Google Play, Amazon Store y App Store.

CocoonJS o Intel XDK?

Depende de lo que estés haciendo.

Usa CocoonJS cuando

  • Quieras exigirle el máximo a tu aplicación como por ejemplo usar 3D.
  • No necesites usar el DOM.
  • Pagar 500 USD no sea un problema.
  • Tu aplicación final deba ser ligera.

Usa Intel XDK cuando

  • Tu aplicación este orientada también a dispositivos windows
  • Necesites acceder al DOM de tu documento.
  • El presupuesto sea limitado

Les comparto una captura de pantalla de cada plataforma, los números en verde son los FPS.

En conclusión es totalmente viable y sencillo portar un juego HTML5 a dispositivos móviles obteniendo un rendimiento aceptable.

Si quieres seguir todo el proceso que ha tenido el desarrollo de este juego puedes ver las otras publicaciones aquí, subo una actualización cada semana.

¡Hasta el próximo miércoles!