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ść 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.
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. Aby monitorować zmiany blokowania wskaźnika, nasłuchuj zdarzeń pointerlockchange
i pointerlockerror
.
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
- 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.