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

Ilmari Heikkinen

最近、Chrome Canary と Dev チャンネルに Pointer Lock API が導入されました。えっ待って?Pointer Lock API についてご存じないですか?簡単に言うと、Pointer Lock API を使用すると、ウェブ用の適切なファーストパーソン シューティング ゲームを記述できます。

Chrome の実装では、全画面表示のウェブページでマウスポインタをキャプチャする許可を求められるので、ページ外に移動することはできません。これにより、ウェブ デベロッパーはマウスカーソルがページの外に移動することを気にすることなく、3D ゲームやアプリケーションを作成できます。ポインタがロックされている場合、ポインタ移動イベントには、最後の移動イベント以降のマウスの移動量を示す movementX 属性と movementY 属性が定義されます。最先端の API では通常どおり、これらの属性にはベンダー プレフィックスがあるため、webkitMovementX などを使用する必要があります。

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

この機能を活用した魅力的なデモがすでにいくつか公開されています。Brandon Jones による Quake 3 WebGL のデモで、Pointer Lock API によってどのように WebGL FPS ゲームが有望な見込み顧客になるかをご確認ください。もう 1 つの便利なデモは Webgl Street Viewer です。

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>

より詳細な例については、html5-demos.com をご覧ください。詳しくは、次のリンク先をご覧ください。