Pointer Lock API によりブラウザで FPS ゲームが可能に

Ilmari Heikkinen

Pointer Lock API が Chrome Canary と Dev チャンネルにリリースされました。えっ待って?Pointer Lock API をご存じないですか?簡単に説明すると、Pointer Lock API を使用すると、ウェブ向けの適切な一人称シューティング ゲームを作成できます。

Chrome の実装では、全画面表示のウェブページがマウス ポインタをキャプチャする権限をユーザーにリクエストし、ページ外に移動できないようにします。これにより、ウェブ デベロッパーは、マウスカーソルがページの外側に移動することを気にすることなく、3D ゲームやアプリケーションを作成できます。ポインタがロックされている場合、ポインタ移動イベントには、最後の移動イベント以降にマウスが移動した距離を示す movementX 属性と movementY 属性が定義されます。最新の API では通常、これらの属性にはベンダーの接頭辞が付いているため、webkitMovementX などを使用する必要があります。

現在の Chrome ビルドで Pointer Lock API を有効にするには、about:flags に移動して [Enable Pointer Lock] フラグをオンにするのが最も簡単な方法です。--enable-pointer-lock コマンドライン フラグを使用して Chrome を起動することで有効にすることもできます。

この機能を活用したデモがすでにいくつか公開されています。Brandon Jones による Quake 3 WebGL デモで、Pointer Lock API によって WebGL FPS ゲームが有望な選択肢となる仕組みを確認してください。Webgl ストリートビューもクールなデモです。

Pointer Lock API の使用を開始するにあたって、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>