Pointer Lock API bringt FPS-Spiele im Browser

Ilmari Heikkinen

Die Pointer Lock API ist vor Kurzem in Chrome Canary und in der Entwicklerversion verfügbar. Moment, was? Sie haben noch nie von der Pointer Lock API gehört? Kurz gesagt: Mit der Pointer Lock API können Sie passende Ego-Shooter für das Web schreiben.

Bei der Chrome-Implementierung kann eine Vollbild-Webseite um die Erlaubnis zur Erfassung des Mauszeigers bitten, sodass diese nicht außerhalb der Seite verschoben werden kann. So können Webentwickler 3D-Spiele und -Anwendungen schreiben, ohne sich Gedanken darüber machen zu müssen, ob sich der Mauszeiger außerhalb der Seite bewegt. Wenn der Zeiger gesperrt ist, werden für die Zeigerbewegungsereignisse movementX- und movementY-Attribute definiert, die angeben, wie viel sich die Maus seit dem letzten Bewegungsereignis bewegt hat. Wie bei modernsten APIs haben diese Attribute ein Anbieterpräfix, sodass Sie webkitMovementX und Ähnliches verwenden müssen.

Am einfachsten können Sie die Pointer Lock API in aktuellen Chrome-Builds aktivieren, indem Sie about:flags aufrufen und das Flag „Pointer Lock aktivieren“ aktivieren. Sie können ihn auch aktivieren, indem Sie Chrome mit dem Befehlszeilen-Flag --enable-pointer-lock starten.

Es gibt bereits ein paar coole Demos, die diese Funktion nutzen. Sehen Sie sich die Quake 3-WebGL-Demo von Brandon Jones an, um zu erfahren, wie die Pointer Lock API WebGL-FPS-Spiele zu einem rentablen Kunden macht. Eine weitere coole Demo ist der Webgl Street Viewer.

Zum Einstieg in die Pointer Lock API finden Sie hier ein kleines Snippet von 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>

Ein ausführlicheres Beispiel finden Sie unter html5-demos.com. Weitere Informationen erhalten Sie unter: