Verdadera experiencia de juego: ir a toda velocidad con Gamepad API en Microsoft Flight Simulator Arcade

Verdadera experiencia de juego: ir a toda velocidad con Gamepad API en Microsoft Flight Simulator Arcade

Los juegos en la web han recorrido un largo camino con 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 brindar una verdadera experiencia de juego, necesita dispositivos de entrada diseñados para jugar. La API de Gamepad es una estándar propuesto del W3Cy está diseñado para proporcionar una API coherente en todos los navegadores.

La API de Gamepad permite a los usuarios conectar dispositivos como un controlador de Xbox a una computadora y utilícelos para experiencias basadas en el navegador. Si tiene un gamepad, intente conectarlo a su computadora y presione un botón. ¡Verás que el controlador de Xbox a continuación se ilumina para reflejar cada movimiento que haces!

Pruébelo de forma interactiva aquí.

Este tutorial es el tercero de una serie sobre Arcada de vuelo – construido para demostrar lo que es posible en la plataforma web y en el nuevo Navegador Microsoft Edge y motor de renderizado EdgeHTML. Puede encontrar los primeros dos artículos sobre WebGL y Web API, además de código interactivo y ejemplos para este artículo. en flightarcade.com.

API flexibles

La API de Gamepad está diseñada de manera inteligente teniendo en cuenta la flexibilidad. En un nivel básico, proporciona acceso a botones y ejes. Los valores de los botones van desde [ 0 .. 1 ] mientras que los ejes van desde [ -1 .. 1 ]. 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 estándar del controlador tiene dos palos, cada uno de los cuales está representado por 2 ejes (x e y). También incluye un D-pad, 4 botones de juego, botones superiores y gatillos: todos representados como botones en la API de Gamepad.

Los controladores Xbox actuales informan el estado del botón como 0 (estado normal) o 1 (presionado). Sin embargo, podría imaginar que los controladores futuros podrían informar la cantidad de fuerza aplicada a cada pulsación de botón.

El pad direccional de Xbox también informa valores discretos (0 o 1), pero los sticks brindan valores continuos en todo el rango del eje [-1 .. 1]. Esta precisión adicional hace que sea mucho más fácil volar el avión en nuestras misiones de Flight Arcade.

PxGamepad

La variedad de botones y ejes proporcionados por la API de Gamepad tiene visión de futuro y es perfecta como una API de bajo nivel. Sin embargo, al escribir un juego, es bueno tener una representación de mayor nivel de un gamepad estándar como el controlador de xbox uno. Creamos una clase de ayuda denominada PxGamepad que asigna los índices de los botones y los ejes a los nombres más familiares como se indica en el controlador de Xbox.

Revisaremos algunas piezas interesantes de la biblioteca, pero el código fuente completo (Licencia MIT) está disponible aquí: https://github.com/thinkpixellab/PxGamepad

La API estándar de Gamepad proporciona el estado de los botones como una matriz de botones. Una vez más, esta API está diseñada para brindar flexibilidad, lo que permite controladores con varios recuentos de botones. Sin embargo, al escribir un juego, es mucho más fácil escribir y leer código que usa los nombres de botones asignados estándar.

Por ejemplo, con la API de gamepad HTML5, aquí está el código para verificar si el gatillo izquierdo está presionado actualmente:


La clase PxGamepad contiene un método de actualización que recopilará el estado de todos los botones y ejes asignados estándar. Entonces, determinar si se presiona el disparador izquierdo es tan simple como acceder a una propiedad booleana:


Los ejes en la API de Gamepad estándar 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 joystick izquierdo:


El D-pad es un caso especial, porque consideró un conjunto de cuatro botones por la API de Gamepad de HTML5 (índices 12, 13, 14 y 15). Sin embargo, es común que los desarrolladores permitan que el dpad 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:

Otra limitación de la API de Gamepad de HTML5 es que no proporciona eventos a nivel de botón. Es común que un desarrollador de juegos desee activar un solo evento al presionar un botón. En arcade de vuelo, los botones de encendido y freno son buenos ejemplos. PxGamepad observa el estado del botón y permite que las personas que llaman se registren para recibir notificaciones al soltar el botón.

Aquí está la lista completa de botones con nombre compatibles con PxGamepad:

  • a
  • B
  • X
  • y
  • izquierdaarriba
  • Justo arriba
  • gatillo izquierdo
  • gatillo derecho
  • Seleccione
  • comienzo
  • palo izquierdo
  • palo derecho
  • DPAD arriba
  • dpadDown
  • dpadLeft
  • dpadDerecha

Obtención del Gamepad actual

Hay dos métodos para recuperar el objeto gamepad. La API Gamepad agrega un método al objeto navegador llamado getGamepads() que devuelve una matriz de todos los gamepads conectados. También hay nuevos eventos ‘gamepadconnected’ y ‘gamepaddisconnected’ que se activan cada vez que se conecta o desconecta un nuevo gamepad. Por ejemplo, así es como el ayudante de PxGamepad almacena el último gamepad conectado:

Y aquí está el ayudante para recuperar el primer gamepad estándar usando la API navigator.getGamepads():

La clase auxiliar PxGamepad está diseñada para el escenario simple en el que un solo usuario juega con un gamepad mapeado estándar. Los navegadores más recientes, como Borde de Microsoft, es totalmente compatible con la API de W3C Gampepad. Sin embargo, las versiones anteriores de algunos otros navegadores solo admitían partes de la especificación emergente. El PxGamepad escucha los eventos conectados al gamepad y vuelve a consultar la lista de todos los gamepads si es necesario.

Futuro de Gamepad

Si bien PxGamepad se enfoca en el escenario simple y más común, Gamepad API es totalmente capaz de admitir múltiples jugadores, cada uno con su propio gamepad. Una posible mejora para PxGamepad podría ser proporcionar una clase de estilo administrador que rastrea la conexión de múltiples gamepads y los asigna a múltiples jugadores en un juego. Otra podría ser permitir a los usuarios reasignar o personalizar las funciones de los botones en sus gamepads.

También estamos entusiasmados con el potencial del 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 explorando la región del monte Everest en 3D con GlacierWorks. O viendo el Colección asiria del Museo Británico gracias a los esfuerzos de CyArk para preservar digitalmente sitios y artefactos importantes del mundo.

Durante el desarrollo de Flight Arcade, usamos con frecuencia Licuadora y otras herramientas 3D para procesar modelos para Babilonia.JS. Algunos desarrolladores y artistas usan un dispositivo llamado mouse 3D para ayudar a manipular y navegar por los modelos 3D. ¡Estos dispositivos rastrean el movimiento de una sola perilla 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. Mientras añadíamos compatibilidad con gamepad a Flight Arcade, nos sorprendió saber que Gamepad API 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 la nueva API Gamepad y agregar control de precisión y mucha diversión a su próximo juego o aplicación!

Más prácticas con JavaScript

Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto y tenemos la misión de crear mucho más con Borde de Microsoft. Aquí hay algunos para revisar:

Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

#Verdadera #experiencia #juego #toda #velocidad #con #Gamepad #API #Microsoft #Flight #Simulator #Arcade

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.