Les applications Web peuvent désormais désactiver l'accélération de la souris lors de la capture d'événements de pointeur.
Le mouvement accéléré est une fonctionnalité ergonomique lorsque vous utilisez une souris ou un pavé tactile pour déplacer le pointeur à l'écran. Il permet un mouvement précis en se déplaçant lentement, tout en permettant au pointeur de traverser l'écran entier en un mouvement court et rapide. Plus précisément, pour la même distance physique que vous déplacez la souris, le pointeur à l'écran parcourt une plus grande distance si la distance a été parcourue plus rapidement.
Les systèmes d'exploitation activent l'accélération de la souris par défaut. Pour certains jeux en perspective first party, généralement des jeux de tir à la première personne (FPS), les données d'entrée brutes de la souris sont utilisées pour contrôler la rotation de la caméra sans ajustement de l'accélération. Le même mouvement physique, lent ou rapide, entraîne la même rotation. Selon les joueurs professionnels, cela améliore l'expérience de jeu et la précision.
À partir de Chrome 88, les applications Web peuvent basculer entre les données de mouvement de la souris accélérées et non accélérées grâce à la mise à jour de l'API Pointer Lock.
Les plates-formes de jeu sur le Web telles que Google Stadia et Nvidia GeForce Now utilisent déjà ces nouvelles fonctionnalités pour satisfaire les joueurs de FPS.
Utilisation de l'API
Demander le verrouillage du pointeur
Le verrouillage du pointeur est le terme utilisé lorsqu'une application pour ordinateur masque l'icône du pointeur et interprète le mouvement de la souris pour autre chose, par exemple pour regarder autour de soi dans un monde 3D.
Les attributs movementX
et movementY
des événements de document mousemove
indiquent la distance parcourue par le pointeur de la souris depuis le dernier événement de déplacement. Toutefois, ils ne sont pas mis à jour lorsque le pointeur se déplace en dehors de la page Web.
document.addEventListener("mousemove", (event) => {
console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});
Capturer le pointeur de la souris (ou demander un verrouillage du pointeur) vous permet de ne plus vous soucier de son déplacement en dehors de la zone. Cela est particulièrement utile pour les jeux Web immersifs. Lorsque le pointeur est verrouillé, tous les événements de la souris sont envoyés à l'élément cible du verrouillage du pointeur.
Appelez requestPointerLock()
sur l'élément cible pour demander un verrouillage du pointeur, puis écoutez les événements pointerlockchange
et pointerlockerror
pour surveiller les modifications du verrouillage du pointeur.
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");
});
Désactiver l'accélération du curseur
Appelez requestPointerLock()
avec { unadjustedMovement: true }
pour désactiver l'ajustement au niveau de l'OS pour l'accélération de la souris et accéder à la saisie brute de la souris.
De cette façon, les données de mouvement de la souris provenant des événements mousemove
n'incluront pas l'accélération de la souris lorsque le pointeur est verrouillé.
Utilisez la nouvelle promesse renvoyée par requestPointerLock()
pour savoir si la requête a réussi.
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();
}
});
}
Il est possible de basculer entre les données de mouvement de la souris accélérées et non accélérées sans relâcher le verrouillage du pointeur. Il vous suffit de demander à nouveau le verrouillage du pointeur avec l'option souhaitée. Si cette requête échoue, le verrouillage d'origine restera intact et la promesse renvoyée sera rejetée. Aucun événement de verrouillage du pointeur ne se déclenche pour une requête de modification ayant échoué.
Prise en charge des navigateurs
L'API Pointer Lock est largement compatible avec les navigateurs. Toutefois, à partir d'octobre 2020, seuls les navigateurs basés sur Chromium (Chrome, Edge, etc.) permettent de désactiver l'ajustement au niveau de l'OS pour l'accélération de la souris. Pour en savoir plus, consultez le tableau Compatibilité des navigateurs de MDN.
Systèmes d'exploitation compatibles
La désactivation de l'ajustement au niveau de l'OS pour l'accélération de la souris est compatible avec ChromeOS, macOS Catalina 10.15.1 et Windows. Linux suivra.
Échantillon
Vous pouvez tester l'API Pointer Lock en exécutant l'exemple sur Glitch. Veillez à consulter le code source.
Liens utiles
- Explication
- Communiqué de presse sur les spécifications
- Dépôt GitHub
- Enregistrement ChromeStatus
- Bug de suivi Chrome
- Intention d'expédition
- Position de Mozilla
- Position de WebKit
Remerciements
Merci à James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques et Vincent Scheib pour leurs commentaires sur cet article.