Pointer Lock API przenosi gry FPS do przeglądarki

Ilmari Heikkinen
X Strona główna

Interfejs Pointer Lock API jest już dostępny w Chrome Canary i wersji deweloperskiej. Czekaj, co? Nie znasz interfejsu Pointer Lock API? Mówiąc w skrócie, interfejs Pointer Lock API umożliwia stworzenie w internecie odpowiednich strzelanek pierwszoosobowych.

Implementacja Chrome umożliwia pełnoekranowej stronie internetowej pytanie o pozwolenie na przechwycenie wskaźnika myszy, dzięki czemu nie można go przesunąć poza stronę. Dzięki temu programiści mogą pisać gry i aplikacje 3D bez obaw o to, że kursor myszy będzie przesunięty poza stronę. Gdy wskaźnik jest zablokowany, zdarzenia ruchu wskaźnika mają zdefiniowane atrybuty movementX i movementY, które określają, jak bardzo mysz został przesunięty od ostatniego ruchu. Tak jak w przypadku najnowszych interfejsów API, atrybuty te są poprzedzane przez dostawcę, więc musisz użyć np. atrybutu webkitMovementX.

Aby włączyć interfejs Pointer Lock API w bieżących wersjach Chrome, najprościej jest wejść na about:flags i włączyć flagę „Włącz blokadę wskaźnika”. Możesz też ją włączyć, uruchamiając Chrome z użyciem flagi wiersza poleceń --enable-pointer-lock.

Istnieje już kilka ciekawych wersji demonstracyjnych tej funkcji. Obejrzyj prezentację Quake 3 WebGL autorstwa Brandona Jonesa, aby zobaczyć, jak interfejs Pointer Lock API sprawia, że gry FPS WebGL to realistyczne szanse na sukces. Kolejną fajną wersją demonstracyjną jest Webgl Street View.

Aby rozpocząć korzystanie z interfejsu Pointer Lock API, skorzystaj z krótkiego fragmentu pochodzących z 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>

Pełniejszy przykład znajdziesz na stronie html5-demos.com. Więcej informacji: