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

Przyspieszone przesuwanie 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ść została przebyta szybciej.

Systemy operacyjne domyślnie włączają akcelerację myszy. W niektórych grach z perspektywą własnej, zwykle strzelankami FPS, nieprzetworzone dane wejściowe myszy służą do sterowania obrotem kamery bez dostosowania przyspieszenia. Ten sam ruch fizyczny (wolny lub szybki) powoduje taki sam obrót. Według profesjonalnych graczy zapewnia to lepsze wrażenia z rozgrywki i większą dokładność.

Począwszy od Chrome 88, aplikacje internetowe mogą przełączać się między danymi o przyspieszonym i nieprzyspieszonym ruchu myszą dzięki zaktualizowanemu interfejsowi API Pointer Lock.

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

Korzystanie z interfejsu API

Wysyłanie prośby 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 ze zdarzeń w dokumencie mousemove informują, jak bardzo wskaźnik myszy przesunął się od ostatniego ruchu. 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}`);
});

Uchwycenie wskaźnika myszy (lub żądanie zablokowania wskaźnika) sprawi, że nie musisz się już martwić, że wskaźnik znajdzie się na zewnątrz. 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.

Wywołaj requestPointerLock() w elemencie docelowym, aby zażądać blokady wskaźnika, oraz nasłuchuj zdarzeń pointerlockchange i pointerlockerror, aby monitorować zmiany blokady wskaźnika.

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 surowych danych wejściowych myszy. Dzięki temu dane dotyczące ruchu myszy w zdarzeniach mousemove nie będą obejmować przyspieszenia myszy, gdy wskaźnik będzie zablokowany.

Użyj nowej obietnicy zwróconej przez requestPointerLock(), aby dowiedzieć się, 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 przyspieszonymi i nieprzyspieszonymi danymi o ruchach myszy bez zwalniania blokady wskaźnika. Wystarczy ponownie poprosić o blokadę wskaźnika z wybraną opcją. Jeśli to żądanie się nie powiedzie, pierwotny blok zostanie zachowany, a zwrócona obietnica zostanie odrzucona. Żadne zdarzenia blokady wskaźnika nie będą uruchamiane w przypadku nieudanego żądania zmiany.

Obsługa przeglądarek

Interfejs Pointer Lock API jest dobrze obsługiwany w różnych przeglądarkach. Jednak przeglądarki oparte na Chromium (np.Chrome, Edge itp.) są jedynymi, w których od października 2020 r. można wyłączyć dostosowanie akceleracji myszy na poziomie systemu operacyjnego. Najnowsze informacje znajdziesz w tabeli Zgodność z przeglądarkami w dokumentacji MDN.

Obsługa systemu operacyjnego

Wyłączanie korekty przyspieszenia myszy na poziomie systemu operacyjnego jest obsługiwane w systemach ChromeOS, macOS Catalina 10.15.1 i Windows. Za chwilę zastosujemy Linuksa.

Przykład

Możesz poeksperymentować z interfejsem Pointer Lock API, uruchamiając przykład w Glitch. Koniecznie zapoznaj się z kodem źródłowym.

Przydatne linki

• Wyjaśnienie
• Specyfikacja PR
• Repozytorium GitHub
• Wpis ChromeStatus
• Błąd śledzenia w Chrome
• Zamiar wysyłki
• Pogląd Mozilli
• Pozycja WebKit

Podziękowania

Dziękuję Jamesowi Hollyerowi, Thomasowi Steinerowi, Joe Medleyowi, Kayce'owi Basques i Vincentowi Scheibowi za opinię o tym artykule.