API Pointer Lock Leva jogos QPS para o navegador

Ilmari Heikkinen
X Página inicial

A API Pointer Lock chegou recentemente ao Chrome Canary e ao Canal de Desenvolvedores. Aproveite! Espera, o quê? Ainda não conhece a API Pointer Lock? Em poucas palavras, a API Pointer Lock possibilita a criação de jogos de tiro em primeira pessoa adequados para a Web.

A implementação do Chrome permite que uma página da Web em tela cheia peça sua permissão para capturar o ponteiro do mouse, de modo que não seja possível movê-lo para fora da página. Isso permite que os desenvolvedores da Web criem jogos e aplicativos em 3D sem se preocupar com o movimento do cursor do mouse fora da página. Quando o ponteiro está bloqueado, os eventos de movimento do ponteiro têm os atributos movementX e movementY definidos, que informam quanto o mouse se moveu desde o último evento de movimento. Como de costume com as APIs de borda, esses atributos têm prefixos de fornecedor. Portanto, é necessário usar webkitMovementX e similares.

Para ativar a API Pointer Lock nos builds atuais do Chrome, a maneira mais fácil é acessar about:flags e ativar a flag "Ativar Pointer Lock". Também é possível ativar o recurso iniciando o Chrome usando a sinalização de linha de comando --enable-pointer-lock.

Já existem algumas demonstrações interessantes aproveitando esse recurso. Confira a demonstração do WebGL do Quake 3 de Brandon Jones para saber como a API Pointer Lock torna os jogos WebGL FPS um cliente em potencial viável. Outra demonstração legal é o Webgl Street Viewer

Para começar a usar a API Pointer Lock, veja um pequeno trecho extraído do 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>

Você pode ver um exemplo mais completo em html5-demos.com. Para mais informações, dê uma olhada em: