How do you capture mouse cursors in an HTML game?

Help
, ,
1

Godot Version

3.5.3

Question

Hi guys, I hope you’re doing well.Have a quick question.
So I’m trying to make an FPS game in HTML, and I need to hide the mouse cursor and stuff.
Input.set_mouse_mode(Input.MOUSE_MODE_CAPTURED) works on PC but not in HTML
I know that I have to use something like this

if OS.has_feature(‘JavaScript’):
var js_code = “”"
var canvas = document.getElementById(“canvas”);
canvas.style.cursor = “none”;

“”"
return JavaScript.eval(js_code, true)

this only hides the mouse, if the mouse is in the window and it does not stop it from going off the screen. and appearing on the other side

2

found it

func _ready():
	
	if OS.has_feature('JavaScript'):
		var js_code = """
		document.addEventListener("click", function () {
		document.body.requestPointerLock();});
	"""
		return JavaScript.eval(js_code, true)
3

You should be able to achieve the same without manually calling JavaScript code. You need to replicate the same behavior in GDScript, that is, setting the captured mouse mode only after the user clicks. For security reasons, the web platform requires users to click or perform another interaction before the mouse can be captured.

Something like this (not tested):

func _input(event: InputEvent) -> void:
    if event is InputEventMouseButton:
        Input.mouse_mode = Input.MOUSE_MODE_CAPTURED
1 Like