Las apps web ahora pueden inhabilitar la aceleración del mouse al capturar eventos del puntero.
El movimiento acelerado es una función ergonómica cuando se usa un mouse o un panel táctil para mover el puntero en la pantalla. Permite un movimiento preciso, a la vez que permite que el puntero cruza toda la pantalla con un movimiento corto y rápido. Específicamente, para la misma distancia física en la que mueves el mouse, el puntero en la pantalla se desplazará más si la distancia se recorrió más rápido.
Los sistemas operativos habilitan la aceleración del mouse de forma predeterminada. En algunos juegos con perspectiva propia, que suelen ser los de disparos en primera persona (FPS), se usan datos de entrada del mouse sin procesar para controlar la rotación de la cámara sin un ajuste de aceleración. El mismo movimiento físico, lento o rápido, da como resultado la misma rotación. Esto da como resultado una mejor experiencia de juego y una mayor precisión para los gamers profesionales.
A partir de Chrome 88, las apps web pueden alternar entre los datos de movimientos del mouse acelerados y no acelerados gracias a la API actualizada de Pointer Lock.
Las plataformas de videojuegos basadas en la Web, como Google Stadia y Nvidia GeForce Now, ya usan estas nuevas funciones para satisfacer a los gamers de juego de disparos en primera persona.
Cómo usar la API
Cómo solicitar un bloqueo del puntero
Un bloqueo del puntero es el término canónico para referirse a las situaciones en las que una aplicación de escritorio oculta el ícono de puntero e interpreta el movimiento del mouse para otra cosa, p.ej., mirar a su alrededor en un mundo 3D.
Los atributos movementX y movementY de los eventos del documento mousemove te indican cuánto se movió el puntero del mouse desde el último evento de movimiento. Sin embargo, estas no se actualizan cuando el puntero se mueve fuera de la página web.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
Capturar el puntero del mouse (o solicitar un bloqueo del puntero) permite ya no preocuparte por el movimiento del puntero hacia afuera. Esto es particularmente útil para juegos web envolventes. Cuando el puntero está bloqueado, todos los eventos del mouse van al elemento objetivo del bloqueo del puntero.
Llama a requestPointerLock() en el elemento de destino para solicitar un bloqueo del puntero y escucha los eventos pointerlockchange y pointerlockerror para supervisar los cambios de bloqueo del puntero.
const myTargetElement = document.body;
// Call this function to request a pointer lock.
function requestPointerLock() {
myTargetElement.requestPointerLock();
}
document.addEventListener("pointerlockchange", () => {
if (document.pointerLockElement) {
console.log(`pointer is locked on ${document.pointerLockElement}`);
} else {
console.log("pointer is unlocked");
}
});
document.addEventListener("pointerlockerror", () => {
console.log("pointer lock error");
});
Cómo inhabilitar la aceleración del mouse
Llama a requestPointerLock() con { unadjustedMovement: true } para inhabilitar el ajuste a nivel del SO para la aceleración del mouse y acceder a la entrada del mouse sin procesar.
De esta manera, los datos de movimiento del mouse de los eventos mousemove no incluirán la aceleración del mouse cuando el puntero esté bloqueado.
Usa la nueva promesa que muestra requestPointerLock() para saber si la solicitud se realizó correctamente.
function requestPointerLockWithUnadjustedMovement() {
const promise = myTargetElement.requestPointerLock({
unadjustedMovement: true,
});
if (!promise) {
console.log("disabling mouse acceleration is not supported");
return;
}
return promise
.then(() => console.log("pointer is locked"))
.catch((error) => {
if (error.name === "NotSupportedError") {
// Some platforms may not support unadjusted movement.
// You can request again a regular pointer lock.
return myTargetElement.requestPointerLock();
}
});
}
Es posible alternar entre los datos de movimiento del mouse acelerado y no acelerado sin liberar el bloqueo del puntero. Para volver a solicitar el bloqueo del puntero, usa la opción deseada. Si esa solicitud falla, el bloqueo original permanecerá intacto y se rechazará la promesa que se muestre. No se activarán eventos de bloqueo del puntero para una solicitud de cambio con errores.
Navegadores compatibles
La API de Pointer Lock es muy compatible con todos los navegadores. Sin embargo, los navegadores basados en Chromium (p.ej., Chrome, Edge, etc.) son los únicos que admiten la inhabilitación del ajuste en el nivel del SO para la aceleración del mouse a partir de octubre de 2020. Consulta la tabla de compatibilidad del navegador de MDN para conocer las actualizaciones.
Compatibilidad con el sistema operativo
La inhabilitación del ajuste a nivel del SO para la aceleración del mouse es compatible con ChromeOS, macOS Catalina 10.15.1 y Windows. sino también Linux.
Ejemplo
Para jugar con la API de Pointer Lock, ejecuta el ejemplo en Glitch. Asegúrate de consultar el código fuente.
Vínculos útiles
- Explicación
- Relaciones públicas de la especificación
- Repositorio de GitHub
- Entrada de ChromeStatus
- Error de seguimiento de Chrome
- Intención de envío
- La posición de Mozilla
- Posición de WebKit
Agradecimientos
Agradecemos a James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques y Vincent Scheib por sus opiniones sobre este artículo.