Godot Gyroscope on HTML5

This is a Godot 3.5 demo demonstrating how to get gyroscope data from mobile devices on an HTML5 export.

Description

The project leverages Godot's JavaScript bridge to call JS APIs, specifically to detect the device orientation. This is needed for games that are deployed on the web, since calling Input.get_gyroscope() works only on native applications.

It supports both Android and iOS platforms.

Requirements

You can access gyroscope data only in secure contexts (HTTPS).

Also, iOS devices require explicit user interaction before allowing access to gyroscope data from an HTML5 application. That's why the demo has a toggle button on the top left, which is visible only on such platforms.

How to use

There is a custom class called GyroComponent, which takes care of requesting permissions to access the gyroscope (if needed) and gathering its data.

Just instantiate the component scene in your game scene (the one which will get the data and handle it) and connect to its signals:

• ios_permission_requested(is_granted): emitted after the user has interacted with the permission popup;
• gyroscope_triggered(coords): emitted every time the JS event is triggered, the coords argument is a Vector3 holding orientation data. x holds the rotation around the X axis, y on the y axis and so on.

You can check out the main scene to see how to use the component. It has a bunch of planets on different parallax layers and it shows how to tilt the content horizontally based on sensor data.

Asset attributions

• Project Icon: Gyroscope icons created by Freepik - Flaticon
• Planets are kindly provided by Kenney