Deaktiviere die Mausbeschleunigung, um ein besseres FPS-Spielerlebnis zu ermöglichen

Web-Apps können jetzt die Mausbeschleunigung beim Erfassen von Zeigerereignissen deaktivieren.

François Beaufort

Die beschleunigte Bewegung ist eine ergonomische Funktion, wenn der Mauszeiger auf dem Bildschirm mit einer Maus oder einem Touchpad bewegt wird. Sie ermöglicht eine präzise Bewegung, indem sie sich langsam bewegt, und gleichzeitig ermöglicht es dem Zeiger, mit einer schnellen, kurzen Bewegung den gesamten Bildschirm zu überqueren. Wenn Sie die Maus beispielsweise eine bestimmte Strecke bewegen, bewegt sich der Cursor auf dem Bildschirm weiter, wenn die Strecke schneller zurückgelegt wurde.

Bei Betriebssystemen ist die Mausbeschleunigung standardmäßig aktiviert. Bei einigen Spielen mit eigener Perspektive, in der Regel First-Person-Shootern (FPS), werden Rohdaten der Mauseingabe verwendet, um die Kameradrehung ohne Beschleunigungseinstellung zu steuern. Die gleiche physische Bewegung, langsam oder schnell, führt zur gleichen Drehung. Dies führt laut Profi-Spielern zu einem besseren Spielerlebnis und einer höheren Genauigkeit.

Ab Chrome 88 können Webanwendungen dank der aktualisierten Pointer Lock API zwischen beschleunigten und nicht beschleunigten Mausbewegungen wechseln.

Webbasierte Gaming-Plattformen wie Google Stadia und Nvidia GeForce Now nutzen diese neuen Funktionen bereits, um FPS-Spieler zufriedenzustellen.

API verwenden

Zeigersperre anfordern

Eine Maussperre ist der kanonische Begriff dafür, dass eine Desktopanwendung das Mauszeigersymbol ausblendet und die Mausbewegung für etwas anderes interpretiert, z. B. für das Umsehen in einer 3D-Welt.

Die Attribute movementX und movementY aus den Dokumentereignissen mousemove geben an, um wie viel sich der Mauszeiger seit dem letzten Verschiebungsereignis bewegt hat. Diese werden jedoch nicht aktualisiert, wenn sich der Cursor außerhalb der Webseite bewegt.

document.addEventListener("mousemove", (event) => {
  console.log(`movementX: ${event.movementX} movementY: ${event.movementY}`);
});

Wenn Sie den Mauszeiger erfassen (oder eine Zeigersperre anfordern), müssen Sie sich keine Sorgen mehr machen, dass sich der Zeiger nach draußen bewegt. Das ist besonders nützlich für immersive Webspiele. Wenn der Cursor gesperrt ist, werden alle Mausereignisse an das Zielelement der Cursorsperre gesendet.

Rufen Sie requestPointerLock() für das Zielelement auf, um eine Zeigersperre anzufordern. Warten Sie außerdem auf die Ereignisse pointerlockchange und pointerlockerror, um Änderungen der Zeigersperre zu überwachen.

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");
});

Mausbeschleunigung deaktivieren

Rufen Sie requestPointerLock() mit { unadjustedMovement: true } auf, um die Anpassung auf Betriebssystemebene für die Mausbeschleunigung zu deaktivieren und auf Rohdaten der Maus zuzugreifen. So enthalten die Daten zu Mausbewegungen aus mousemove-Ereignissen keine Mausbeschleunigung, wenn der Zeiger gesperrt ist.

Nutze das neue zurückgegebene Promise von requestPointerLock(), um festzustellen, ob die Anfrage erfolgreich war.

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();
      }
    });
}

Sie können zwischen Daten für beschleunigte und nicht beschleunigte Mausbewegungen wechseln, ohne die Maussperre aufzuheben. Bitten Sie einfach noch einmal mit der gewünschten Option um die Cursorsperre. Wenn diese Anfrage fehlschlägt, bleibt die ursprüngliche Sperre intakt und das zurückgegebene Versprechen wird abgelehnt. Bei einer fehlgeschlagenen Änderungsanfrage werden keine Ereignisse für die Zeigersperre ausgelöst.

Unterstützte Browser

Die Pointer Lock API wird in vielen Browsern unterstützt. Seit Oktober 2020 wird die Deaktivierung der Anpassung auf Betriebssystemebene für die Mausbeschleunigung jedoch nur von Chromium-basierten Browsern wie Chrome oder Edge unterstützt. Weitere Informationen finden Sie in der MDN-Tabelle zur Browserkompatibilität.

Betriebssystemunterstützung

Die Deaktivierung der Anpassung der Mausbeschleunigung auf Betriebssystemebene wird unter ChromeOS, macOS Catalina 10.15.1 und Windows unterstützt. Linux folgt.

Beispiel

Sie können mit der Pointer Lock API experimentieren, indem Sie das Beispiel in Glitch ausführen. Sehen Sie sich unbedingt den Quellcode an.

Nützliche Links

• Erläuterung
• Spezifikations-PR
• GitHub-Repository
• ChromeStatus-Eintrag
• Tracking-Fehler in Chrome
• Versandabsicht
• Die Position von Mozilla
• Position von WebKit

Danksagungen

Vielen Dank an James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques und Vincent Scheib für die Rezensionen zu diesem Artikel.