Desagradable sorpresa: El tag "canvas" es un desastre en iOS.

Tiempo atrás publiqué un ejemplo del tag "canvas" de HTML5. En mi empresa estoy trabajando en un proyecto que incluye 3 juegos, y el primero de ellos quedó terminado hace unos días desarrollado completamente usando esta tecnología. Supuestamente, en dos semanas este primer juego será presentado en una conferencia, y resulta que la empresa que lo va a presentar piensa repartir iPads entre todos los participantes para que puedan probar el producto terminado. Cuando supimos la noticia, empezamos a probar el juego en un iPad para corregir cualquier posible detalle, y resulta que hicimos un bonito descubrimiento: el rendimiento del tag "canvas" en iOS es un desastre.

No me malinterpreten. El juego funcionaba perfectamente en iOS a no ser por algunos pequeños detalles que rápidamente corregimos. El problema principal es que, juego al fin, debido a que la interacción del usuario con la aplicación será constante y cronometrada, se requiere un nivel de respuesta muy rápido por parte de la aplicación (cada nivel del juego tiene que completarse en un tiempo determinado), y el rendimiento ofrecido por el browser está muy por debajo de un nivel aceptable. Cada vez que tocábamos la pantalla, había un lapso de casi un segundo antes de que la aplicación respondiera. La misma aplicación en una computadora normal funciona perfectamente.

Bueno, pues cabe la pregunta: ¿no será algo en nuestro código lo que está causando el pésimo rendimiento? Pudiera ser, pero no... después de crear un pequeño ejemplo donde permitíamos seleccionar una imagen dibujada en un "canvas" y probarlo en el iPad obtuvimos el mismo resultado. Toda la complejidad del juego fue eliminada, cualquier código problemático dejó de molestar, hicimos simplemente lo más simple que podíamos hacer, y aún así el rendimiento siguió por el piso.

Para no quedarnos allí, empezamos a probar el juego en varios teléfonos usando Android. Todo perfecto. El nivel de respuesta fue el adecuado, aunque obviamente no tan brillante como en una computadora. A todas luces el problema era solamente con iOS, así que el último paso fue preguntarle a Google, y si quieren, ustedes mismos evalúen las respuestas.

Ahora bien, con la conferencia encima no quedó otro remedio que empezar a eliminar el "canvas" a toda velocidad. Por suerte toda la lógica se mantiene, pero todo lo que estábamos dibujando tenemos que hacerlo ahora de otra manera. Ya en el día de ayer logré re-escribir aproximadamente poco menos de la mitad del juego, así que espero que en esta misma semana pueda prácticamente dejarlo todo listo. Una lástima realmente tener que regresar a re-programar algo que ya estaba terminado.

Lo triste de la historia es que la culpa es mía. Pudiera decir que el cliente sacó lo de los iPads a última hora, o que nadie me dejó claro desde el primer día que iOS era una prioridad, pero para ser honestos, lo que hice (o mejor dicho, lo que dejé de hacer) quedó muy lejos de ser profesionalmente adecuado. Lo primero que he hecho en mi vida con HTML5 ha sido este juego, así que tenía que haber probado antes que nada como era el funcionamiento del tag "canvas" en los diferentes browsers incluyendo los móviles. Hice las pruebas en Chrome, Firefox, Safari, e IE (en el cual no funciona - ya hablé de eso), pero pasé por alto los móviles y allí estuvo el error.

Debido a ese "pequeño" detalle que "olvidé", ahora hay que corregir lo terminado a toda máquina. Los daños no fueron tan graves, pero pudieron ser una tumba para un proyecto que hasta el momento va siendo un éxito. Casos como este nos enseñan que antes de montar el tren de una nueva tecnología, tenemos que investigar hasta la saciedad para no encontrarnos con sorpresas desagradables.