Flash vs HTML5: El futuro de los juegos web está en disputa

La semana pasada terminé dos versiones del mismo juego: una en Flash y otra en HTML5. El de Flash me tomó 3 días. El de HTML5... digamos que todavía estoy recuperándome psicológicamente. Pero los resultados me sorprendieron, y creo que estamos ante un cambio sísmico en el desarrollo web.

Flash ha sido el rey indiscutible de los juegos web por años. Kongregate, Newgrounds, Armor Games... todos construidos sobre Flash. Pero Apple decidió declararle la guerra (gracias Steve Jobs y tu iPhone sin Flash), y ahora todos hablan de HTML5 como el futuro. ¿Pero es realmente mejor? Spoiler: es complicado.

Mi experimento: Un juego simple, dos tecnologías

El juego es simple: una nave que dispara asteroides. Nada fancy. Lo hice primero en Flash porque es lo que conozco, luego intenté replicarlo en HTML5 con Canvas.

Los resultados:

Flash:

• Desarrollo: 3 días
• Líneas de código: ~500
• Performance: 60 FPS constantes
• Compatibilidad: 98% de navegadores desktop
• Tamaño final: 120KB

HTML5:

• Desarrollo: 8 días (con mucho googling y frustración)
• Líneas de código: ~1200
• Performance: 30-60 FPS dependiendo del navegador
• Compatibilidad: Chrome sí, Firefox más o menos, IE9... jaja no
• Tamaño final: 15KB (pero sin contar las librerías)

Flash: El veterano que se niega a morir

Desarrollar en Flash es como ponerte un par de zapatos viejos pero cómodos. Todo funciona como esperas:

// Crear un sprite, añadir al stage, moverlo
var nave:Sprite = new Sprite();
nave.graphics.beginFill(0xFF0000);
nave.graphics.drawRect(0, 0, 50, 30);
stage.addChild(nave);
nave.x += 5; // Se mueve!

Las herramientas están maduras. Flash CS5 es poderoso (aunque caro como un riñón). El debugger funciona. Hay miles de tutoriales. La documentación es excelente.

Y lo más importante: funciona igual en todos lados. No importa si usas Chrome, Firefox, o incluso IE6 (que Dios se apiade de tu alma). Si tienes Flash Player, el juego se ve y juega igual.

HTML5: El futuro prometedor pero adolescente

HTML5 con Canvas es... interesante. El potencial está ahí, pero santo Dios, la implementación actual es un campo minado.

// El equivalente en Canvas
var canvas = document.getElementById("miCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(naveX, naveY, 50, 30);
// Para moverlo... tienes que borrar y redibujar TODO
ctx.clearRect(0, 0, canvas.width, canvas.height);
naveX += 5;
ctx.fillRect(naveX, naveY, 50, 30);

¿Notan la diferencia? En Flash, los objetos persisten. En Canvas, es como pintar y borrar constantemente. Es más trabajo para algo tan simple como mover un rectángulo.

Las diferencias que duelen

Audio: En Flash, cargas un sonido y lo reproduces. En HTML5, prepárate para formatos diferentes para cada navegador, timing issues, y la imposibilidad de reproducir múltiples instancias del mismo sonido simultáneamente (RIP efectos de sonido).

Performance: Flash corre en su propio plugin optimizado. HTML5 depende del JavaScript engine del navegador. Chrome vuela, Firefox va bien, IE... mejor ni hablemos.

Herramientas: Para Flash tienes un IDE completo. Para HTML5 tienes... Notepad? Sublime Text si eres fancy. Debugging con console.log como un cavernícola.

Pero HTML5 tiene sus ventajas

No todo es malo en el mundo HTML5:

• No requiere plugin (huge deal para mobile)
• Es gratis y abierto
• Se integra naturalmente con el resto de la página
• JavaScript está mejorando rápidamente
• El código es visible (bueno o malo según cómo lo veas)

El elefante en la habitación: Mobile

Steve Jobs mató Flash en iOS. Android dice soportarlo pero es una experiencia horrible. Si quieres que tu juego funcione en móviles (y en 2010, deberías quererlo), HTML5 es tu única opción.

Pero aquí está el problema: los juegos HTML5 en móviles son LENTOS. Mi jueguito de asteroides que vuela en desktop, en un iPhone 3GS parece slideshow. ¿La solución? Hacer juegos más simples. No muy inspirador.

Frameworks al rescate (tal vez)

Están apareciendo frameworks para hacer HTML5 más tolerable:

• Impact: Promete mucho pero cuesta $99
• Crafty: Gratis pero documentación limitada
• EaselJS: Intenta replicar la API de Flash en JavaScript

Ayudan, pero siguen sin resolver los problemas fundamentales de performance y compatibilidad.

Mi predicción para el futuro

Flash no va a morir mañana. Tiene demasiado contenido, demasiados developers, demasiada inercia. Pero su reinado está llegando a su fin. En 5 años, la mayoría de juegos web serán HTML5.

¿Por qué? No porque HTML5 sea mejor (todavía no lo es), sino porque:

1. Mobile es el futuro y Flash no está invitado
2. Los navegadores mejoran exponencialmente
3. Las herramientas HTML5 van a madurar
4. Es gratis y abierto (nunca subestimes esto)

¿Qué deberías aprender hoy?

Si me preguntas, aprende ambos. Flash para proyectos que necesitas entregar ya y que funcionen bien. HTML5 para experimentar y prepararte para el futuro.

Yo sigo haciendo trabajos comerciales en Flash. Pagan las cuentas y los clientes están felices. Pero mis proyectos personales ahora son en HTML5. Es frustrante, es limitado, pero es donde va la industria.

El futuro es HTML5, pero el presente sigue siendo Flash. Y en este limbo tecnológico, los developers vivimos, sufrimos, y cobramos.

¿Ustedes qué piensan? ¿Ya experimentaron con Canvas? ¿Siguen fieles a Flash? Me encantaría saber que no soy el único sufriendo con compatibilidad de audio en HTML5.