Alba on Tech

Talking about technology

ő†WEEK: Kam-Fu

TL;DR He hecho un juego que se maneja con la webcam. Tienes el link para jugar al final ūüôā

[Publicado originalmente en el blog de Kaleidos]

Probablemente el hardware m√°s com√ļnmente infrautilizado es la webcam. Hoy en d√≠a todos los port√°tiles llevan una c√°mara, que todo el mundo tapa para evitar a los ‚Äėhackers‚Äô, o la enciende para hacer una videoconferencia‚Ķ s√≥lo para apagarla a los pocos minutos porque el ancho de banda no es suficiente para el v√≠deo.

As√≠ que esta piweek he decidido darle una oportunidad para hacer algo m√°s. ¬ŅY qu√© mejor que convertirla en un interfaz para un videojuego?. Adem√°s, con la potencia actual de los navegadores, y las capacidades de html5 para acceder a la c√°mara, deber√≠a ser posible hacerlo en html y javascript. As√≠ surgi√≥ la idea de Kam-Fu.

La verdad es que no he dedicado tiempo a investigar sobre visi√≥n artificial. Seguro que hay muchas ideas muy buenas por ah√≠. Pero yo ten√≠a una teor√≠a, que quer√≠a probar. Si se hace una foto est√°tica al principio, y luego se compara esa foto con cada fotograma, se pueden obtener las diferencias (con un cierto umbral). Cualquier pixel que sea diferente, es un sitio que el jugador est√° ‚Äútocando‚ÄĚ. Parec√≠a una buena teor√≠a, as√≠ que busqu√© alguna biblioteca de comparaci√≥n de im√°genes, y llegu√© a Resembe.js, que hac√≠a justo lo que yo quer√≠a. Comenc√© las primeras pruebas, y el lunes por la ma√Īana ya consegu√≠a ‚Äútocar‚ÄĚ botones en el aire. ¬°El primer d√≠a ten√≠a funcionando lo que esparaba que me llevase casi toda la semana!.

Awesome! Image diferences detector on the first morning!

Una vez ten√≠a el interfaz para detectar los movimientos del usuario, era la hora de hacer algo chulo con ello. Lo primero que hice el martes fue el ‚Äúminijuego‚ÄĚ del men√ļ, desde el que poder elegir otros juegos. Una vez lo tuve funcionando, toc√≥ refactorizar todo, para extraer las partes comunes a cualquier juego. Una vez conseguido, tocaba lo que de verdad me apetec√≠a‚Ķ ¬°El juego de matar ninjas!.

 

Pero en ese punto me d√≠ cuenta de que mi sistema de comparaci√≥n de im√°genes era muy poco eficiente. ¬ŅPara qu√© quer√≠a detectar todas las diferencias entre un frame y la imagen original? En realidad s√≥lo me interesaba si hab√≠a diferencias sobre alguno de los sprites del juego. As√≠ que me deshice de Resemble.js, y me escrib√≠ mi propia biblioteca de comparaci√≥n de im√°genes, que permit√≠a comparar un pixel concreto.

 

Una vez resuelto esto, ya estaba on-fire. Los siguientes días llegaron no sólo el juego de los ninjas, sino también el de memoria, y el de baile.

ninja1

memory1

dance1

Cosas que he aprendido:

  • Desarrollar juegos es muy divertido, tanto como jugarlos.
  • Para hacer juegos, es indispensable un dise√Īador gr√°fico. He dedicado demasiadas horas al Gimp para el resultado visual obtenido.
  • Las capacidades multimedia de html5 son impresionantes.
  • Con la potencia de hardware actual, hasta con un portatil modesto, la optimizaci√≥n ya no es algo vital. Tras invertir muchas horas en mejorar la eficiencia de c√≥digo que se ejecuta varias veces por segundo, el resultado apreciable no era diferente.

Por supuesto, Kam-Fu es software libre, puedes acceder a su código fuente. Pero lo más importante es que ¡puedes jugar! (por ahora, sólo para chrome): Kam-Fu

30 December, 2014 Posted by | Software | Leave a comment