L'API Pointer Lock porta i giochi FPS nel browser

Ilmari Heikkinen

L'API Pointer Lock è stata recentemente rilasciata in Chrome Canary e nel canale Dev. Aspetta, cosa? Non hai mai sentito parlare dell'API Pointer Lock? In poche parole, l'API Pointer Lock consente di scrivere veri e propri sparatutto in prima persona per il web.

L'implementazione di Chrome consente a una pagina web a schermo intero di chiederti l'autorizzazione per acquisire il cursore del mouse in modo che non possa essere spostato all'esterno della pagina. In questo modo, gli sviluppatori web possono scrivere giochi e applicazioni 3D senza doversi preoccupare che il cursore del mouse esca dalla pagina. Quando il cursore è bloccato, gli eventi di movimento del cursore hanno gli attributi movementX e movementY definiti che indicano quanto si è spostato il mouse dall'ultimo evento di movimento. Come di consueto con le API all'avanguardia, questi attributi sono preceduti da un prefisso del fornitore, quindi devi utilizzare webkitMovementX e simili.

Per attivare l'API Pointer Lock nelle build di Chrome attuali, il modo più semplice è andare a about:flags e attivare il flag "Attiva blocco cursore". Puoi attivarla anche avviando Chrome utilizzando il flag della riga di comando --enable-pointer-lock.

Esistono già un paio di demo interessanti che sfruttano questa funzionalità. Dai un'occhiata alla demo di Quake 3 WebGL di Brandon Jones per scoprire come l'API Pointer Lock rende i giochi FPS WebGL una prospettiva concreta. Un'altra demo interessante è Webgl Street Viewer

Per iniziare a utilizzare l'API Pointer Lock, ecco un piccolo snippet preso da MDN:

<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>