Disattiva l'accelerazione del mouse per offrire una migliore esperienza di gioco FPS

Le app web ora possono disattivare l'accelerazione del mouse durante l'acquisizione degli eventi puntatore.

François Beaufort

Il movimento accelerato è una funzionalità ergonomica quando si utilizza un mouse o un trackpad per spostare il puntatore sullo schermo. Consente un movimento preciso spostandosi lentamente, ma anche di attraversare l'intero schermo con un movimento breve e rapido. Nello specifico, per la stessa distanza fisica percorsa dal mouse, il puntatore sullo schermo si sposta più lontano se la distanza è stata percorsa più velocemente.

I sistemi operativi attivano l'accelerazione del mouse per impostazione predefinita. Per alcuni giochi in prima persona, in genere sparatutto in prima persona (FPS), i dati di input grezzi del mouse vengono utilizzati per controllare la rotazione della videocamera senza una regolazione dell'accelerazione. Lo stesso movimento fisico, lento o veloce, produce la stessa rotazione. Ciò si traduce in una migliore esperienza di gioco e maggiore precisione, secondo i giocatori professionisti.

A partire da Chrome 88, le app web possono passare avanti e indietro tra i dati di movimento del mouse accelerati e non accelerati grazie all'API Pointer Lock aggiornata.

Piattaforme di gioco basate sul web come Google Stadia e Nvidia GeForce Now utilizzano già queste nuove funzionalità per soddisfare i giocatori di FPS.

Utilizzo dell'API

Richiedere un blocco del puntatore

Il blocco del puntatore è il termine canonico che indica quando un'applicazione desktop nasconde l'icona del puntatore e interpreta il movimento del mouse per qualcos'altro, ad esempio per guardarsi intorno in un mondo 3D.

Gli attributi movementX e movementY degli eventi del documento mousemove indicano di quanto si è spostato il puntatore del mouse dall'ultimo evento di spostamento. Tuttavia, non vengono aggiornati quando il puntatore si sposta all'esterno della pagina web.

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

L'acquisizione del puntatore del mouse (o la richiesta di un blocco del puntatore) ti consente di non preoccuparti più che il puntatore si sposti all'esterno. Questa funzionalità è particolarmente utile per i giochi web immersivi. Quando il puntatore è bloccato, tutti gli eventi del mouse vengono inviati all'elemento target del blocco del puntatore.

Chiama requestPointerLock() sull'elemento di destinazione per richiedere un blocco del puntatore e ascolta gli eventi pointerlockchange e pointerlockerror per monitorare le modifiche al blocco del puntatore.

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

Disattivare l'accelerazione del mouse

Chiama requestPointerLock() con { unadjustedMovement: true } per disattivare la regolazione a livello di sistema operativo per l'accelerazione del mouse e accedere all'input grezzo del mouse. In questo modo, i dati sul movimento del mouse degli eventi mousemove non includeranno l'accelerazione del mouse quando il puntatore è bloccato.

Utilizza la nuova promessa restituita da requestPointerLock() per sapere se la richiesta è andata a buon fine.

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

È possibile alternare i dati di movimento del mouse accelerato e non accelerato senza rilasciare il blocco del puntatore. Basta richiedere di nuovo il blocco del puntatore con l'opzione desiderata. Se la richiesta non va a buon fine, il blocco originale rimarrà intatto e la promessa restituita verrà rifiutata. Non verranno attivati eventi di blocco del puntatore per una richiesta di modifica non riuscita.

Supporto browser

L'API Pointer Lock è ben supportata dai browser. Tuttavia, i browser basati su Chromium (ad es. Chrome, Edge e così via) sono gli unici a supportare la disattivazione della regolazione a livello di sistema operativo per l'accelerazione del mouse a partire da ottobre 2020. Per gli aggiornamenti, consulta la tabella Compatibilità del browser di MDN.

Supporto del sistema operativo

La disattivazione della regolazione a livello di sistema operativo per l'accelerazione del mouse è supportata su ChromeOS, macOS Catalina 10.15.1 e Windows. Linux seguirà.

Esempio

Puoi sperimentare l'API Pointer Lock eseguendo l'esempio.

Link utili

• Explainer
• Specification PR
• Repository GitHub
• Voce di ChromeStatus
• Bug di monitoraggio di Chrome
• Intenzione di spedizione
• Posizione di Mozilla
• Posizione di WebKit

Ringraziamenti

Grazie a James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques e Vincent Scheib per le loro recensioni di questo articolo.