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>