Experimento: Probador web para controles DualShock
Un experimento con la API Gamepad para navegadores web, usando SVG para la parte gráfica, ECMAScript para la programación y un control DualShock como interfaz humano-computador.
Una de las API de JavaScript que va a mejorar la experiencia de usuario en los juegos para navegadores web es la API Gamepad, que permite la interacción con los juegos por medio de los controles creados específicamente para ese fin: gamepads, joysticks, etc. La especificación de esta API es un borrador actualmente y solamente parece estar implementada en Firefox y sus derivados. Sin embargo, decidí probarla programando un probador experimental para controles DualShock, aprovechando que tengo acceso a una imitación de uno de estos controles y que hace unos días hice una ilustración SVG del mismo, que sirve como modelo de simulación (ver Figura 1).
El programa
Un navegador que implemente la API Gamepad puede manejar varios controles conectados al mismo tiempo, pero, para no perderme en esa complejidad todavía, el probador que implementé solamente muestra la interacción con un control (el primero que se conecte).
La implementación, junto con la investigación previa, me llevó unas 14 horas, en varias sesiones. El resultado final está disponible en la Web (ver Dualshock Knockoff Tester), pero, como solo funciona en Firefox y con un control a la mano, a continuación dejo un video que demuestra el funcionamiento:
Funcionalidad faltante e información inconsistente
Los controles DualShock tienen un botón en el centro llamado Analog (ver Figura 1). Al presionarlo, se enciende un LED rojo, se activan los dos motores de vibración del control y las palancas quedan en modo analógico. Sin embargo, en este experimento, el objeto Gamepad, que representa el control en el navegador web, solo dice tener 12 botones, ninguno de los cuales corresponde al botón Analog. O sea que no encontré forma de indicar el modo activo del control en pantalla. Por otro lado, la especificación de la API Gamepad no incluye interfaces para manipular la vibración del control. A pesar de esto, las palancas sí reportan valores según el modo activo en el control: digital o analógico.
Por curiosidad, lancé el probador en Chrome 54, Internet Explorer 11 y Edge. El objeto Gamepad creado por Chrome reportó 12 botones y 10 ejes (ver Figura 2), mientras que Firefox reporta 12 botones y 7 ejes (ver video). El probador no funcionó en Internet Explorer ni en Edge.
Tal vez pruebe el control con el módulo joystick de Pygame, una biblioteca multimedia para Python. Si ahí no puedo dar con el botón faltante, tal vez sea problema de este control, que es una imitación.
Siguiente versión
Esta es una implementación heurística y seguramente ingenua. Antes de planear la versión siguiente, y mientras se estabiliza la API Gamepad, prefiero leer la especificación de ECMAScript, rediseñar y refactorizar el programa para eliminar redundancia y tantas funciones impuras como pueda. También necesito un marco conceptual para organizar el código, y aquí no hay big-bang como en Racket.
Referencias
- Especificación de SVG.
- JavaScript Web APIs en W3C.
- Gamepad API en MDN.
- The Gamepad API, por Robert Nyman.
- Request animation frame Web API en MDN.
- DualShock en Wikipedia.
Temas relacionados: