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

Web-Apps können jetzt die Mausbeschleunigung deaktivieren, wenn sie Zeigerereignisse erfassen.

François Beaufort

Die beschleunigte Bewegung ist eine ergonomische Funktion, die beim Bewegen des Mauszeigers auf dem Bildschirm mit einer Maus oder einem Trackpad verwendet wird. So können Sie den Mauszeiger präzise bewegen, indem Sie ihn langsam bewegen, aber auch den gesamten Bildschirm mit einer schnellen, kurzen Bewegung überqueren. Konkret bedeutet das: Wenn Sie die Maus über dieselbe physische Distanz bewegen, legt der Mauszeiger auf dem Bildschirm eine größere Strecke zurück, wenn Sie die Maus schneller bewegen.

In Betriebssystemen ist die Mausbeschleunigung standardmäßig aktiviert. Bei einigen Ego-Perspektive-Spielen, in der Regel First-Person-Shootern (FPS), werden die rohen Mauseingabedaten verwendet, um die Kameradrehung ohne Beschleunigungsanpassung zu steuern. Dieselbe physische Bewegung, langsam oder schnell, führt zur gleichen Drehung. Das führt laut professionellen Gamern zu einem besseren Spielerlebnis und einer höheren Genauigkeit.

Ab Chrome 88 können Web-Apps dank der aktualisierten Pointer Lock API zwischen beschleunigten und nicht beschleunigten Mausbewegungsdaten wechseln.

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

API verwenden

Zeigersperre anfordern

Eine Zeigersperre ist der kanonische Begriff dafür, wenn eine Desktopanwendung das Zeigersymbol ausblendet und Mausbewegungen für etwas anderes interpretiert, z.B. um sich in einer 3D-Welt umzusehen.

Die Attribute movementX und movementY der mousemove-Dokumentereignisse geben an, wie weit sich der Mauszeiger seit dem letzten Ereignis bewegt hat. Sie werden jedoch nicht aktualisiert, wenn sich der Mauszeiger außerhalb der Webseite befindet.

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 der Zeiger nach außen verschoben wird. Das ist besonders für immersive Webspiele nützlich. Wenn der Mauszeiger fixiert ist, werden alle Mausereignisse an das Zielelement der Mauszeigerfixierung gesendet.

Rufen Sie requestPointerLock() für das Zielelement auf, um eine Zeigerfixierung anzufordern, und achten Sie auf pointerlockchange- und pointerlockerror-Ereignisse, um Änderungen der Zeigerfixierung 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 der Mausbeschleunigung auf Betriebssystemebene zu deaktivieren und auf die Rohdaten der Maus zuzugreifen. So enthalten Mausbewegungsdaten aus mousemove-Ereignissen keine Mausbeschleunigung, wenn der Mauszeiger fixiert ist.

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

Es ist möglich, zwischen beschleunigten und nicht beschleunigten Mausbewegungsdaten zu wechseln, ohne die Zeigersperre aufzuheben. Fordern Sie die Zeigersperre einfach noch einmal mit der gewünschten Option an. Wenn diese Anfrage fehlschlägt, bleibt die ursprüngliche Sperre bestehen und das zurückgegebene Promise wird abgelehnt. Bei einer fehlgeschlagenen Änderungsanfrage werden keine Pointer Lock-Ereignisse ausgelöst.

Unterstützte Browser

Die Pointer Lock API wird von vielen Browsern unterstützt. Allerdings unterstützen nur Chromium-basierte Browser (z.B. Chrome, Edge usw.) das Deaktivieren der Anpassung der Mausbeschleunigung auf Betriebssystemebene (Stand: Oktober 2020). Aktuelle Informationen finden Sie in der Tabelle Browser compatibility (Browserkompatibilität) von MDN.

Betriebssystemunterstützung

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

Beispiel

Sie können die Pointer Lock API ausprobieren, indem Sie das Beispiel ausführen.

Nützliche Links

• Erläuterung
• Spezifikations-PR
• GitHub-Repository
• ChromeStatus-Eintrag
• Chrome-Tracking-Fehler
• Absicht zum Versand
• Position von Mozilla
• Position von WebKit

Danksagungen

Vielen Dank an James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques und Vincent Scheib für die Überprüfung dieses Artikels.