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 del 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 movimenti precisi muovendosi lentamente, ma consente anche al cursore di attraversare l'intero schermo con un movimento breve e rapido. Nello specifico, per la stessa distanza fisica che sposti il mouse, il cursore sullo schermo si sposta più lontano se la distanza è stata percorsa più velocemente.

I sistemi operativi abilitano l'accelerazione del mouse per impostazione predefinita. Per alcuni giochi di prospettiva proprietaria, comunemente gli sparatutto in prima persona (f/s), vengono utilizzati dati non elaborati del mouse di input per controllare la rotazione della videocamera senza regolare l'accelerazione. Lo stesso movimento fisico, lento o veloce, genera la stessa rotazione. Ciò si traduce in un'esperienza di gioco migliore e in una maggiore precisione secondo i giocatori professionisti.

A partire da Chrome 88, le app web possono passare dai dati relativi ai movimenti del mouse accelerati a quelli non accelerati e viceversa grazie all'API aggiornata Blocco cursore.

Le 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

Richiedi un blocco del cursore

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

Gli attributi movementX e movementY degli eventi del documento mousemove indicano quanto si è spostato il cursore del mouse dall'ultimo evento di spostamento. Tuttavia, questi 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}`);
});

Acquisire il cursore del mouse (o richiedere un blocco del cursore) ti consente di non doverti più preoccupare del movimento del cursore al di fuori dell'area di destinazione. Questa opzione è particolarmente utile per i giochi web immersivi. Quando il cursore è bloccato, tutti gli eventi del mouse vengono inviati all'elemento target del blocco del cursore.

Chiama requestPointerLock() sull'elemento target per richiedere il blocco del cursore e ascolta gli eventi pointerlockchange e pointerlockerror per monitorare le modifiche al blocco del cursore.

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

Disattiva l'accelerazione del mouse

Richiama requestPointerLock() con { unadjustedMovement: true } per disattivare la regolazione a livello di sistema operativo per l'accelerazione del mouse e accedere all'input non elaborato del mouse. In questo modo, i dati relativi al movimento del mouse provenienti dagli eventi mousemove non includeranno l'accelerazione del mouse quando il cursore è 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 passare dai dati sui movimenti del mouse accelerati a quelli non accelerati senza rilasciare il blocco del puntatore. Basta richiedere di nuovo il blocco del cursore con l'opzione desiderata. Se la richiesta non va a buon fine, il blocco originale rimarrà inattivo e la promessa restituita verrà rifiutata. Nessun evento di blocco del puntatore verrà attivato per una richiesta di modifica non riuscita.

Supporto browser

L'API Pointer Lock è ben supportata in tutti i browser. Tuttavia, a partire da ottobre 2020, i browser basati su Chromium (ad esempio Chrome, Edge e così via) sono gli unici a supportare la disattivazione dell'impostazione a livello di sistema operativo per l'accelerazione del mouse. Per gli aggiornamenti, consulta la tabella Compatibilità del browser del 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à a breve.

Esempio

Puoi giocare con l'API Pointer Lock eseguendo l'esempio su Glitch. Assicurati di controllare il codice sorgente.

Link utili

• Spiegazione
• Specifica PR
• Repository GitHub
• Voce 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.