Wyłącz przyspieszenie myszy, aby zwiększyć komfort grania w gry FPS

Aplikacje internetowe mogą teraz wyłączać przyspieszenie myszy podczas rejestrowania zdarzeń związanych z wskaźnikiem.

François Beaufort
François Beaufort

Przyspieszone przewijanie to ergonomiczna funkcja, która umożliwia korzystanie z myszy lub trackpada do poruszania kursorem na ekranie. Pozwala na precyzyjne przesuwanie kursora, gdy poruszasz się powoli, a także na szybkie przemieszczanie go po całym ekranie. W przypadku tej samej odległości przebytej przez kursor na ekranie, kursor przesuwa się dalej, jeśli odległość ta została przebyta szybciej.

Systemy operacyjne domyślnie włączają przyspieszenie myszy. W przypadku niektórych własnych gier z perspektywy pierwszej osoby (np. gier typu FPS) do sterowania obrotem kamery bez regulacji przyspieszenia służą surowe dane z myszy. Ten sam ruch fizyczny, wolny lub szybki, powoduje ten sam obrót. W efekcie zapewnia to lepsze wrażenia z gry i większą dokładność, co potwierdzają profesjonalni gracze.

Zrzut ekranu z ustawieniami sterowania ruchem kursora w Windows 10.
Sterowanie ruchem kursora w ustawieniach Windows 10.

Od wersji 88 Chrome aplikacje internetowe mogą przełączać się między przyspieszonym a nieprzyspieszonym ruchem kursora dzięki zaktualizowanemu interfejsowi API Lock Pointer.

Platformy do gier online, takie jak Google StadiaNvidia GeForce Now, korzystają już z tych nowych funkcji, aby zadowolić graczy FPS.

Browser Support

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

Source

Korzystanie z interfejsu API

Prośba o blokadę wskaźnika

Blokada wskaźnika to kanoniczny termin określający sytuację, w której aplikacja na komputera ukrywa ikonę wskaźnika i interpretuje ruchy myszy jako coś innego, np. rozglądanie się po świecie 3D.

Atrybuty movementX i movementY z wydarzeń dokumentu mousemove informują, o ile przesunął się wskaźnik myszy od ostatniego zdarzenia przesunięcia. Nie są one jednak aktualizowane, gdy wskaźnik znajduje się poza stroną internetową.

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

Przechwytywanie wskaźnika myszy (lub żądanie zablokowania wskaźnika) pozwala nie martwić się już o to, że wskaźnik może się przesunąć poza ekran. Jest to szczególnie przydatne w przypadku gier internetowych. Gdy wskaźnik jest zablokowany, wszystkie zdarzenia myszy są wysyłane do elementu docelowego blokady wskaźnika.

Aby zażądać zablokowania wskaźnika, wywołaj funkcję requestPointerLock() w elemencie docelowym. Aby monitorować zmiany blokowania wskaźnika, nasłuchuj zdarzeń pointerlockchangepointerlockerror.

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

Wyłączanie przyspieszenia myszy

Wywołaj funkcję requestPointerLock() z parametrami { unadjustedMovement: true }, aby wyłączyć dostosowywanie przyspieszenia myszy na poziomie systemu operacyjnego i uzyskać dostęp do nieprzetworzonego sygnału wejściowego myszy. Dzięki temu dane o ruchu kursora ze zdarzeń mousemove nie będą zawierać przyspieszenia kursora, gdy kursor jest zablokowany.

Użyj nowej obietnicy z requestPointerLock(), aby sprawdzić, czy żądanie zostało zrealizowane.

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

Można przełączać się między przyspieszonym a nieprzyspieszonym ruchem kursora bez zwalniania blokady wskaźnika. Po prostu ponownie poproś o blokadę wskaźnika z wybraną opcją. Jeśli to żądanie się nie powiedzie, pierwotny blok zostanie zachowany, a zwrócona obietnica zostanie odrzucona. W przypadku nieudanej prośby o zmianę nie zostaną wywołane żadne zdarzenia blokady wskaźnika.

Obsługa przeglądarek

Interfejs API Lock Pointer jest dobrze obsługiwany w różnych przeglądarkach. Od października 2020 r.tylko przeglądarki oparte na Chromium (np. Chrome, Edge itp.) obsługują wyłączanie regulacji przyspieszenia kursora na poziomie systemu operacyjnego. Najnowsze informacje znajdziesz w tabeli Zgodność z przeglądarkami w dokumentacji MDN.

Obsługa systemu operacyjnego

Wyłączenie regulacji przyspieszenia myszy na poziomie systemu jest obsługiwane w systemach ChromeOS, macOS Catalina 10.15.1 i Windows. Wkrótce udostępnimy też wersję na Linuksa.

Przykład

Możesz pobawić się interfejsem Pointer Lock API, uruchamiając przykład w Glitch. Sprawdź kod źródłowy.

Przydatne linki

Podziękowania

Dziękujemy Jamesowi Hollyerowi, Thomasowi Steinerowi, Joemu Medleyowi, Kayce BasquesVincentowi Scheibowi za sprawdzenie tego artykułu.