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

Ora le app web possono disattivare l'accelerazione del mouse durante l'acquisizione di eventi puntatore.

François Beaufort
François Beaufort
GitHub

Il movimento accelerato è una funzionalità ergonomica quando si utilizza il mouse o il trackpad per spostare il puntatore sullo schermo. Consente movimenti precisi, che si muovono lentamente, e permette anche al puntatore di attraversare l'intero schermo con un breve movimento. In particolare, a parità di distanza fisica con cui sposti il mouse, il puntatore sullo schermo si sposta ulteriormente se la distanza viene percorsa più rapidamente.

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

Screenshot del controllo del movimento del puntatore nelle impostazioni di Windows 10.
Controllo del movimento del puntatore nelle impostazioni di Windows 10.

A partire da Chrome 88, le app web possono passare da dati sui movimenti accelerati a non accelerati del mouse e viceversa grazie all'API Pointer Lock aggiornata.

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.

Supporto dei browser

  • 37
  • 13
  • 50
  • 10.1

Fonte

Utilizzo dell'API

Richiedere un blocco del puntatore

Il blocco del puntatore è il termine canonico per indicare quando un'applicazione desktop nasconde l'icona del puntatore e interpreta il movimento del mouse per qualcos'altro, ad esempio quando si guarda 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 fuori dalla pagina web.

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

Se acquisisci il puntatore del mouse (o richiedi il blocco del puntatore), non devi più preoccuparti 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 trasferiti all'elemento target del blocco del puntatore.

Richiama requestPointerLock() sull'elemento target 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");
});

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 sul movimento del mouse dagli eventi mousemove non includeranno l'accelerazione del mouse quando il puntatore è bloccato.

Usa 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 accelerati a non accelerati del mouse senza rilasciare il blocco del puntatore. Richiedi 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 vengono attivati eventi di blocco del puntatore per una richiesta di modifica non riuscita.

Supporto del browser

L'API Pointer Lock è ben supportata su tutti i browser. Tuttavia, a partire da ottobre 2020, 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. 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. seguirà Linux.

Esempio

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

Link utili

Ringraziamenti

Ringraziamo James Hollyer, Thomas Steiner, Joe Medley, Kayce Basques e Vincent Scheib per le loro recensioni su questo articolo.