İşaretçi Kilidi API'si FPS oyunlarını tarayıcıya taşır

Ilmari Heikkinen
X Ana sayfa

Kısa süre önce Chrome Canary ve Yeni geliştirilenler kanalında kullanıma sunulan Pointer Lock API'yi kaçırmayın. Bir dakika, ne? Pointer Lock API'yi henüz duymadınız mı? Özetle, Pointer Lock API, web için uygun birinci şahıs nişancı oyunları yazmayı mümkün kılar.

Chrome uygulaması, tam ekran görüntülenen bir web sayfasının fare işaretçisini yakalamak için izninizi istemesine olanak tanır. Böylece, fare işaretçisini sayfanın dışına taşıyamazsınız. Bu, web geliştiricilerinin fare imlecinin sayfanın dışına çıkmasından endişe duymadan 3D oyunlar ve uygulamalar yazmasına olanak tanır. İşaretçi kilitlendiğinde, işaretçi hareketi etkinliklerinde, son hareket etkinliğinden bu yana farenin ne kadar hareket ettiğini belirten movementX ve movementY özellikleri tanımlanmıştır. Yeni sürüm API'lerde her zaman olduğu gibi bu özellikler tedarikçi firma ön ekine sahiptir. Bu nedenle webkitMovementX ve benzeri öğeleri kullanmanız gerekir.

Mevcut Chrome yapılarında Pointer Lock API'yi etkinleştirmenin en kolay yolu about:flags adresine gidip "İşaretçi Kilidini Etkinleştir" işaretini açmaktır. İsterseniz --enable-pointer-lock komut satırı işaretini kullanıp Chrome'u başlatarak da bu özelliği açabilirsiniz.

Bu özelliği kullanan birkaç harika demo zaten var. Pointer Lock API'nin, WebGL FPS oyunlarını nasıl uygun bir potansiyel haline getirdiğini görmek için Brandon Jones'un Quake 3 WebGL demosuna göz atın. Bir diğer etkileyici demo da Webgl Street Görüntüleyici'dir.

Pointer Lock API'yi kullanmaya başlamak için MDN'den alınan küçük bir snippet'i aşağıda görebilirsiniz:

<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>

Daha kapsamlı bir örneği html5-demos.com adresinde görebilirsiniz. Daha fazla bilgi için şuraya göz atın: