Pointer Lock API Brengt FPS-games naar de browser

Ilmari Heikkinen
X Homepage

De Pointer Lock API is onlangs geland in Chrome Canary en het ontwikkelaarskanaal, iedereen is blij! Wacht wat? Heeft u nog nooit gehoord van de Pointer Lock API? Kortom, de Pointer Lock API maakt het mogelijk om goede first-person shooters voor het web te schrijven.

Dankzij de Chrome-implementatie kan een webpagina op volledig scherm uw toestemming vragen om de muisaanwijzer vast te leggen, zodat u deze niet buiten de pagina kunt verplaatsen. Hierdoor kunnen webontwikkelaars 3D-games en -applicaties schrijven zonder zich zorgen te hoeven maken dat de muiscursor buiten de pagina beweegt. Wanneer de aanwijzer is vergrendeld, zijn voor de bewegingsgebeurtenissen van de aanwijzer movementX en movementY attributen gedefinieerd die aangeven hoeveel de muis heeft bewogen sinds de laatste bewegingsgebeurtenis. Zoals gebruikelijk bij geavanceerde API's, worden deze attributen voorafgegaan door de leverancier, dus je moet webkitMovementX en dergelijke gebruiken.

Om de Pointer Lock API in de huidige Chrome-builds in te schakelen, is de eenvoudigste manier om naar about:flags te gaan en de vlag "Enable Pointer Lock" in te schakelen. U kunt het ook inschakelen door Chrome te starten met de opdrachtregelvlag --enable-pointer-lock .

Er zijn al een paar coole demo's verschenen die van deze functie profiteren. Bekijk de Quake 3 WebGL-demo van Brandon Jones om te zien hoe Pointer Lock API WebGL FPS-games tot een levensvatbaar vooruitzicht maakt. Een andere coole demo is de Webgl Street Viewer

Om aan de slag te gaan met de Pointer Lock API, is hier een klein fragment overgenomen van 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>

U kunt een vollediger voorbeeld bekijken op html5-demos.com . Kijk voor meer informatie op: