Sentado en la mesa, usa el mouse y el teclado mientras está sentado en el sofá, probablemente el panel táctil de una computadora portátil o la pantalla táctil de una tableta. Incluso puede usar Leap Motion y controlar su computadora con gestos. Como ya entendió, hay muchas maneras de navegar por Internet y administrar su computadora. Un gamepad puede ser uno de ellos.
En este artículo, compartiré contigo cómo:
- conecta el gamepad al navegador
- escuchar eventos de gamepad
- Controle el enfoque en los elementos de la página usando un gamepad
- hacer comentarios en forma de vibración
Conecte su gamepad usando USB o Bluetooth y comencemos.
Gamepad API
Se ha agregado un gamepad API al estándar HTML 5. La API permite el uso de gamepads en un navegador. En combinación con un elemento, esta API se puede usar para crear juegos que admitan un gamepad. Por lo tanto, los usuarios pueden jugar juegos usando el gamepad directamente en el navegador, lo cual es muy bueno. Pero la API se puede usar no solo para juegos. Nadie te impide hacer un dispositivo de entrada en forma de gamepad para propósitos completamente diferentes.
La API de Gamepad está bien soportada , pero aún en fase de borrador. Quizás algo cambie, se elimine o se agregue en el futuro.
Conectamos un gamepad
Cuando el gamepad se conecta a la computadora mediante USB o Bluetooth, podemos usar dos eventos para manejar las conexiones y desconexiones:
window.addEventListener('gamepadconnected', function(event) {
El gamepad solo comenzará a funcionar después de presionar el botón (aprox. Traducir cualquiera o Iniciar). El hecho es que esta es la seguridad / privacidad del navegador. Por lo tanto, es necesario pensar en la interfaz para informar al usuario sobre la necesidad de presionar un botón para comenzar a trabajar.
Los eventos del gamepad son los siguientes en la consola:
Diseño del gamepad: botones y hachas
Como puede ver, el registro de eventos tiene un grupo de botones (0 - 16) y ejes (ejes 0 - 3). Pero, ¿cómo sabes cómo se esconden los botones detrás del número? Los gamepads tienen diferentes diseños según la marca. Por lo tanto, debe buscar información en Internet. En este caso, conectamos el gamepad Xbox One y tiene este diseño:
Escucha la pulsación del teclado
Al desarrollar interfaces, puede usar .addEventListener() para agregar un evento al .addEventListener() una tecla. En este caso, esto no se puede hacer, ya que los botones del controlador no crean eventos. Y como puede ver en el registro anterior, debe verificar el campo pressed manualmente:
const xBoxButtonB = gamepad.buttons[1] if (xBoxButtonB.pressed) { doSomethingOnButtonPress(); }
Como queremos hacer la verificación todo el tiempo, necesitamos envolverlo todo en un bucle. Por ejemplo, usando requestAnimationFrame :
const rAF = window.mozRequestAnimationFrame || window.requestAnimationFrame; window.addEventListener('gamepadconnected', function() { updateLoop(); }); function updateLoop() {
Navegación entre ítems
Para utilizar el gamepad para navegar por la página web, debe simular el teclado. Pero primero debe obtener todos los elementos de la página que puedan enfocarse.
Con el siguiente selector, puede obtener todos estos elementos:
const focusableElements = document.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' );
Mover el foco programáticamente
Para enfocarnos en el elemento, recorreremos la NodeList y nos enfocaremos en el elemento actual usando el método element.focus() .
Este ejemplo muestra cómo puede saltar el foco de un elemento a otro:
let current; function updateLoop() { const gamepad = navigator.getGamepads()[0] const gamepadBumperL = gamepad.buttons[4] const gamepadBumperR = gamepad.buttons[5] if (gamepadBumperL.pressed) { prevItem(current) } if (gamepadBumperR.pressed) { nextItem(current) } setTimeout(() => rAF(updateLoop), 100) } function prevItem(index) { current = (index - 1) % focusableElements.length focusableElements[current].focus() } function nextItem(index) { current = (index + 1) % focusableElements.length focusableElements[current].focus() }
Presta atención al uso de la función setTimeout . Se utiliza para limitar requestAnimationFrame a 100 milisegundos. Sin esto, un solo clic en una tecla puede generar varios eventos de gamepad, ya que no hay onClick familiar para nosotros, y es físicamente imposible presionar y soltar una tecla en un milisegundo.
Haga clic en los elementos.
Puede hacer click() en elementos utilizando el método click() :
clickItem(index) { focusableElements[index].click(); }
Agregue retroalimentación usando vibración
Los gamepads modernos pueden vibrar. Estas vibraciones se utilizan para retroalimentar al usuario, generalmente en los juegos. Pero también puede intentar hacer comentarios de los elementos web de la página.
Los gamepads a menudo están equipados con dos motores eléctricos, potentes y débiles:
Podemos controlar estos motores desde un navegador utilizando vibrationActuator .
Para crear vibración, podemos usar el método playEffect() :
gamepad.vibrationActuator.playEffect('dual-rumble', { startDelay: 0,
Cuando use motores para vibración, recuerde que un motor grande necesita más tiempo para acelerar. Por lo tanto, para respuestas a corto plazo, es mejor usar un motor pequeño.
Conclusión
En este ejemplo, examinamos las funciones básicas de la API de Gamepad y cómo se puede usar para navegar por Internet.
El código y la demostración de GitHub se pueden ver aquí .
Enlaces utiles
html5gamepad.com - herramienta de verificación de gamepad
Gamepad API en MDN