¿Olvidates tu contraseña?

Programación de videojuegos con HTML5 en Betabeers BCN

2013-12-07
No hay comentarios

Este jueves pasado asistí, como casi cada mes, a Betabeers Barcelona. Para quien no lo conozca, se trata de un evento orientado principalmente al desarrollo web en la que cada edición trae una charla/taller, viene gente a presentarnos sus proyectos, y por último, se hace un poco de lo que ahora se llama “Networking” (o en el caso de Betabeers, ya bautizado como Beerworking por la cerveza que se regala), que viene a ser que la gente charla un rato, se conoce y crea nexos de unión.

Entre las charlas de esta edición de Noviembre hubo una en la que tenía especial interés, con el título Desarrollo de videojuegos en HTML5 os podéis imaginar por que. Así que allí me dirigí y os vengo a contar un poco como fue.

¿Qué es HTML5?

En primer lugar lo primero en que os podéis fijar es que cada vez es más común ver este dúo entre las tecnologías web y las del entretenimiento, con eventos como el GameMe5 del que os hablamos hace poco ya vemos como hay interés comercial, y con charlas técnicas como esta, vemos que los desarrolladores también se están poniendo las pilas. Pero, ¿Que significa hacer videojuegos en HTML5? ¿Es que antes no se podían hacer?

HTML5 será el nuevo estándar de páginas web. Se trata de una especificación que hace el llamado W3C (Consorcio de las www) que decide que pueden y como deben interpretar las páginas web el código HTML. Por ejemplo, si ponemos <b>texto en negrita</b> un navegador interpreta que el texto entre <b> y </b> debe ir en negrita. Con la versión 5 llegan muchas otras funcionalidades más allá de la presentación, tenemos capacidad de reproducir vídeos, sonidos y lo que nos lleva a nuestro cometido, la nueva etiqueta Canvas.

Esta etiqueta permite, mediante código Javascript, mostrar y manipular imágenes y figuras vectoriales en tiempo real. Para que no entendamos fácil, lo que hacía Flash, pero de forma nativa, sin tener que instalar ningún plugin de terceros que, como es el caso de Adobe Flash, no funciona en todas partes (como por ejemplo los iPad y iPhone).

Desarrollando con HTML5

En su charla David Gallardo nos quiso mostrar como traspasar el desarrollo “tradicional” de videojuegos al mundo de Javascript y Canvas, pues si bien es similar en gran medida, las diferencias del medio pueden hacernos fallar en la base, pues asumiremos erroneamente algunos conceptos. Os recomiendo abrir las diapositivas de la presentación para contextualizar algunas de mis explicaciones.

COMPOSICIÓN BÁSICA DE UN VIDEOJUEGO

  • Inicialización de subsistemas y carga de Assets
  • Game loop
  • Salida del loop y fin de la ejecución

Tras el repaso de lo más básico de un videojuego vimos ya como substituimos la “pantalla” o “ventana” del juego por nuestro elemento canvas (ver diap. 2), si bien el concepto para nosotros será el mismo.

Pero rápidamente al llegar a la recogida de input (teclado y ratón, ver diap. 3), HTML5 nos lleva por otro camino, pues el elemento canvas no tiene porque ser el único elemento de una página web, y por lo tanto, debe compartir la gestión de eventos con el resto de la página.
Tradicionalmente en el Game Loop de un videojuego empezaremos recogiendo el input, actualizaremos los elementos y por último pintaremos el resultado. En nuestro caso, Gallardo propone “puentear” esto creando una capa que actualizará una estructura con el estado de los inputs en paralelo al Game Loop que sólo la consultará.

Cuando un evento salta, con Javascript podemos interceptarlo y actualizar esta estructura para que nuestro juego tenga siempre el estado de los inputs actualizado.

Otra diferencia es el sonido (ver diap. 4), si bien podemos reproducir un sonido sin hacer inicializaciones, si queremos tener varios sonidos al mismo tiempo necesitamos de un Audio Context. Debido a que actualmente HTML5 aun no está acabado (se prevé que lo estará durante 2014-2015), existen diferencias entre como implementan ciertas características los navegadores, y una de ellas es este objeto, que requiere de detectar cual usar. En un principio esto debería desaparecer cuando se cierre la especificación.

A nivel de carga de recursos (ver diap. 5), no hay un funcionamiento especial. De la misma forma, a la hora de plantear el juego Gallardo optó por un enfoque bastante conocido dentro de la programación de videojuegos orientada a objetos (ver diap. 6 a 9) . Partimos de un objeto abstracto “gameObject” y mediante la herencia crearemos todos los elementos de nuestro juego. Todos estos deben implementar dos métodos, Update (diap. 10) y Render, encargados de actualizar el estado del objeto y pintarlo por pantalla respectivamente.

Vídeo demostrativo de SmothStep2D, motor que aplica lo explicado en la charla

En cuanto al renderizado por pantalla, usaremos el contextos de Canvas2D que no será extraño para cualquiera que haya trabajado con otras bibliotecas gráficas, donde nos moveremos por el lienzo, rotaremos y pintaremos la imagen correspondiente al objeto donde corresponda.

No obstante, de nuevo nos encontramos con alguna característica un tanto especial. En el planteamiento del motor, Gallardo usa una jerarquía padre-hijos entre los GameObjects bastante común en cualquier motor.

La idea es poder tener elementos que están compuestos por otros elementos. Por ejemplo un camión podría estar compuesto por la cabina y el remolque. Cuando indicamos la posición del camión, estaremos definiendo un punto en el espacio, y cuando definimos la posición de la cabina, en realidad queremos que ésta sea relativa al elemento camión (pe. “10px por encima de la posición del camión”). Para poder hacer funcionar esto en Canvas2D debemos movernos en el contexto, guardarlo, recorrer los hijos y llamar su función render, y por último volver y continuar donde lo habíamos dejado (ver diap. 11).

Por último (diap. 14 a 16), Gallardo hace un repaso a las herramientas existentes, pues el objetivo de la charla era que viéramos las entrañas que corren bajo muchas herramientas como son SmoothStep2D (del propio Gallardo), Cocos2D-HTML5 o ImpactJs, y entendiéramos como funciona el desarrollo de videojuegos con HTML5.

Enlaces de interés:

Inicio Foros Programación de videojuegos con HTML5 en Betabeers BCN

Viendo 1 publicación (de un total de 1)

Debes estar registrado para responder a este debate.