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 レベルで待ち受けする必要があります。

構文

js
requestPointerLock()
requestPointerLock(options)

引数

options 省略可

以下のプロパティを含むことができるオプションオブジェクトです。

unadjustedMovement 省略可

OS レベルのマウス加速機能を無効にし、代わりに生のマウス入力にアクセスします。既定値は false で、true に設定すると加速機能が無効になります。

返値

Promise で、undefined に解決します。

メモ: ブラウザーによっては、プロミスバージョンの requestPointerLock() に対応していないものもあります。

例

ポインターロックはオンラインゲームでよく使われます。マウスポインターが動き回ったり、ゲームエリアの外に出たり、ウィンドウの端に届いたりすることなく、マウスの動きをゲームの操作に集中させたい場合に使用します。

ポインターロックを有効にするには、ボタンを押すか、ゲームキャンバスそのものを押すなどして、ユーザーに何らかの方法で UI を操作してもらう必要があります。

js
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

オペレーティングシステムは既定で マウス加速機能を有効にしています。これは、ゆっくり正確な動きをしたいとき（グラフィックパッケージを使用する場合を考えてみてください）に便利ですが、より速いマウス操作で大きな距離を移動したいとき（スクロールや複数のファイルを選択する場合を考えてみてください）にも便利です。しかし、一人称視点のゲームでは、カメラの回転を制御するために生のマウス入力データが好まれます。プロゲーマーによれば、この方がより良いゲーム操作で高い精度が得られるとのことです。

OS レベルのマウス加速機能を無効にし、生のマウス入力にアクセスするには、unadjustedMovement を true に設定します。

js
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

関連情報