【Godot4／Web】エクスポートしたWeb(HTML5)でマウスをキャプチャする

Godot4でエクスポートしたWeb(HTML5)でマウスをキャプチャしたい！

概要

今回の記事では、Godot4でエクスポートしたWeb(HTML5)でマウスをキャプチャする手順を掲載する。

WindowsなどのデスクトップとWeb(HTML5)のアプリではマウスのキャプチャの開始の挙動が違うのでそこらへんを説明する。

仕様書

環境

• Gogot 4.1.1

手順書

マウスをキャプチャしてマウスの移動に合わせて視線を移動（FPS的な感じに）する場合、デスクトップのアプリでは下記のようにシーンにアタッチしたスクリプトの_ready関数の中でマウスのキャプチャを開始すれば良いんだけども

func _ready():
    Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED)

どうやらWeb(HTML5)のアプリではユーザビリティ的にいきなりマウスをキャプチャするのはNGといいうことで上記のコードが無視される。ページを開いていきなりマウスカーソルが消えるのはたしかに良くない。

んで、Web(HTML5)のアプリではどうするのかというと、「特定のキーボードを押したらマウスのキャプチャを開始」「ボタンを押したらマウスのキャプチャを開始」みたいな感じにユーザーの入力によってマウスのキャプチャを開始されるようにする。

特定のボタンが押されたらマウスのキャプチャを切り替える例。ボタンが押された時のシグナルに下記の関数を設定する。

func _on_button_pressed():
    if (Input.mouse_mode == Input.MOUSE_MODE_CAPTURED):
        Input.set_mouse_mode(Input.MOUSE_MODE_VISIBLE)
    else:
        Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED)

Input Mapにmouse_captureとmouse_releaseというアクションを割り当ててマウスのキャプチャを開始、終了する例。

func _input(event):
    if Input.is_action_just_pressed("mouse_capture"):
        Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED)
    if Input.is_action_just_pressed("mouse_release"):
        Input.set_mouse_mode(Input.MOUSE_MODE_VISIBLE)

どちらの方法でもWeb(HTML5)のアプリでマウスをキャプチャすることができた。

まとめ（感想文）

ユーザビリティを考えたらそりゃそうだよねと思う今日のこの頃。