Questa pagina è stata tradotta dall'API Cloud Translation.

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 del cursore.

François Beaufort

Il movimento accelerato è una funzionalità ergonomica che consente di usare un mouse o un trackpad per muoversi 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 attivano l'accelerazione del mouse per impostazione predefinita. Per alcuni giochi con prospettiva first-person, in genere sparatutto in prima persona (FPS), i dati non elaborati relativi all'input del mouse vengono utilizzati per controllare la rotazione della fotocamera senza un aggiustamento dell'accelerazione. Lo stesso movimento fisico, lento o veloce, genera la stessa rotazione. Il risultato è un'esperienza di gioco migliore e una maggiore precisione, secondo i giocatori professionisti.

Screenshot del controllo del movimento del cursore nelle impostazioni di Windows 10. — Controllo del movimento del cursore nelle impostazioni di Windows 10.

A partire da Chrome 88, le app web possono passare dai dati sul movimento del mouse accelerato a quelli non accelerato 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 FPS.

Supporto dei browser

Origine

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, non vengono aggiornati quando il cursore 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 funzionalità è 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");
});

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 del mouse non elaborato. 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 relativi al movimento del mouse accelerato a quelli non accelerato e viceversa senza rilasciare il blocco del cursore. Basta richiedere di nuovo il blocco del cursore con l'opzione desiderata. Se la richiesta non va a buon fine, il blocco originale rimarrà intacto e la promessa restituita verrà rifiutata. Non verranno attivati eventi di blocco del cursore per una richiesta di modifica non riuscita.

Supporto browser

L'API Pointer Lock è ben supportata su 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 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à a breve.

Esempio

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

Link utili

Ringraziamenti

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