Pointer Lock API przenosi gry FPS do przeglądarki

Ilmari Heikkinen

Interfejs Pointer Lock API został niedawno udostępniony w Chrome Canary i na kanale deweloperskim. Czekaj, co? Nie słyszałeś/nie słyszałaś o interfejsie Pointer Lock API? W skrócie: interfejs Pointer Lock API umożliwia tworzenie w internecie strzelanek z perspektywy pierwszej osoby.

W Chrome strona pełnoekranowa może poprosić o pozwolenie na przejęcie kursora myszy, aby nie można było go przesunąć poza stronę. Dzięki temu deweloperzy mogą tworzyć gry i aplikacje 3D bez obaw, że kursor myszy wyjdzie poza stronę. Gdy wskaźnik jest zablokowany, zdarzenia przesunięcia wskaźnika mają zdefiniowane atrybuty movementXmovementY, które wskazują, o ile przesunięto mysz od ostatniego zdarzenia przesunięcia. Jak zwykle w przypadku najnowszych interfejsów API te atrybuty mają prefiks dostawcy, więc musisz używać webkitMovementX i tego typu.

Aby włączyć interfejs Pointer Lock API w bieżących wersjach Chrome, najłatwiej jest otworzyć about:flags i włączyć flagę „Enable Pointer Lock”. Możesz też włączyć tę funkcję, uruchamiając Chrome za pomocą flagi wiersza poleceń --enable-pointer-lock.

Istnieje już kilka fajnych demonstracji, które korzystają z tej funkcji. Zapoznaj się z demo Quake 3 WebGL autorstwa Brandona Jonesa, aby zobaczyć, jak interfejs Pointer Lock API umożliwia tworzenie gier FPS w technologii WebGL. Inną ciekawą prezentacją jest WebGL Street Viewer.

Aby zacząć korzystać z interfejsu Pointer Lock API, zapoznaj się z tym krótkim fragmentem 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>