Désactivez l'accélération de la souris pour améliorer le FPS

Les applications Web peuvent désormais désactiver l'accélération de la souris lors de la capture d'événements de pointeur.

François Beaufort

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 l'écran entier avec un mouvement court et rapide. Plus précisément, pour une même distance physique parcourue par la souris, le pointeur à l'écran se déplace plus loin 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 à la première personne, généralement des jeux de tir à la première personne (FPS), les données brutes d'entrée 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. Cela permet d'améliorer l'expérience de jeu et d'accroître la précision, selon les joueurs professionnels.

À 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 à l'API Pointer Lock mise à jour.

Les plates-formes de jeux Web telles que Google Stadia et Nvidia GeForce Now utilisent déjà ces nouvelles fonctionnalités pour satisfaire les joueurs de FPS.

Utiliser l'API

Demander un verrouillage du pointeur

Le terme canonique pour désigner le moment où une application de bureau 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) est "verrouillage du pointeur".

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, ces valeurs ne sont pas mises à 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 du pointeur 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 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, et é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 à l'entrée 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 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 libérer 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 reste intact et la promesse renvoyée est rejetée. Aucun événement de verrouillage du pointeur ne sera déclenché en cas d'échec d'une demande de modification.

Prise en charge des navigateurs

L'API Pointer Lock est bien prise en charge par les navigateurs. Toutefois, les navigateurs basés sur Chromium (Chrome, Edge, etc.) sont les seuls à permettre de désactiver le réglage au niveau de l'OS pour l'accélération de la souris depuis octobre 2020. Pour en savoir plus, consultez le tableau Compatibilité des navigateurs de MDN.

Systèmes d'exploitation compatibles

La désactivation du réglage de l'accélération de la souris au niveau de l'OS est possible sur ChromeOS, macOS Catalina 10.15.1 et Windows. Linux suivra.

Échantillon

Vous pouvez tester l'API Pointer Lock en exécutant l'exemple.

Liens utiles

• Explication
• Spécification PR
• Dépôt GitHub
• Entrée 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 avoir relu cet article.