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

Aplikacje internetowe mogą teraz wyłączać akcelerację myszy podczas rejestrowania zdarzeń wskaźnika.

François Beaufort

Przyspieszone przesuwanie to ergonomiczna funkcja, która umożliwia szybsze przesuwanie wskaźnika na ekranie za pomocą myszy lub trackpada. Umożliwia precyzyjne poruszanie się poprzez powolne przesuwanie, a także przesuwanie wskaźnika po całym ekranie za pomocą szybkiego, krótkiego ruchu. Oznacza to, że przy tej samej odległości, o którą przesuniesz mysz, wskaźnik na ekranie przesunie się dalej, jeśli ruch był szybszy.

Systemy operacyjne domyślnie włączają przyspieszenie myszy. W przypadku niektórych gier z perspektywy pierwszej osoby, zwykle strzelanek pierwszoosobowych (FPS), do sterowania obrotem kamery bez korekty przyspieszenia używane są surowe dane wejściowe z myszy. Ten sam ruch fizyczny, niezależnie od tego, czy jest powolny czy szybki, powoduje ten sam obrót. Według profesjonalnych graczy zapewnia to lepsze wrażenia z gry i większą dokładność.

Od Chrome 88 aplikacje internetowe mogą przełączać się między przyspieszonymi a nieprzyspieszonymi danymi o ruchu myszy dzięki zaktualizowanemu interfejsowi Pointer Lock API.

Platformy do gier w internecie, takie jak Google Stadia i Nvidia GeForce Now, już korzystają z tych nowych możliwości, aby zadowolić graczy FPS.

Korzystanie z interfejsu API

Wysyłanie prośby o blokadę wskaźnika

Blokada wskaźnika to termin określający sytuację, w której aplikacja na komputer ukrywa ikonę wskaźnika i interpretuje ruch myszy w inny sposób, np. do rozglądania się w świecie 3D.

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

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

Przechwytywanie wskaźnika myszy (lub żądanie blokady wskaźnika) pozwala uniknąć problemu z jego przesuwaniem się poza obszar. Jest to szczególnie przydatne w przypadku wciągających gier internetowych. Gdy wskaźnik jest zablokowany, wszystkie zdarzenia myszy są przekazywane do elementu docelowego blokady wskaźnika.

Wywołaj funkcję requestPointerLock() na elemencie docelowym, aby poprosić o blokadę wskaźnika, i 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łącz przyspieszenie myszy

Wywołaj funkcję requestPointerLock() z parametrem { 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 o ruchu myszy ze zdarzeń mousemove nie będą uwzględniać przyspieszenia myszy, gdy wskaźnik jest zablokowany.

Użyj nowej zwróconej obietnicy z interfejsu requestPointerLock(), aby sprawdzić, czy żądanie zakończyło się powodzeniem.

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żesz przełączać się między przyspieszonym i nieprzyspieszonym ruchem myszy bez zwalniania blokady wskaźnika. Po prostu ponownie poproś o zablokowanie wskaźnika, wybierając odpowiednią opcję. Jeśli to żądanie się nie powiedzie, pierwotna blokada pozostanie nienaruszona, a zwrócona obietnica zostanie odrzucona. W przypadku nieudanego żądania zmiany nie będą wywoływane żadne zdarzenia blokady wskaźnika.

Obsługa przeglądarek

Interfejs Pointer Lock API jest dobrze obsługiwany przez różne przeglądarki. Jednak od października 2020 r.tylko przeglądarki oparte na Chromium (np. Chrome, Edge itp.) obsługują wyłączanie dostosowywania na poziomie systemu operacyjnego w przypadku akceleracji myszy. Aktualne informacje znajdziesz w tabeli Zgodność z przeglądarkami na stronie MDN.

Obsługa systemu operacyjnego

Wyłączanie dostosowywania akceleracji myszy na poziomie systemu operacyjnego jest obsługiwane w ChromeOS, macOS Catalina 10.15.1 i Windows. Wkrótce pojawi się też wersja na Linuksa.

Przykład

Możesz wypróbować interfejs Pointer Lock API, uruchamiając przykładowy kod.

Przydatne linki

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

Podziękowania

Dziękujemy Jamesowi Hollyerowi, Thomasowi Steinerowi, Joe Medleyowi, Kayce Basques i Vincentowi Scheibowi za sprawdzenie tego artykułu.