Tecnologías multimedia e interacción/Curso 2016-2017: Caso 1

Este recurso de aprendizaje es una lección creada originalmente como material didáctico del proyecto de aprendizaje Tecnologías multimedia e interacción.

Las Aventuras der Zevillano, videojuego controlado por voz

GUI del juego que hemos desarrollado.

La interacción con los videojuegos es un área de mucho interés, pues gracias a la tecnología existen cada vez más dispositivos que permiten capturar nuestras intenciones y trasladarlas al juego. Desde los primeros controles basados en botones, hasta los precisos giroscopios y pantallas táctiles de hoy en día, cada vez hay más sistemas de entrada.

Con la cantidad de entradas crecen también la cantidad de opciones dentro de los propios juegos, pero a menudo en una proporción mucho más grande. Algunos videojuegos cuentan con menús prácticamente interminables donde buscar el ítem o acción que queremos puede ser una odisea. La solución a este problema ya la tenemos inventada desde la prehistoria: la voz. La combinación de unas pocas palabras tiene mucha más expresividad que interminables combinaciones de botones, por lo que es interesante explorar hasta dónde podemos llegar interactuando mediante órdenes habladas con un juego.

Así pues, decidimos hacer algún tipo de juego controlado mediante la voz como proyecto de la asignatura. La idea inicial no era reconocer voz, sino reconocer sonidos: diseñaríamos un juego de beatbox donde el jugador imitara diferentes instrumentos, con una dinámica similar a la de guitar hero. Pero como tantas ideas geniales, alguien había pensado antes en ella, con lo que tuvimos que modificarla. Ahora ya no serían sonidos, sino onomatopeyas lo que tendríamos que imitar, y ante un fallo el personaje perdería de alguna forma relacionada con la onomatopeya. Finalmente, tras una serie de pruebas infructíferas, encontramos annyang, con lo que las onomatopeyas se transformaron en palabras cotidianas: daríamos órdenes a nuestro personaje, y en función de las mismas iría o no superando los obstáculos que se encontrase.

El control por voz en los videojuegos

Como prácticamente cualquier control de interacción, la voz ha sido explorada como dispositivo de entrada para videojuegos. En el día a día damos órdenes con nuestra voz para “controlar” a los demás, así que aplicar la misma idea a los juegos no parece tan descabellada. Otro aspecto en el que se puede controlar es estrictamente mediante sonido, sin necesidad de reconocer lo que hemos dicho. Según los sonidos que hagamos (más graves, más agudos, más largos, cortos…) el juego reaccionará de distintas maneras.

Mostramos a continuación unos cuantos ejemplos de juegos controlados por voz, ya sea interpretando las palabras o utilizando únicamente características físicas del sonido.

End War

En este juego el usuario es el “jefe” de un ejército y tiene que ganar las batallas que se te van presentando. En estas batallas el usuario mediante solamente comandos de voz podrá controlar a sus distintos batallones repartidos por el campo de batalla. Se pueden ver unos ejemplos de cómo funcionan estos comandos en el siguiente vídeo.

There came an echo

En la línea del anterior pero más moderno, el jugador debe comandar a su ejército para acabar con los enemigos. El jugador puede dar órdenes de movimiento, de disparo y cambio de arma, y de interacción con el entorno. También es posible dar órdenes múltiples que afecten a varios de nuestros soldados, para que trabajen al unísono. Podemos ver la complejidad de comandos que se alcanza en el siguiente vídeo.

Singstar

Típico juego en el cual tienes que elegir que canción quieres cantar. Luego, el objetivo será cantar la canción lo más parecido posible a la original, según vaya apareciendo en pantalla la letra. El juego funciona detectando la frecuencia en la que cantamos, la cual hace corresponder a su respectiva nota de la escala musical. Si coincide con la esperada, el usuario va ganando puntos. Se puede ver perfectamente cómo funciona el juego en el siguiente tráiler de una de las versiones del juego.

Beatbox Hero

Juego similar al anterior, pero en lugar de tener que cantar, se tiene que hacer beatbox (realizar sonidos musicales con la boca). La detección ya no se realiza por frecuencia, sino que existen patrones pregrabados en el juego contra los cuales se comparan los cantados por el usuario. Al coincidir se otorgan puntos.

Nota: La idea inicial de nuestro proyecto era hacer algo similar, pero al ver que no era nuevo decidimos cambiarla. Pensamos en detectar onomatopeyas en lugar de sonidos, que tendríamos que repetir según salieran en pantalla. Al fallar en alguna, perderías la partida de alguna forma relacionada con la onomatopeya. Finalmente decidimos cambiar las onomatopeyas por palabras naturales.

Tecnologías para el control por voz

A continuación se comentan algunas algunas tecnologías existentes. Podemos reconocer sólo sonidos o también palabras.

Voice Attack

Voice Attack es un software que permite la creación de macros activadas por voz. Necesita que el ordenador tenga un motor de reconocimiento de voz por debajo, el cual aprovecha para el reconocimiento. Voice attack hace de intermediario, interpretando el texto reconocido como comandos, y activando las macros correspondientes.

En el siguiente vídeo se muestra un ejemplo del juego Elite Dangerous controlado con este software. En este caso Voice Attack además proporciona una voz sintética que nos da feedback ante los comandos que damos.

Annyang

Annyang es una biblioteca escrita en javascript que proporciona reconocimiento de voz para integrar en webs. Se basa en el motor de reconocimiento de voz de google integrado en el navegador Chrome. Al detectar que empezamos a hablar, comienza a reconocer la voz, y continúa reconociendo hasta que detecta silencio. A continuación nos devuelve la cadena de texto reconocida. Proporciona funcionalidad para reconocer comandos sobre este texto, donde podemos indicar qué funciones ejecutar ante determinados patrones de texto.

En nuestro caso, es la biblioteca que hemos decidido utilizar, por ser ligera, fácil de usar y precisa en el reconocimiento. También tiene sus inconvenientes, y es que el reconocimiento es en ocasiones algo lento, sobre todo si tenemos una mala conexión a Internet.

Para adaptarla al juego tuvimos que integrar los comandos necesarios, detectando las palabras clave que nos interesaban y lanzando las acciones correspondientes en cada momento. Adicionalmente, registrábamos esas palabras para realizar las visualizaciones en forma de nube de palabras que permiten el análisis del comportamiento del jugador.

Motor gráfico

Dado que la librería para el reconocimiento de voz está diseñada para trabajar sobre web, decidimos buscar motores gráficos que nos permitieran desplegar el juego en formato web para poder jugar desde el navegador.

Algunos de los motores que planteamos para su uso son:

Pixi: Pixi JS es un motor gráfico web que permite crear contenido para WebGL de forma rápida y sencilla. Es un motor muy potente pero sólo permite trabajar en 2D, y por ese motivo lo descartamos.
BabylonJS: Motor gráfico web 3D que permite crear contenido WebGL con HTML5.
Cocos2d: Motor opensource para gráficos 3D que permite crear elementos 3D para múltiples plataformas, pero a más bajo nivel que los anteriormente descritos.
Unity: Unity es un motor gráfico muy potente para 3D que permite crear gráficos para múltiples plataformas, entre ellas WebGL, pero requiere de la instalación de un plugin en el navegador para poder visualizar el contenido.
Three.js: Finalmente, nos decidimos por usar Three.JS por todas las posibilidades que ofrece para hacer gráficos web.

Three.js

Three.js es una librería 3D ligera que enmascara componentes WebGL haciendo que la programación 3D en web sea muy sencilla, proporcionando una interfaz para interactuar con esos componentes sin tener que utilizar métodos de WebGL más complejos.

La librería se puede descargar directamente desde Github o desde la página oficial, que ofrece a la vez un gran cantidad de ejemplos de código de las distintas opciones que proporciona Three.js.

La potencia de Three.js reside en que permite crear escenas con objetos 3D a los que se les pueden aplicar modificaciones muy variadas: color, textura, animaciones, etc.

A continuación se muestra un ejemplo de cómo integrar Three.js en un documento HTML:

Antes de nada, se debe incluir la librería de Three.js como cualquier otro fichero de Javascript.

 <script src="js/three.min.js"></script>

Este ejemplo de código crea una escena, una cámara, un cubo, y añade este cubo a la escena. Después de eso, y mediante WebGL añade el puerto de vista al cuerpo del documento HTML. Finalmente, anima el cubo en la escena.

 
var scene, camera, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 1000;

	geometry = new THREE.BoxGeometry( 200, 200, 200 );
	material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );

	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

Visualizando el comportamiento del jugador

Un aspecto que nos pareció interesante era el de poder analizar de alguna manera el comportamiento del jugador. El poder ver cómo se comporta un jugador ante un escenario es interesante tanto para el jugador, que puede aprender de ello como para el desarrollador, que puede saber qué partes resultan más o menos difíciles.

Nubes de palabras

Nube de palabras generada al jugar a nuestro videojuego.

En este caso, dado que la principal manera de interacción es la voz, decidimos hacer algún tipo de visualización con palabras. Una de las más conocidas formas de hacer esto es mediante nubes de palabras, donde las palabras más frecuentes se resaltan sobre las más escasas, utilizando cambios de tamaño, color u orientación. En este caso, una nube de palabras representa, en cierta manera, las entradas que el usuario ha dado al juego. Por ejemplo, puede haber varias mecánicas a la hora de vencer enemigos (digamos “disparar” y “esquivar”). Con la nube de palabras veríamos claramente qué es lo que está utilizando con más frecuencia. También podemos analizar elementos de fuera del juego. Por ejemplo, si el jugador se ha frustrado con frecuencia, veremos en la nube palabras diferentes a si el jugador ha pasado todo con facilidad.

Hay numerosas herramientas disponibles para la creación de nubes de palabras, pero la mayoría son estáticas. Es decir, a partir de un texto, nos generan la imagen final con las palabras. En este caso, nos interesaba más que fuese dinámico, para así poder ver en tiempo real la evolución del jugador, y que éste tuviera además esa retroalimentación inmediata. Para ello integramos una nube dinámica de palabras con el reconocedor de voz annyang, de tal manera que, al recibir annyang un comando de voz, enviará las palabras que lo forman al generador de nubes, actualizándose este para reflejar las nuevas frecuencias.

D3 js

Manejar esta nube dinámica fue posible gracias a d3.js. Es una biblioteca para javascript orientada hacia el manejo y visualización de conjuntos de datos en páginas web. Con ella somos capaces de, partiendo de una lista de palabras, crear un diccionario que asigne frecuencias a las mismas, y posteriormente disponerlo visualmente, asignando tamaños mayores a las palabras más frecuentes.

Visualización final

Se quiso aprovechar la utilización de un motor gráfico como THREE.js para la generación de una visualización final que aprovechara las posibilidades que da este motor gráfico. Para ello, se creó un entorno 3D en un espacio oscuro, con un sistema de partículas, nodos y nubes de palabras que se generan mediante información sacada del juego.

Para la generación del entorno oscuro y del sistema de partículas se tomó como referencia el proyecto Particle Love. En el caso de las partículas se utilizó una tecnología basada en la construcción de triángulos que voltean para generar un efecto de movimiento. Son las partículas llamadas “The New Particle”, inventadas por Simo Santavirta.

Los nodos han sido creados mediante geometrías circulares (THREE.CircleGeometry), las cuales generan círculos huecos que han sido rotados 36 veces para generar unas figuras geométricas esféricas con huecos. Estos han sido unidos finalmente mediante líneas (THREE.Line) para dar un efecto de unión entre distintos grupos de nodos.

Por último, las palabras se han construido utilizando mallas. Ha sido necesario utilizar una librería externa de geometrías en forma de texto, ya que THREE.js por defecto no incluye esta posibilidad. Además ha sido necesario transformar la fuente de formato estándar ttf a un formato JSON que generaba un mapa para la generación de las mallas de los caracteres.

Nuestro juego

Multimedia: Dando vida al juego

Para la realización del proyecto aparte de del código necesario para que todo funcione, se han tenido que buscar varios elementos multimedia para “dar vida” al juego. Debido a que ninguno de los integrantes del grupo tenía conocimientos suficiente de desarrollado de música, ni de imágenes, se han buscado recursos gratuitos por Internet. Por un lado, se han buscado sonidos para los distintos eventos del juego y música de fondo para la escena. Y por otro lado, se han buscado hojas de sprite (conjunto de imágenes que se pueden ir intercalando para simular una animación) para los distintos personajes del juego, e imágenes para los objetos y fondo del escenario.

Integrando todo junto

THREE.js ofrece muchas posibilidades para la creación de entornos 3D, pero, sin embargo, no proporciona los elementos típicos de un motor de videojuegos para la generación de casillas, detección de eventos, etc. Por ello ha sido necesario implementar muchos de estos aspectos de cara al desarrollo de un videojuego funcional. Además la inclusión de un sistema de reconocimiento de voz y de las visualizaciones ha hecho que sea necesario realizar trabajo en paralelo y la integración de muchos componentes.

La integración ha sido sencilla gracias a la utilización de tecnología basada en componentes (Javascript), que permite la generación de módulos separados y la propia integración y utilización de los mismos en otros. Además existen muchas librerías abiertas para Javascript cuya integración no es compleja ya que simplemente requiere la inclusión de estas en el propio proyecto.

Por otro lado, el trabajo en paralelo generaba muchos conflictos a la hora de programar sobre los mismos archivos, por lo cual hemos aprovechado el uso del software de control de versiones Github para facilitar esta tarea y reducir lo máximo posible la complejidad a la hora de integrar diferentes versiones de los mismos componentes. Pese a ello, hemos tenido que realizar muchas mezclas manuales de estos archivos ya que la integración ha sido continua y basada en metodologías ágiles.

Resultados y conclusiones

El resultado del experimento ha sido la construcción de un videojuego loco que integra muchos elementos que se complementan y hacen que sea divertido jugar para reirse un rato. Ha quedado demostrado que los desarrolladores no están muy cuerdos y el experimento es el propio reflejo de la agrupación de sus mentes en un entorno 3D interactivo.

Se ha destinado mucho trabajo a la implementación de elementos que tienen otros motores de videojuegos y en los que THREE.js flaquea, con lo que se plantea la posibilidad de haber utilizado otro motor como Cocos2D, Unreal Engine o Unity3D.

Sin embargo, la necesidad de desarrollar estos elementos ha permitido que los miembros del equipo aprendan mucho sobre motores gráficos y de videojuegos, y les ha permitido ampliar horizontes a la hora de conocer el funcionamiento de estos.

El código está alojado en Github , y se lanza como una página web cualquiera. No es necesario instalar nada aparte, pero sí que es necesario utilizarlo usando Chrome, que es el navegador que soporta la librería Annyang, y que también soporta WebGL.

Referencias

Facchin, Jose (6 de Marzo de 2016). «Nubes de palabras». Consultado el 14 de Junio de 2017.

Davies, Jason. «Word Cloud». Consultado el 14 de Junio de 2017.

Jain, Rohan; Gupta, Ankit (12 de Diciembre de 2009). «Beatbox Hero». Consultado el 14 de Junio de 2017.

«THREE.js». Consultado el 18 de Junio de 2017.

«Annyang». Consultado el 18 de Junio de 2017.

Santavirta, Simo (15 de Septiembre de 2015). «The New Particle». Consultado el 18 de Junio de 2017.

Kwan, Edan (2016). «Particle Love». Consultado el 18 de Junio de 2017.