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 lorsque vous utilisez une souris ou un pavé tactile pour déplacer le pointeur à l'écran. Elle permet un mouvement précis en se déplaçant lentement tout en permettant au pointeur de traverser l'intégralité de l'écran avec un court mouvement rapide. Plus précisément, pour la même distance physique que celle où vous déplacez la souris, le pointeur à l'écran se déplace plus 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étaires, généralement les 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. Un même mouvement physique, lent ou rapide, se traduit par la même rotation. Cela se traduit par une meilleure expérience de jeu et une plus grande 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 à la mise à jour de l'API Pointer Lock.

Les plates-formes de jeux vidéo sur le Web, telles que Google Workspace et Nvidia GeForce Now, utilisent déjà ces nouvelles fonctionnalités pour satisfaire les gamers.

Utilisation de l'API

Demander un 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 vous indiquent le déplacement du 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. C'est particulièrement utile pour les jeux Web immersifs. Lorsque le pointeur est verrouillé, tous les événements de souris sont acheminé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 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 aux entrées brutes de la souris. De cette façon, les données de déplacement 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 à 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 compatible avec tous les navigateurs. Toutefois, depuis octobre 2020, les navigateurs basés sur Chromium (comme Chrome, Edge, etc.) sont les seuls à pouvoir 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. N'oubliez pas de consulter le code source.

Liens utiles

• Explication
• Spécification PR
• Dépôt GitHub
• Enregistrement ChromeStatus
• Bug de suivi Chrome
• Intention de livraison
• 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.