Juegos HTML5, un invento con muchas posibilidades

El lenguaje HTML5 o Hypertext Markup Language es la quinta revisión importante del lenguaje básico HTML. Tras los códigos clásicos HTMLS y XHTML, llegó esta versión que se convirtió en la oficial en 2014. Es un sistema que funciona muy bien en cualquier navegador, siempre y cuando estos estén actualizados, ya que en las versiones antiguas no reconocen sus nuevas etiquetas.

Una de las ventajas principales y más obvias de este lenguaje es que trabaja en cualquier dispositivo moderno, independientemente del sistema operativo, y si bien hay que plantearse durante el proceso de desarrollo cómo se verá en los diferentes aparatos, es mejor eso que tener que portear el juego cada vez. Por esa razón, y porque además es un sistema que no requiere instalar complementos, por lo tanto, se pueden disfrutar casi en cualquier plataforma de forma sencilla, se ha convertido en uno de los códigos más extendidos en cuanto a desarollo de videojuegos en los últimos años. Además, cuenta con el apoyo de las más grandes compañías del mundo tecnológico: Google, Microsoft y Apple ya han manifestado su total respaldo a HTML5.

Otra característica interesante de este lenguaje es que puede combinarse con otras tecnologías, para sacarle mayor provecho, como Javascript, lenguaje en el que se han escrito frameworks con clases exclusivas para videojuegos, útiles para agregar características como detección de colisiones, animaciones multicapa y acceso a la aceleración por hardware. Existen muchas formas de crear juegos pequeños para ordenadores o móviles. Una de ellas es la de crear juegos multiplataforma. Existen varias librerías especializadas en programación de juegos HTML5 y Javascript, que incorporan caracerísticas útiles como el manejo de sprites, movimientos, fondos, colisiones, velocidad, gravedad, etc.

Por otro lado, algunas ideas a tener en cuenta cuando se programan juegos HTML5 es primero la distribución de estos. Si bien es un área considerada por muchos como una debilidad, hay que ser conscientes de que siempre se piensa en ellos desde el punto de vista de juegos de móviles, cuya única opción para distribuirse es la store. Sin embargo, los HTML5 tienen la opción de utilizar el poder de los hipervínculos. Los enlaces se pueden compartir fácilmente a través de la web y de los móviles. La tecnología existe no sólo para enlazar tu juego, sino también para saltar a un determinado punto en el tiempo, intentar batir a un amigo o jugar a tiempo real contra el. Utilizar todas esas posibilidades es inteligente e interesante. Además el HTML5 facilita una mayor rapidez en el desarrollo del juego, no hace falta esperar para actualizar o quitar bugs. Una vez que el juego está hecho puedes sacar la actualización inmediatamente.

Asimismo, otro tema importante a tener en cuenta son los motores de juego. Estos se encargan a menudo de todo tipo de tareas tediosas del diseño, muchos trabajan con recursos, input, físicas, audio, mapas sprite o animaciones. En general, varían un poco de unos a otros, los hay que son bastante simples y otros que tienen incluso un editor de nivel 2D y herramientas anti bugs. En cuanto a la decisión de si utilizar o no un motor, es algo muy personal, pero es importante recalcar que casi siempre estos reducen el tiempo necesario para logar un juego completamente funcional. No obstante, hay quienes prefieren crear todo desde cero. En cualquier caso existen numerosos motores de juego HTML5, lo cual en parte es bueno y malo, hay muchas opciones pero un buen porcentaje de ellos ya han parado de ser mantenidos y actualizados, o dejarán de serlo en breve. Por tanto, es imprescindible elegir siempre uno que sea constantemente puesto al día y mejorado con el paso del tiempo.

Algunos ejemplos de motores son:

• Construct 2

• ImpactJS

• EaselJS

• Game Maker

• Three. js

También es importante hacer hincapié tanto en la retención de usuarios como en la monetización de los juegos. Hacer que un juego funcione es sólo la primera parte de la ecuación, porque la idea es que los usuarios jueguen más tiempo, vuelvan posteriormente, se lo cuenten a sus amigos e incluso compren algo. Hay muchos elementos que se centran en estas áreas, como las cuentas de usuario, puntuaciones altas, logros, integración social y pagos in-game. En la mayoría de los casos estas partes son faciles de implementar, pero a menudo suele haber problemas entre plataformas y otro tipo de dificultades que a veces se pasan por alto.

En cuanto al rédito económico, existen varias maneras de lograrlo pero no todas son igualmente fáciles de llevar a cabo. En primer lugar están las compras in-game, es decir, dentro del juego. De momento es una opción poco explotada por los Juegos HTML5 puesto que por ahora no tienen un contenido de calidad suficiente ni buenas mecánicas como para que el jugador compre items extras. Pero este es el modelo de negocio con mayor potencial. Por otro lado, están las licencias. Lo más utilzado hoy en día y práctico para portales de juegos flash, con bastante tráfico orgánico pero que, como no pueden monetizar sus propios juegos, lo solucionan comprando aquellos de licencia no exclusiva para ofrecerlos a sus visitantes. Y, por último, está la publicidad. Es la solución intermedia, fácil de implementar, se elige el anuncio y la red, y se añade rodeando el juego o en varias partes de parada de este. Además, es más fácil que conseguir pagos dentro del juego y tiene un potencial de crecimiento mayor que las licencias.

Herramientas de desarrollo interesantes:

• stats.js: monitor de rendimiento Javascript. Muestra el framerate y el rendimiento del juego a largo plazo

• socket.io: ofrece comunicación cliente-servidor a tiempo real

• pixi.js: un lienzo y motor de renderizado WebGL

• CocoonJS: mejora el rendimiento HTML5 en iOS y Android, con un lienzo acelerado unido a OpenGL. 

Para acabar, os ofrecemos una lista con algunos trucos e ideas interesantes a tener en cuenta en el desarrollo de HTML5:

1. Investiga a tu audiencia: mira a tu nicho de mercado demográfico y averigua qué dispositivos utilizan, si tienes métricas que te ayuden para conocerlos más úsalas. Y, finalmente, ofrece una solución a la adaptabiliad de tu juego.

2. Diseña con tu tecnología en mente: las limitaciones de fragmentación en HTML5 hacen este punto más pertinente de lo normal.

3. Familiarízate con caniuse.com: herramienta para chequear rápidamente el apoyo a alguna característica HTML5 que quieras usar.

4. Usa dispositivos no sólo simuladores: los simuladores ayudan en el proceso de desarrollo, pero para tener una idea más certera de qué tal va tu juego pruébalo en todos los dispositivos que puedas.

5. Ve por delante del landscape: HTML5 está constantemente cambiando y sus dispositivos de apoyo también. Por eso, debes estar al tanto de estos avances a medida que se van produciendo.

6. Mantente ágil durante el desarrollo: lo que funciona hoy, no lo hará mañana. Lo que no está disponible hoy, puede estarlo pronto. Permítete flexibilidad para adaptarte a los cambios.

7. Escala tu funcionalidad: un aproximación primaria al móvil no es sólo una gran idea para el diseño web tradicional. Busca maneras de crear una buena experiencia en móvil, y luego haz capas en funcionalidad, y efectos para otras plataformas mientras lo permitan.

8. Hazlo sencillo: testea los límites y fuerza las capacidades, pero recuerda que trabajas con una tecnología muy nueva, y un proyecto demasiado ambicioso sólo te causará problemas.

9. Ten en cuenta cuánto tiempo quieres que tu juego sobreviva: las capacidades cambian y el contenido pronto se queda obsoleto. Si tu intención es hacer que tu juego sobreviva durante una buena temporada, recuerda que pasado un tiempos deberás volver, arreglar bugs y actualizarlo.

10. Testear: es muy importante testear en cada aparato que sea posible, en todas las versiones al alcance, y todas las veces que sea necesario.