JavaScript プログラミング講座

 

ポインタロックについて

 


■ Pointer Lock API について

 
HTML5 世代の機能です。
 
http://www.w3.org/TR/pointerlock/
 

■ポインタロックの機能

 
ポインタロックを使用すると、マウスカーソルが固定され、動かなくなります。
 
マウスイベントから、マウスの移動量を取得する事ができます。
 
これにより、モニタの画面端を超えるような移動を行ったとしても、正確なマウスの移動量を検出し続けることができます。
 
一人称視点の3Dゲームのマウス操作などに利用すると快適です。
 

■ポインタロックに対応しているか調べる

 
document.exitPointerLock が真であるか比較します。
 
ポインタロックに対応しているか調べる

// ------------------------------------------------------------
//ポインタロックに対応しているか調べる関数
// ------------------------------------------------------------
function DocumentIsSupportedPointerLock (document_obj){
	if(document_obj.exitPointerLock) return true;
	if(document_obj.webkitExitPointerLock) return true;
	if(document_obj.mozExitPointerLock) return true;
	return false;
}

// ------------------------------------------------------------
//ポインタロックに対応しているか調べる
// ------------------------------------------------------------
if(DocumentIsSupportedPointerLock(document)){

	alert("ポインタロックに対応している");

}else{

	alert("ポインタロックに対応していない");

}
 
 
 

 

ポインタロックを開始する

 
 
 


■任意のエレメントからポインタロックを開始する

 
■任意のエレメントからポインタロックを開始する
 
requestPointerLock() メソッドを使用します。
 
マウスやキーボードなどの押下操作中に限って、実行する事ができます。
 
Element.requestPointerLock( ) :Void
引数 Voidなし。
戻り値 Voidなし。
 
■任意のエレメントからポインタロックを開始する関数
 
エレメントからポインタロックを開始する関数

// ------------------------------------------------------------
// エレメントからポインタロックを開始する関数
// ------------------------------------------------------------
function ElementRequestPointerLock(element){
	var list = [
		"requestPointerLock",
		"webkitRequestPointerLock",
		"mozRequestPointerLock"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(element[list[i]]){
			element[list[i]]();
			return true;
		}
	}
	return false;
}
 
■ユーザーの許可について
 
ポインタロックを使用する場合、ユーザーの許可が必要です。
 
ユーザーが拒絶した場合、ロックは解除されます。
 
 
■フルスクリーン表示中の動作について
 
フルスクリーン表示中は、ポインタロックをいつでも開始できます。
 
マウスやキーボードなどの押下操作中に、開始する必要はありません。
 
■使用例
 
エレメントをクリックすると、ポインタロックを開始する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		//ポインタロックを開始する
		ElementRequestPointerLock(element);

	};

    //-->
    </script>

  </body>
</html>
 

■ポインタロック中のエレメントを取得する

 
■ポインタロック中のエレメントを取得する
 
document.pointerLockElement プロパティを使用します。
 
■ポインタロック中のエレメントを取得する関数
 
ポインタロック中のエレメントを取得する関数

// ------------------------------------------------------------
// ポインタロック中のエレメントを取得する関数
// ------------------------------------------------------------
function DocumentGetPointerLockElement(document_obj){
	return (
		document_obj.pointerLockElement ||
		document_obj.webkitPointerLockElement ||
		document_obj.mozPointerLockElement ||
		null
	);
}
 
■取得例
 
ポインタロック中のエレメントを取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// ポインタロック中のエレメントを取得する関数
	// ------------------------------------------------------------
	function DocumentGetPointerLockElement(document_obj){
		return (
			document_obj.pointerLockElement ||
			document_obj.webkitPointerLockElement ||
			document_obj.mozPointerLockElement ||
			null
		);
	}

	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);

	};

	// ------------------------------------------------------------
	// 一定の時間隔で実行する関数
	// ------------------------------------------------------------
	setInterval(function(){

		//ポインタロック中のエレメントを取得する
		var pointer_lock_element = DocumentGetPointerLockElement(document);

		// 出力テスト
		console.log(pointer_lock_element);

	},1000);

    //-->
    </script>

  </body>
</html>
 
 

 

ポインタロックを終了する

 


■ポインタロックを終了する

 
document.exitPointerLock() メソッドを使用します。
 
Document.exitPointerLock ( ) :Void
引数 Voidなし。
戻り値 Voidなし。
 
■ポインタロックを終了する関数
 
ポインタロックを終了する関数

// ------------------------------------------------------------
// ポインタロックを終了する関数
// ------------------------------------------------------------
function DocumentExitPointerLock(document_obj){
	var list = [
		"exitPointerLock",
		"webkitExitPointerLock",
		"mozExitPointerLock"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(document_obj[list[i]]){
			document_obj[list[i]]();
			return true;
		}
	}
	return false;
}
 
■使用例
 
ポインタロックを開始してから、10 秒後に終了する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// ポインタロックを終了する関数
	// ------------------------------------------------------------
	function DocumentExitPointerLock(document_obj){
		var list = [
			"exitPointerLock",
			"webkitExitPointerLock",
			"mozExitPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(document_obj[list[i]]){
				document_obj[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);


		// 10 秒後に実行される関数
		setTimeout(function(){

			// ポインタロックを終了する
			DocumentExitPointerLock(document);

		},1000 * 10);
	};

    //-->
    </script>

  </body>
</html>
 
 

 

マウスの移動量を取得する

 


■マウスイベントから移動量を取得する

 
■マウスが移動したか監視する
 
onmousemove イベントを使用します。
 
■マウスイベントから移動量を取得する
 
Pointer Lock に対応している場合、MouseEvent が拡張されます。
 
以下のプロパティが、追加されています。
 
プロパティ名説明
momentXNumber水平方向のマウスの移動量を取得する。
momentYNumber垂直方向のマウスの移動量を取得する。
 
■ MouseEvent オブジェクトから移動量を取得する関数
 
マウスポインタから移動量を取得する関数

// ------------------------------------------------------------
// マウスポインタから移動量を取得する関数
// ------------------------------------------------------------
function MouseEventGetMomentX (mouse_event){
	return (mouse_event.momentX || mouse_event.webkitMovementX || mouse_event.mozMovementX || 0);
}

function MouseEventGetMomentY (mouse_event){
	return (mouse_event.momentY || mouse_event.webkitMovementY || mouse_event.mozMovementY || 0);
}
 
■使用例
 
マウスの移動量を取得する

<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// マウスポインタから移動量を取得する関数
	// ------------------------------------------------------------
	function MouseEventGetMomentX (mouse_event){
		return (mouse_event.momentX || mouse_event.webkitMovementX || mouse_event.mozMovementX || 0);
	}

	function MouseEventGetMomentY (mouse_event){
		return (mouse_event.momentY || mouse_event.webkitMovementY || mouse_event.mozMovementY || 0);
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスを移動すると実行されるイベント
	// ------------------------------------------------------------
	element.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

		// マウスの移動量を取得する
		var moment_x = MouseEventGetMomentX(e);
		var moment_y = MouseEventGetMomentY(e);

		// 出力テスト
		console.log("momentX:" + moment_x + " momentY:" + moment_y);
	};

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);

	};

    //-->
    </script>

  </body>
</html>