Element: requestPointerLock() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Element.requestPointerLock()
メソッドで、ポインターをこの要素にロックすることを非同期にリクエストすることができます。
リクエストが成功したか失敗したかを追跡するには、 pointerlockchange
および pointerlockerror
イベントを Document
レベルで待ち受けする必要があります。
構文
requestPointerLock()
requestPointerLock(options)
引数
options
省略可-
以下のプロパティを含むことができるオプションオブジェクトです。
unadjustedMovement
省略可-
OS レベルのマウス加速機能を無効にし、代わりに生のマウス入力にアクセスします。既定値は
false
で、true
に設定すると加速機能が無効になります。
返値
例
ポインターロックはオンラインゲームでよく使われます。マウスポインターが動き回ったり、ゲームエリアの外に出たり、ウィンドウの端に届いたりすることなく、マウスの動きをゲームの操作に集中させたい場合に使用します。
ポインターロックを有効にするには、ボタンを押すか、ゲームキャンバスそのものを押すなどして、ユーザーに何らかの方法で UI を操作してもらう必要があります。
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock();
});
オペレーティングシステムは既定で マウス加速機能を有効にしています。これは、ゆっくり正確な動きをしたいとき(グラフィックパッケージを使用する場合を考えてみてください)に便利ですが、より速いマウス操作で大きな距離を移動したいとき(スクロールや複数のファイルを選択する場合を考えてみてください)にも便利です。しかし、一人称視点のゲームでは、カメラの回転を制御するために生のマウス入力データが好まれます。プロゲーマーによれば、この方がより良いゲーム操作で高い精度が得られるとのことです。
OS レベルのマウス加速機能を無効にし、生のマウス入力にアクセスするには、unadjustedMovement
を true
に設定します。
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock({
unadjustedMovement: true,
});
});
それ以外の例のコードは次をご覧ください。
セキュリティ
単発のユーザーによる有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作する必要があります。
仕様書
Specification |
---|
Pointer Lock 2.0 # dom-element-requestpointerlock |
ブラウザーの互換性
BCD tables only load in the browser