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
François Beaufort
GitHub

Beschleunigte Bewegungen sind eine ergonomische Funktion bei Verwendung einer Maus oder eines Touchpads zum Bewegen des Zeigers auf dem Bildschirm. Sie ermöglicht eine präzise Bewegung, indem sie sich langsam bewegt, und gleichzeitig ermöglicht, dass der Zeiger mit einer kurzen, kurzen Bewegung den gesamten Bildschirm überquert. Insbesondere wird der Zeiger auf dem Bildschirm bei derselben physischen Entfernung, die Sie die Maus bewegen, weiter zurückgelegt, wenn die Strecke schneller zurückgelegt wird.

Betriebssysteme aktivieren die Mausbeschleunigung standardmäßig. Bei einigen Spielen aus der Erstanbieterperspektive, in der Regel Ego-Shooter (FPS), werden Rohdaten zur Mauseingabe verwendet, um die Kameradrehung ohne Anpassung der Beschleunigung zu steuern. Dieselbe physische Bewegung, ob langsam oder schnell, führt zur gleichen Drehung. Dies führt zu einem besseren Spielerlebnis und einer höheren Genauigkeit für professionelle Gamer.

Screenshot der Zeigerbewegungssteuerung in den Windows 10-Einstellungen.
Zeigerbewegungssteuerung in den Windows 10-Einstellungen.

Ab Chrome 88 können Webanwendungen 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.

Unterstützte Browser

  • 37
  • 13
  • 50
  • 10.1

Quelle

API verwenden

Zeigersperre anfordern

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

Die Attribute movementX und movementY der mousemove-Dokumentereignisse geben an, wie viel sich der Mauszeiger seit dem letzten Bewegungsereignis bewegt hat. Diese werden jedoch nicht aktualisiert, wenn sich der Mauszeiger aus 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 er sich nach außen bewegt. Das ist besonders bei immersiven Webspielen nützlich. Wenn der Zeiger gesperrt ist, werden alle Mausereignisse an das Zielelement der Zeigersperre gesendet.

Rufen Sie requestPointerLock() für das Zielelement auf, um eine Zeigersperre anzufordern, und warten Sie auf pointerlockchange- und pointerlockerror-Ereignisse, 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 die Rohdaten der Maus zuzugreifen. Auf diese Weise enthalten Mausbewegungsdaten aus mousemove-Ereignissen keine Mausbeschleunigung, wenn der Zeiger gesperrt ist.

Verwende 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 beschleunigten und nicht beschleunigten Mausbewegungsdaten wechseln, ohne die Zeigersperre loszulassen. Fordern Sie einfach die Zeigersperre mit der gewünschten Option an. Wenn diese Anfrage fehlschlägt, bleibt die ursprüngliche Sperre unverändert und das zurückgegebene Promise wird abgelehnt. Bei fehlgeschlagenen Änderungsanfragen werden keine Zeigersperre-Ereignisse ausgelöst.

Unterstützte Browser

Die Pointer Lock API wird gut in verschiedenen Browsern unterstützt. Seit Oktober 2020 können jedoch nur Chromium-basierte Browser (z. B. Chrome oder Edge) die Anpassung auf Betriebssystemebene für die Mausbeschleunigung deaktivieren. Aktualisierungen findest du in der Tabelle Browserkompatibilität des MDN.

Betriebssystemunterstützung

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

Beispiel

Du kannst die Pointer Lock API ausprobieren, indem du das Beispiel auf Glitch ausführst. Vergessen Sie nicht, sich den Quellcode anzusehen.

Nützliche Links

Danksagungen

Wir danken James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques und Vincent Scheib für die Rezensionen dieses Artikels.