Share
Los juegos en la web han avanzado mucho con las tecnologías HTML5 como Canvas, WebGL y WebAudio. Ahora es posible producir gráficos y sonido de alta fidelidad dentro del navegador. Sin embargo, para proporcionar una verdadera experiencia de juego, necesita dispositivos de entrada diseñados para juegos. La API de Gamepad es un estándar propuesto del W3C y está diseñada para proporcionar una API consistente en todos los navegadores.
La API de Gamepad permite a los usuarios conectar dispositivos como un controlador de Xbox a una computadora y usarlos para experiencias basadas en el navegador. Nuestra clase auxiliar, PxGamepad, luego asigna los índices de los botones y los ejes a los nombres más familiares como están etiquetados en el controlador de Xbox..
Si tiene un gamepad, intente conectarlo a su computadora, haga clic en la imagen del controlador de Xbox a continuación y presione un botón. Verás que el controlador se ilumina para reflejar cada movimiento que haces!
Este tutorial es el tercero de una serie en Flight Arcade creada para demostrar lo que es posible en la plataforma web y en el nuevo navegador Microsoft Edge y el motor de renderizado EdgeHTML. Puede encontrar los dos primeros artículos en WebGL y Web API, además de código interactivo y ejemplos para este artículo, en flightarcade.com y aquí en Tuts+.
La API de Gamepad está diseñada inteligentemente con flexibilidad en mente. En un nivel básico, proporciona acceso a botones y ejes. Los valores de los botones van desde 0 a 1 inclusive, mientras que los ejes van desde -1 a 1 inclusivo. Todos los valores están normalizados a estos rangos para que los desarrolladores puedan esperar un comportamiento consistente entre dispositivos.
El objeto Gamepad proporciona información detallada sobre el fabricante y el modelo del gamepad conectado. Más útil es una propiedad de "mapeo" que describe el tipo general de gamepad. Actualmente, la única asignación admitida es "estándar", que corresponde al diseño del controlador utilizado por muchas consolas de juegos populares como la Xbox.
El mapeo del controlador estándar tiene dos sticks, cada uno de los cuales está representado por dos ejes (x e y). También incluye un D-pad, cuatro botones de juego, botones superiores y disparadores: todos representados como botones en la API de Gamepad.
Los controladores actuales de Xbox reportan el estado del botón como cualquiera 0 (estado normal) o 1 (presionado). Sin embargo, podría imaginar que los futuros controladores podrían informar la cantidad de fuerza aplicada a cada botón presionando.
El Xbox D-pad también informa de valores discretos (0 o 1), pero los sticks proporcionan valores continuos en todo el rango del eje (-1 a 1). Esta precisión adicional hace que sea mucho más fácil volar el avión en nuestras misiones de Flight Arcade.
La variedad de botones y ejes que proporciona la API de Gamepad es avanzada y perfecta como una API de bajo nivel. Sin embargo, al escribir un juego, es bueno tener una representación de nivel superior de un gamepad estándar como el controlador de Xbox One. Creamos una clase de ayuda llamada PxGamepad que asigna los índices de los botones y los ejes a los nombres más conocidos como están etiquetados en el controlador de Xbox..
Recorreré algunas piezas interesantes de la biblioteca, pero el código fuente completo (licencia MIT) está disponible en GitHub.
La API estándar de Gamepad proporciona el estado de los botones como una matriz de botones. Nuevamente, esta API está diseñada para ser flexible, permitiendo a los controladores con varios conteos de botones. Sin embargo, al escribir un juego, es mucho más fácil escribir y leer código que utiliza los nombres de botones asignados estándar.
Por ejemplo, con la API de Gamepad de HTML5, aquí está el código para verificar si el disparador izquierdo está presionado actualmente:
la función isLeftTriggerPressed () var leftTrigger = gamepad.buttons [6]; if (! left Trigger) return false; if (typeof (leftTrigger) === "object") return leftTrigger.pressed; return (leftTrigger === 1.0);
La clase PxGamepad contiene un método de actualización que reunirá el estado de todos los botones y ejes asignados estándar. Determinando así si el gatillo izquierdo Se presiona es tan simple como acceder a una propiedad booleana:
var isPressed = pxgamepad.buttons.leftTrigger;
Los ejes en la API estándar de Gamepad también se proporcionan como una matriz de valores numéricos. Por ejemplo, aquí está el código para obtener los valores x e y normalizados para el stick izquierdo:
var leftStickX = gamepad.axes [0]; var leftStickY = gamepad.axes [1];
El D-pad es un caso especial, ya que se considera un conjunto de cuatro botones por la API de Gamepad de HTML5 (los índices 12, 13, 14, y 15). Sin embargo, es común que los desarrolladores permitan que el D-pad se use de la misma manera que uno de los sticks. PxGamepad proporciona información de botones para el D-pad, pero también sintetiza la información del eje como si el D-pad fuera un palo:
var dpadX = pxgamepad.dpad.x; var dpadY = pxgamepad.dpad.y;
Otra limitación de la API de Gamepad HTML5 es que no proporciona eventos de nivel de botón. Es común que un desarrollador de juegos quiera activar un solo evento para presionar un botón. En Flight Arcade, los botones de encendido y freno son buenos ejemplos. PxGamepad observa el estado de los botones y permite a las personas que llaman registrarse para recibir notificaciones sobre la liberación de botones.
Accentsconagua
gamepad.on ('rightTrigger', function () console.log ('disparador derecho disparado!'););Aquí está la lista completa de botones con nombre compatibles con PxGamepad:
unasegundoXyleftTopJusto arribagatillo izquierdoright Triggerseleccionarcomienzopalo izquierdopalo derechoDPAD arribadpadDowndpadLeftdpadRightHay dos métodos para recuperar el objeto gamepad. La API de Gamepad agrega un método al objeto de navegador llamado getGamepads (), que devuelve una matriz de todos los gamepads conectados. Tambien hay novedades gamepadconnected y gamepaddisconnected eventos que se activan cada vez que se conecta o desconecta un nuevo gamepad. Por ejemplo, aquí está cómo el ayudante de PxGamepad almacena el último gamepad conectado:
// comenzar a escuchar los eventos de conexión de gamepad PxGamepad.prototype.start = function () this.reset (); this.listeners = 'gamepadconnected': jQuery.proxy (function (e) var gamepad = e.originalEvent.gamepad; if (gamepad.mapping === 'standard') this.connectedGamepad = gamepad;), 'gamepaddisconnected': jQuery.proxy (function (e) var gamepad = e.originalEvent.gamepad; if (this.connectedGamepad === gamepad) this.connectedGamepad = null;); jQuery (window) .on (this.listeners); ;
Y aquí está el ayudante para recuperar el primer gamepad estándar usando el navigator.getGamepads () API:
// helper para recuperar el gamepad conectado actualmente PxGamepad.prototype.getGamepad = function () // predeterminado a gamepad conectado var gp = this.connectedGamepad; if (! gp) // busca todos los gamepads disponibles var gamepads; if (navigator.getGamepads) gamepads = navigator.getGamepads (); else if (navigator.webkitGetGamepads) gamepads = navigator.webkitGetGamepads (); // busca un gamepad asignado estándar si (gamepads) para (var i = 0, len = gamepads.length; i < len; i++) if (gamepads[i].mapping === 'standard') gp = gamepads[i]; break; return gp; ;
La clase de ayuda de PxGamepad está diseñada para el escenario simple en el que un solo usuario está jugando un juego con un gamepad estándar asignado. Los navegadores más recientes, como Microsoft Edge, son totalmente compatibles con la API de Gamepad de W3C. Sin embargo, las versiones anteriores de algunos otros navegadores solo admitían partes de la especificación emergente. PxGamepad escucha para el gamepadconnected eventos y vuelve a consultar la lista de todos los gamepads si es necesario.
Si bien PxGamepad se enfoca en el escenario simple y más común, la API de Gamepad es totalmente capaz de soportar múltiples jugadores, cada uno con su propio gamepad. Una posible mejora para PxGamepad podría ser proporcionar una clase de estilo de administrador que rastree la conexión de múltiples gamepads y los asigne a múltiples jugadores en un juego. Otro podría ser permitir a los usuarios volver a asignar o personalizar las funciones de los botones en sus gamepads..
También estamos entusiasmados con el potencial de la API de Gamepad para escenarios que no son juegos. Con el auge de WebGL, estamos viendo una variedad de usos innovadores para 3D en la web. Eso podría significar explorar el monte. La región del Everest en 3D con GlacierWorks, o ver la Colección Asiria del Museo Británico gracias a los esfuerzos de CyArk para preservar digitalmente los sitios y artefactos importantes del mundo..
Durante el desarrollo de Flight Arcade, usamos con frecuencia Blender y otras herramientas 3D para procesar modelos para Babylon.js. Algunos desarrolladores y artistas usan un dispositivo llamado ratón 3D para ayudar a manipular y navegar los modelos 3D. ¡Estos dispositivos rastrean el movimiento de un solo botón a través de seis ejes! Hacen que sea realmente fácil y rápido manipular modelos. Más allá de los juegos, se utilizan en una variedad de aplicaciones interesantes, desde ingeniería hasta imágenes médicas. Al agregar el soporte de gamepad a Flight Arcade, nos sorprendió descubrir que la API de Gamepad detectó nuestro 3D SpaceMouse y proporcionó datos de movimiento para los seis ejes.!
Es emocionante imaginar todas las posibilidades que ofrece la nueva API de Gamepad. Ahora es un buen momento para experimentar con el nuevo Gamepad API y agregar control de precisión y mucha diversión a su próximo juego o aplicación.!
Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y tenemos la misión de crear mucho más con Microsoft Edge. Aquí hay algunos para ver:
Y algunas herramientas gratuitas para comenzar: Visual Studio Code, Azure Trial y herramientas de prueba en varios navegadores, todas disponibles para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ .
