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 qui permet de déplacer le pointeur à l'écran à l'aide d'une souris ou d'un pavé tactile. Il permet un mouvement précis en se déplaçant lentement tout en permettant au pointeur de traverser la totalité de l'écran avec un mouvement court et rapide. Plus précisément, pour la même distance physique à laquelle vous déplacez la souris, le pointeur à l'écran se déplace davantage si la distance est parcourue plus rapidement.
Les systèmes d'exploitation activent l'accélération de la souris par défaut. Pour certains jeux de perspective propriétaire, généralement les jeux de tir à la première personne (FPS), les données brutes de saisie à la souris sont utilisées pour contrôler la rotation de l'appareil photo sans ajustement d'accélération. Le même mouvement physique, lent ou rapide, aboutit à la même rotation. Selon les joueurs professionnels, cela se traduit par une meilleure expérience de jeu et une plus grande 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 jeux Web telles que Google Stadia et Nvidia GeForce Now exploitent déjà ces nouvelles fonctionnalités pour satisfaire les gamers.
Utiliser l'API
Demander le verrouillage du pointeur
Un verrou de pointeur est le terme canonique utilisé par une application de bureau pour masquer l'icône de pointeur et interpréter le mouvement de la souris pour autre chose, par exemple regarder dans un monde 3D.
Les attributs movementX et movementY des événements de document mousemove vous indiquent le déplacement du pointeur de la souris depuis le dernier événement de déplacement. Toutefois, ceux-ci 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}`);
});
La capture du pointeur de la souris (ou la demande de verrouillage du pointeur) vous permet de ne plus vous soucier du déplacement de celui-ci à l'extérieur. Cela est particulièrement utile pour les jeux Web immersifs. Lorsque le pointeur est verrouillé, tous les événements de souris sont dirigés vers l'élément cible du verrouillage du pointeur.
Appelez requestPointerLock() sur l'élément cible pour demander un verrouillage du pointeur, et écoutez les événements pointerlockchange et pointerlockerror pour surveiller les changements de 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 du système d'exploitation de l'accélération de la souris et accéder à l'entrée brute de la souris.
De cette façon, les données de mouvement de la souris des événements mousemove n'incluent 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 abouti.
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. Demandez simplement le verrouillage du pointeur avec l'option souhaitée. Si cette requête échoue, le verrouillage d'origine reste intact et la promesse renvoyée est rejetée. Aucun événement de verrouillage du pointeur ne se déclenche en cas d'échec d'une requête de modification.
Prise en charge des navigateurs
L'API Pointer Lock est bien compatible avec tous les navigateurs. Toutefois, depuis octobre 2020, les navigateurs basés sur Chromium (par exemple, Chrome, Edge, etc.) sont les seuls à accepter la désactivation de l'ajustement au niveau de l'OS pour l'accélération de la souris. Consultez le tableau Compatibilité du navigateur de MDN pour obtenir les mises à jour.
Systèmes d'exploitation compatibles
La désactivation de l'ajustement au niveau du système d'exploitation pour l'accélération de la souris est compatible avec ChromeOS, macOS Catalina 10.15.1 et Windows. Linux suivra.
Échantillon
Vous pouvez utiliser l'API Pointer Lock en exécutant l'exemple sur Glitch. N'oubliez pas de consulter le code source.
Liens utiles
- Explication
- Spécification PR
- Dépôt GitHub
- Entrée ChromeStatus
- Bug de suivi dans Chrome
- Intention de livraison
- Position de Mozilla
- Position de WebKit
Remerciements
Merci à James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques et Vincent Scheib pour avoir donné leur avis sur cet article.