L'API Pointer Lock porta i giochi FPS nel browser

Ilmari Heikkinen
X Home page

L'API Pointer Lock è disponibile di recente in Chrome Canary e nel canale Dev. Aspetta, cosa? Non hai mai sentito parlare dell'API Pointer Lock? In breve, l'API Pointer Lock consente di scrivere sparatutto in prima persona appropriati per il web.

L'implementazione di Chrome consente a una pagina web a schermo intero di chiedere l'autorizzazione ad acquisire il puntatore del mouse in modo da non spostarlo all'esterno della pagina. In questo modo gli sviluppatori web possono scrivere giochi e applicazioni 3D senza doversi preoccupare che il cursore del mouse si muova al di fuori della pagina. Quando il puntatore è bloccato, per gli eventi di spostamento del puntatore sono definiti attributi movementX e movementY che indicano di quanto si è spostato il mouse dall'ultimo evento di spostamento. Come di consueto, con le API periferiche, questi attributi sono con prefisso dal fornitore, quindi devi utilizzare webkitMovementX e simili.

Per attivare l'API Pointer Lock nelle build attuali di Chrome, il modo più semplice è andare su about:flags e attivare il flag "Abilita blocco puntatore". Puoi attivarlo anche avviando Chrome usando 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 WebGL di Quake 3 di Brandon Jones per scoprire in che modo l'API Pointer Lock rende i giochi FPS WebGL un potenziale potenziale cliente. Un'altra demo interessante è Webgl Street Viewer.

Per iniziare a utilizzare l'API Pointer Lock, ecco un piccolo snippet tratto 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>

Puoi vedere un esempio più completo all'indirizzo html5-demos.com. Per ulteriori informazioni, dai un'occhiata a: