23 de Marzo, 2014

Flax para Android

He publicado mi juego para Marzo del reto one game a month, esta vez un port de Flax para móviles corriendo Android (4.0 o posterior).

Mi experiencia con Android hasta el momento había sido un par de intentos (inclyendo compra de libros) para programar aplicaciones usando el SDK oficial, pero sin mucho interés (ni resultados :D), así que me he tenido que inventar soluciones a los problemas que me he ido encontrando.

Flax en Android

En primer lugar Flax es un juego HTML para jugar en un navegador, pero en el escritorio, así que tuve que adaptarlo a la plataforma móvil.

Para empezar tuve que cambiar cómo se dubuja el juego para poder soportar diferentes tamaños de pantalla y diferentes proporciones. En un escritorio es aceptable que no se utilice toda la pantalla (especialmente en un juego como Flax, donde la acción es vertical), pero en un dispositivo móvil donde la pantalla puede ser bastante pequeña hay que cambiar de estrategia. Además hay multitud de tamaños de pantalla y dispositivos ejecutando Android así que tuve que buscar una forma de que más o menos el juego se viera igual en todas ellas.

Al final no es tan complicado jugando un poco con CSS y detectando la orientación del dispositivo (el juego no funcionará en modo apaisado).

La siguiente diferencia evidente son los controles. El juego original se puede controlar con el teclado o, en caso de ser un navegador Chrome, con un gamepad (tengo uno USB de esos baratos y funciona genial), pero ninguno de estos controles está disponible en un dispositivo Android (no estoy seguro en la parte del gamepad, así que he dejado el soporte por si acaso).

En este caso me empapé de la especificación de los eventos touch y programé un joystick virtual que intenta simular un control analógico: touch-joystick-js (lo he publicado como Open Source).

La idea es que cuando el usuario pulse la pantalla, la nave disparará, y dibujaremos una referencia de la posición del joystick para dar información al usuario (aparte del hecho de que la nave se moverá, claro). Como el dedo del usuario puede molestar para ver la acción, en cualquier momento se puede levantar el dedo para pulsar en otra parte de la pantalla y tener el joystick de nuevo.

No sé si es la mejor forma de implementar este tipo de controles, pero funciona y el juego es bastante jugable.

De todas formas he tenido que ajustar la dificultad porque los controles táctiles son menos precisos que el teclado o que el gamepad, así que algunos enemigos resistirán menos impactos o dispararán con menos frecuencia (esquivar algunos de esos proyectiles puede ser complicado en la pantalla reducida de un móvil).

Mi idea original era utilizar Apache Cordova (aka Phonegap), pero finalmente no pudo ser por un fallo conocido en Kit Kat que desactiva la aceleración por hardware en los componentes que usa Cordova para ejecutar las aplicaciones web (bug 315111).

Estuve a punto de desistir porque, debido a ese problema, no obtenía más de 1 ó 2 frames por segundo, mientras que el juego iba más rápido que en mi portátil si usaba Chrome para Android (en serio :o).

Finalmente la solución vino de la mano de otro proyecto: Crosswalk; que proporciona la misma funcionalidad que Cordova, pero incluye su propio runtime basado en Chromium en lugar de usar un componente WebView del sistema. Por ahora está un poco verde y tiene el inconveniente del tamaño de las aplicaciones, junto al hecho de que tienes que distribuir un componente nativo (el runtime), pero la velocidad y la funcionalidad del entorno es el esperado :).

Así que aquí está: Flax para Android, mi juego de Marzo ;).

Anotación por Juan J. Martínez, clasificada en: programming, javascript, 1gam.

Hay 2 comentarios

Gravatar

Osea que con Crosswalk podemos “portar” de forma más o menos exitosa aplicaciones en html5+css+js (canvas incluído) a Android. Por lo que veo en mi dispositivo, Flax ocupa aproximadamente 52Mb.

Por otro lado tenemos el SDK de Android, que juzgando por esta entrada, no te ha llamado demasiado la atención.

Entiendo que si tuvieras que recomendar un camino para la creación de un juego Android ¿te irías por el que has escogido para Flax?, ¿o lo ves más como la mejor forma de pasar un juego de escritorio a móvil?.

Dicho de otra forma, en base a tu experiencia, si tuvieras en mente algo específico para Android, ¿repetirías este ciclo o le darías otra vuelta distinta?.

por r0sk, en 2014-03-24 09:25:12

Gravatar

Si no tienes requerimientos de aceleración por hardware (canvas, transformaciones 3D, WebGL), yo recomendaría Cordova porque ocupa menos espacio y…. funciona. Además el bug de Kit Kat se corregirá.

El port de Flax ha sido bastante rápido (¿unas dos semanas a ratos?), comparado con desarrollar el juego completo en Enero; es la mitad de tiempo. Así que en este caso mi objetivo era reutilizar el código que ya tenía.

Si tuviera que hacer algo específico para Android (sin soportar ninguna otra plataforma; porque con Cordova podría tener Flax para iOS, etc), dependería del proyecto. El SDK oficial tiene la pega de que la emulación es muy lenta (y además en Linux no hay opciones para mejorar el tema con Intel + HAXM), así que usaría libgdx que permite correr el mismo código en el escritorio.

De todas formas cuando probé libgdx lo que más me tiró para atrás fue usar Eclipse (bueno, y Java). Los resultados son excelentes, eso sí :)

por Juanjo, en 2014-03-24 09:39:45

Los comentarios están cerrados: los comentarios se cierran automáticamente una vez pasados 30 días. Si quieres comentar algo acerca de la anotación, puedes hacerlo por e-mail.

Algunas anotaciones relacionadas: