Cómo se crea un videojuego html5

hace 8 años

Los creadores de War Games: Space Dementia revelan todos los secretos de la creación de un juego html5.

Un caballero del espacio exterior sobre su nave te incita a jugar y en cuanto te decides, te ves de repente, manejando una nave espacial, sorteando proyectiles y disparando a tus atacantes, que no son pocos. Así empieza el nuevo juego html5 de la web de videojuegos Spritted, titulado War Games: Space Dementia.  “La idea surgió porque quería hacer un juego de temática Arcade de acción. Me gusta mucho el juego Robotron 2084; me parece sencillo y divertido así que pensé en inspirarme en él”, explica Eduardo Ortega, jefe de proyecto de Spritted, que ha querido revelar todos los secretos y, junto a su equipo, ha explicado cómo proceden para la creación de un videojuego.

Eduardo, que se describe como “un apasionado de los videojuegos al que le gusta la jugabilidad sencilla y directa que proporcionan los juegos clásicos”, tuvo la idea de crear War Games: Space Dementia como un “juego Arcade, sencillo y llevable”. La primera etapa en el proceso creativo de un videojuego es tener una idea y una vez decidida se pasa al guion, es decir a determinar de qué va a tratar el juego. Para ello, el equipo que va a darle vida a este nuevo juego debe juntarse y establecer un plan a seguir.

“Una vez que tengo claro qué tipo de juego queremos, nos reunimos y esbozamos una idea general de lo que va a ser el juego”, explica Ortega. Junto con él trabajan un programador y un diseñador. Este último elabora primero un esquema de la interfaz de usuario, es decir el menú, los botones y las transiciones entre pantallas. También se encarga de la experiencia de usuario, que consiste en “desarrollar todo ese flujo de pantallas y eventos de manera intuitiva y amigable para el usuario” según cuenta Ortega.  Y finalmente el desarrollo del juego, es decir las pantallas, los enemigos, los ítems, etc., y todo esbozado de una manera general. Una vez el diseñador realiza todo eso y se lo presenta a Eduardo, éste da el visto bueno y se pone en marcha el resto: los bocetos del diseñador y los primeros códigos del programador.

Pasión e inspiración, musas del diseño de videojuegos.

Daniel Peña es el encargado de crear los personajes y darle forma física a las cosas dentro de un juego. El diseñador de Spritted había trabajado antes en agencias de publicidad pero su pasión por los videojuegos hizo que acabará diseñándolos. Este joven de Valladolid cuenta que la idea para diseñar War Games: Space Dementia le vino al escuchar una canción de los años ochenta: ‘Avalon’ de Roxy Music. A raíz de ese título y una vez tuvo el visto bueno de Eduardo Ortega, decidió crear los personajes entorno a la leyenda del Rey Arturo y los caballeros de la mesa redonda.

El título inicial del juego iba a ser Defenders of AVA, pero pensó que quizás la referencia se entendería al grupo nórdico de música pop ABBA y se cambió a Knights of Space para no crear confusiones. Sin embargo, se acabó eligiendo el título actual por temas comerciales. “El título Knights of Space era un pequeño homenaje a Guardianes de la Galaxia de Marvel” explica Peña, quien también ha confesado haber integrado ese pequeño guiño en el diseño del logo.

primeras ideas

El proceso del diseño es, sorprendentemente, bastante clásico. Daniel solo necesita papel y lápiz para crear sus bocetos, y una vez tiene clara la idea y está satisfecho, escanea los resultados y los pasa a Illustrator. Este programa de Adobe permite digitalizar las ilustraciones que ha creado. Ilustraciones que han sido inspiradas, recordémoslo, por el Rey Arturo. “K1-ARZ a bordo de su nave XK-LIBUR debe defender los 3 sectores que rodean KM-LOT”; así relata Peña el argumento de War Games: Space Dementia y explica que K1-ARZ es la versión galáctica de King Arthur.

También revela que la inspiración estética para este juego le vino por parte del ilustrador y padre del personaje de cómic Hellboy, Mike Mignola, y de sus característicos tonos contrastados, la escasez de color y los polígonos con los que suele trabajar. Además de la influencia de juegos clásicos de Arcade de los años ochenta como Tron, Asteroids o R-Type.

La programación, el esqueleto de un videojuego.

Centrándose en su pasión por la jugabilidad sencilla, Ortega le propuso al programador su idea de crear un videojuego de supervivencia simple y de una sola pantalla. David Santín cuenta que lleva haciendo juegos desde que tenía once años y es ahora el programador de videojuegos de Spritted. Su pasión nació a través del juego de 1986, Phantomas, programado por un español.  "Después de jugar a ese juego, cuando era pequeño decidí que si uno podía yo también", recuerda David cuyo nick de programador es Phantomas como homenaje al juego.  Cuando el jefe de proyecto le encargó a este joven madrileño que hiciera un juego inspirado en Robotron 2084, enseguida le vino a la mente el juego Smash TV.

A David siempre le ha gustado este clásico juego de Arcade y sucesor de Robotron 2084, así que decidió seguir con la dinámica de Smash TV para crear War Games: Space Dementia. Robotron salió en 1982 y el objetivo del juego era eliminar a los robots que se habían revelado contra los humanos en el año 2084 e ir salvando a los supervivientes. Más tarde, en 1990, se creó Smash TV cuyo objetivo de supervivencia era el mismo: un concursante de un programa de televisión del futuro tiene que matar a sus atacantes e ir recolectando ‘powerups’.

“Elegimos hacer un juego de naves porque el desarrollo era más sencillo”, confiesa David. Al tratarse de un juego con vista cenital, crear una nave vista desde arriba es más fácil que crear un hombre. David explica que los movimientos de los personajes en un videojuego se asemejan a “cuando haces un dibujo animado en el borde de un libro y al pasar las páginas el dibujo cobra vida; pues cada página es un sprite”. Lo que se denomina ‘sprite’ es lo que equivale a los fotogramas en el mundo cinematográfico.

En el caso de War Games: Space Dementia, el juego se planteó desde el principio con vista cenital, por lo que se decantaron por las naves para evitar crear las ocho posturas que requiere el movimiento de una persona: de frente, de espaldas, de lado, etc. “Si haces un tanque o un avión, visto desde arriba, como no tiene cabeza ni nuca ni nada de eso, solo tienes que hacer un sprite”, sentencia David. Ocho posturas requieren ocho veces más tiempo, tanto para programar -ya que cada movimiento necesita un código- como para diseñar.

David va programando en función de los diseños que le llegan de Daniel. Trabajan mano a mano y toman decisiones en conjunto, aunque David se encarga de atribuirle una inteligencia artificial a cada objeto del juego, es decir un comportamiento específico. "Cada tipo de nave tiene un comportamiento e inteligencia únicos. Las de los primeros niveles son lentas y de movimientos erráticos, las últimas en cambio apenas tienen margen de error y son capaces de perseguirte en equipo y anticiparse a todos tus movimientos”, explica Santín.

Se puede dotar de movimiento y de un comportamiento único a cada objeto del juego gracias al manejo de las variables que conforman el Universo, y según Santín “algunas de estas variables son la velocidad, la gravedad, la velocidad de reacción, la capacidad de disparo, las vidas y la capacidad de seguimiento y de autogiro”.

Sin duda, una de las grandes dificultades a las que se ha enfrentado David durante la creación de War Games: Space Dementia es conseguir un buen rendimiento a pesar de todo el movimiento de naves, proyectiles, personajes, etc. que hay en el juego. "Es difícil encontrar juegos en el mercado en html5 capaces de mover tantos objetos simultáneamente a tan buen rendimiento", concluye David.

Html5, ¿un idioma universal?

Santín explica que “programar en html5 tiene bastantes dificultades especialmente en el rendimiento ya que no es tan potente como un lenguaje nativo pero tiene la ventaja de ser multiplataforma”. El lenguaje nativo es el propio de un procesador específico y cada uno tiene el suyo; Apple, Android, etc. “Si programas una aplicación en su código nativo es como si lo hicieses en el ‘idioma’ de ese dispositivo, por lo que no tienes que ‘traducir’ nada y es más veloz”.

Por lo tanto, se puede decir que el html es un idioma entendible para todo el mundo pero no es el nativo, por lo que no será tan eficiente. “Es lo que tiene usar un idioma común, que luego cada aparato debe interpretarlo en su propio idioma”, cuenta David.

Por esta razón, el programador necesita poner especial énfasis en generar un código muy eficiente, ya que el juego va a jugarse en todo tipo de dispositivos, desde ordenadores muy potentes hasta móviles antiguos con conexiones lentas. El html5 no se va a comportar de la misma manera en un dispositivo y en otro, por lo que se requieren muchas pruebas para que el resultado final se ejecute bien en todos.

De hecho, al jugar con un móvil se tiene la sensación de estar conduciendo la nave gracias a la dinámica de dual joystick, característica de Robotron 2084 y Smash TV. Y gracias a que Phaser, que es el Framework que utiliza David para programar los juegos, acababa de sacar el plug-in del dual joystick se pudo introducir en el juego sin tener que crearlo desde cero.

Phaser es un Framework, que viene a ser un conjunto de estructuras de programación enfocadas a enfrentar algún tipo de problema. En concreto Phaser está orientado a la creación de videojuegos”, aclara Santín. Se encarga de manejar los sprites, introducir los sonidos, tiene herramientas para la creación de juegos y está enfocado en dotarlos de un rendimiento muy alto.

A pesar de que la idea inicial de Eduardo Ortega era crear un juego de supervivencia sencillo y de una sola pantalla -que te permitiese jugar indefinidamente hasta que perdieras- el resultado ha sido bastante distinto. Al ver el potencial del juego y poder dedicarle tiempo (confiesan que coincidió con el verano), sus creadores fueron más allá y acabaron creando un juego html5 mucho más desarrollado y detallado. En definitiva, un juego de naves que se divide en tres zonas, en las que el protagonista tiene que enfrentarse a cinco tipos de enemigos que le atacan de manera distinta, y vencer al monstruo final cada vez. Es la magia de los videojuegos y la mecánica de su creación.

Artículo escrito por Paula Gil Alonso.

Comentarios

¿Qué opinas de este juego? ¿Eres un crack? ¡Exprésate!