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

In Web-Apps kann jetzt die Mausbeschleunigung beim Erfassen von Mausereignissen deaktiviert werden.

François Beaufort
François Beaufort

Die beschleunigte Bewegung ist eine ergonomische Funktion, wenn Sie den Mauszeiger mit einer Maus oder einem Touchpad auf dem Bildschirm bewegen. Er ermöglicht eine präzise Bewegung, da er sich langsam bewegt, und ermöglicht gleichzeitig, dass der Cursor mit einer kurzen Bewegung den gesamten Bildschirm überquert. Wenn Sie die Maus beispielsweise eine bestimmte Strecke bewegen, bewegt sich der Cursor auf dem Bildschirm weiter, wenn die Strecke schneller zurückgelegt wurde.

Betriebssysteme aktivieren die Mausbeschleunigung standardmäßig. 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 professionellen Gamern zu einer besseren Gaming-Erfahrung und höherer Präzision.

Screenshot der Einstellung für die Cursorbewegung in Windows 10
Steuerung der Mausbewegung in den Windows 10-Einstellungen

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-Spieler zufriedenzustellen.

Unterstützte Browser

  • Chrome: 37.
  • Edge: 13.
  • Firefox: 50.
  • Safari: 10.1.

Quelle

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 mousemove-Dokumentereignissen geben an, wie weit sich der Mauszeiger seit dem letzten Bewegen-Ereignis 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 Maussperre anfordern, müssen Sie sich keine Sorgen mehr machen, dass der Mauszeiger den Bereich verlässt. 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 Maussperre anzufordern, und hören Sie auf die Ereignisse pointerlockchange und pointerlockerror, um Änderungen an der Maussperre 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 Roheingabe der Maus zuzugreifen. So enthalten die Daten zur Mausbewegung von mousemove-Ereignissen keine Mausbeschleunigung, wenn der Mauszeiger gesperrt ist.

Anhand des neuen zurückgegebenen Versprechens von requestPointerLock() kannst du feststellen, 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. Chromium-basierte Browser (z.B. Chrome, Edge usw.) sind jedoch die einzigen, die seit Oktober 2020 die Deaktivierung der Mausbeschleunigung auf Betriebssystemebene unterstützen. Aktuelle Informationen finden Sie in der Browserkompatibilitätstabelle der MDN.

Betriebssystemunterstützung

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

Beispiel

Sie können die Pointer Lock API ausprobieren, indem Sie das Beispiel auf Glitch ausführen. Sehen Sie sich den Quellcode an.

Nützliche Links

Danksagungen

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