La API de Pointer Lock llegó a Chrome Canary y al canal para desarrolladores. ¡Es un placer! Espera, ¿qué? ¿No conoces la API de Pointer Lock? En pocas palabras, la API de Pointer Lock permite escribir juegos de disparos en primera persona adecuados para la Web.
La implementación de Chrome permite que una página web de pantalla completa solicite tu permiso para capturar el puntero del mouse, de modo que no puedas moverlo fuera de la página. Esto permite que los desarrolladores web escriban juegos y aplicaciones en 3D sin tener que preocuparse de que el cursor del mouse se mueva fuera de la página. Cuando el puntero está bloqueado, los eventos de movimiento del puntero tienen atributos movementX y movementY definidos que indican cuánto se movió el mouse desde el último evento de movimiento. Como es habitual con las APIs de vanguardia, estos atributos tienen prefijos del proveedor, por lo que debes usar webkitMovementX y otros similares.
Para habilitar la API de Pointer Lock en las compilaciones actuales de Chrome, la forma más fácil es ir a about:flags y activar la marca "Enable Pointer Lock". También puedes activarla iniciando Chrome con la función experimental de línea de comandos --enable-pointer-lock.
Ya hay algunas demostraciones interesantes en las que se aprovecha esta función. Consulta la demostración de WebGL de Quake 3 de Brandon Jones para ver cómo la API de Pointer Lock convierte a los juegos de FPS de WebGL en un cliente potencial viable. Otra demostración interesante es el Visualizador de Webgl
Para comenzar a usar la API de Pointer Lock, a continuación, te mostramos un pequeño fragmento de 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>
Puedes ver un ejemplo más completo en html5-demos.com. Para obtener más información, consulta el siguiente vínculo:
- Entrada de blog de Vincent Scheib (editor de especificaciones)
- Documentación de MDN
- Especificaciones de W3C