Aplikacje internetowe mogą teraz wyłączać przyspieszenie myszy podczas rejestrowania zdarzeń związanych z wskaźnikiem.
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ść została przebyta szybciej.
Systemy operacyjne domyślnie włączają przyspieszenie myszy. W przypadku niektórych gier własnej perspektywy, zwykle gier typu FPS, do sterowania obrotem kamery służą dane wejściowe myszy bez korekty przyspieszenia. Ten sam ruch fizyczny, wolny lub szybki, powoduje ten sam obrót. W efekcie, jak twierdzą profesjonalni gracze, zapewnia to lepsze wrażenia z gry i większą dokładność.
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 Stadia i Nvidia GeForce Now, korzystają już z tych nowych funkcji, aby zadowolić graczy FPS.
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 i obserwuj zdarzenia pointerlockchange
i pointerlockerror
, aby śledzić zmiany blokowania 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 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 danymi przyspieszonego i nieprzyspieszonego ruchu kursora 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. 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 API Lock Pointer, uruchamiając przykład w Glitch. Sprawdź kod źródłowy.
Przydatne linki
- Wyjaśnienie
- Specyfikacja PR
- Repozytorium GitHub
- Wpis w ChromeStatus
- Błąd śledzenia w Chrome
- Intencja wysyłki
- Pogląd Mozilli
- Pozycja WebKit
Podziękowania
Dziękujemy Jamesowi Hollyerowi, Thomasowi Steinerowi, Joemu Medleyowi, Kayce Basques i Vincentowi Scheibowi za sprawdzenie tego artykułu.