Unity WebGLA JavaScript API that renders 2D and 3D graphics in a web browser. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info
See in Glossary supports various types of input from different devices, including gamepads, joysticks, touchscreens, keyboards, and movement sensors.
WebGL supports the following inputs for gamepads:
WebGL also supports joysticks for browsers that support the HTML5 Gamepad API.
Some browsers allow access to input devices only after the user interacts with the device while the application is in focus. This type of security measure prevents the user from using connected devices for browser fingerprinting purposes. Therefore, make sure your application instructs the user to press a button on their gamepad/joystick before you call Input.GetJoystickNames() to check for connected devices.
Unity WebGL doesn’t officially support mobile devices (see WebGL browser compatibility) but it does implement Input.touches and other related APIs in browsers and devices with touch support.
By default, Unity WebGL processes all keyboard input the web page receives, regardless of whether the WebGL canvas has focus or not. This is so the end user can start using a keyboard-based application without the need to click on the WebGL canvas.
Important: This can cause issues when there are other HTML elements on the page that should receive keyboard input, such as text fields. Unity consumes the input events before the rest of the page can receive them. To have HTML elements receive keyboard input, set WebGLInput.captureAllKeyboardInput to false. When you do this, the application only receives input if the WebGL canvas has focus.
Unity WebGL doesn’t officially support mobile devices (see WebGL browser compatibility) but, for browsers and mobile devices with touch support, Unity WebGL includes support for the following sensors:
Important: Browsers only allow sensor input in secure contexts. This means you must serve the page over HTTPS. The single exception is http://localhost, which you can use during development.
The Unity WebGL platform supports cursor locking, which uses the HTML5 API Element.requestPointerLock. Use cursor lock to lock the mouse cursor to the center of the game window. When the cursor is locked, it appears hidden in Unity and doesn’t move when the mouse moves. This is particularly helpful for first-person games, where the mouse cursor is typically used to control the orientation of the player’s angle.
Note: As browser support for cursor locking varies, refer to the Mozilla documentation on the Element: requestPointerLock() method.
To lock the cursor, use the Cursor.lockState property. For example, the following code switches the cursor into the locked state when the user clicks the left mouse button:
void Update()
{
if (Input.GetMouseButtonDown(0))
{
Cursor.lockState = CursorLockMode.Locked;
}
}
Cursor locking needs to be activated by user interaction. For more information, refer to Additional considerations for full-screen mode and cursor locking.
Press the Esc key to unlock the cursor.
The stickyCursorLock property is commonly used in first-person games, because it’s useful to maintain the cursor lock mode regardless of the browser behavior.
Use stickyCursorLock to ensure that the state of Cursor.lockState is persistent, even if the browser releases the cursor lock from the Unity canvas (typically using the Esc key), in which case the cursor is locked again the next time the canvas is in focus.
Therefore, if you set WebGLInput._stickyCursorLock to true, the Cursor.lockState remains in CursorLockMode.Locked state
even if the Unity canvas HTML element unlocks the cursor.
The following occurs if you set WebGLInput._stickyCursorLock to false:
Cursor.lockState remains synchronized with the browser’s cursor lock state.
If the user presses the Esc key to cancel the canvas cursor lock, Cursor.lockState changes to CursorLockMode.None.
Note: In WebGL, stickyCursorLock is set to true by default.
Use full-screen mode in your game to do the following:
Use the entire screen for your game.
Hide the browser user interface (UI) elements such as the address bar and tabs.
Hide the Unity player UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary elements such as the title bar and toolbarA row of buttons and basic controls at the top of the Unity Editor that allows you to interact with the Editor in various ways (e.g. scaling, translation). More info
See in Glossary.
The Unity WebGL platform supports full-screen mode which uses the HTML5 API, Element.requestFullscreen.
Note: As browser support for full-screen mode varies, refer to the Mozilla documentation on the Element: requestFullscreen() method.
To enable full-screen mode, use the Screen.fullScreen property. For example, the following code switches the game to full-screen mode when the user presses the F key:
void Update()
{
if (Input.GetKeyDown(KeyCode.F))
{
Screen.fullScreen = true;
}
}
Note: The Screen.fullScreen property is set to false by default.
Full-screen mode needs to be activated by user interaction. For more information, refer to Additional considerations for full-screen mode and cursor locking.
To exit full-screen mode, press the Esc key again, or hover the mouse pointer to the top of the screen to access the address bar and tabs.
Due to security concerns, browsers only allow you to lock your cursor and enable full-screen mode after a user-initiated event such as a mouse-click or key press.
Because Unity doesn’t support separate events and rendering loops, it defers event handling until the browser no longer acknowledges full-screen or cursor lock requests issued from Unity scripting as a direct response to the event which triggered it.
Therefore, Unity triggers the request on the next user-initiated event, instead of the event that triggered the cursor lock or full-screen request.
To enable cursor lock or full-screen modes with better results, use mouse/key down events to trigger responses instead of mouse/key up events. This way you can ensure that the deferred request is guaranteed to be triggered by the corresponding mouse/key up event if not by a user-initiated event earlier.
You can also use Unity’s UI.Button component to achieve the desired behavior by creating a subclass of Button, which overrides the OnPointerDown method.
Note: Some browsers might display a notification message or prompt the user to grant permission before they can enter full-screen mode or lock the cursor.