All Collections
Interactions
Creating Interactions With Gyroscope
Creating Interactions With Gyroscope
Updated over a week ago

A gyroscope is a device for measuring orientation. It spins freely around an axis. Your iPhone can act as a gyroscope, measuring your phone's orientation along the X, Y, and Z axes. Play lets you harness your phone's gyroscope and trigger actions when your phone is oriented in a specific direction.

Axis

The Axis property lets you choose the axis of rotation that the gyroscope will orient around. You can select the X, Y, or Z axis or use them all together.

In the diagrams below, the black line represents the axis, and the red arrow represents the direction you'll tilt your phone.

By default, our gyroscope will measure from a starting orientation of "80, 0, 0." This means 80º around the X axis (which simulates someone holding their phone) and 0º in the Y & Z axis (which means the phone is facing the user and upright). An orientation of "0, 0, 0" would be the phone laying flat on a surface.

You can adjust this starting point using the gyroscope trigger's X, Y, and Z Offset properties, which are available when the respective axis is selected.

Continuous Actions

Gyroscope triggers have Min and Max property values that are the endpoints of the range of degrees that the gyroscope trigger will recognize. When the gyroscope is at the Min degree value, the action will also be at its minimum value (or start state, if you're using a Set State action).

The opposite is also true. When the gyroscope is at the Max degree value, the action will be at its maximum value (or end state, if you're using a Set State action).

Within the gyroscope's range, the action will move continuously within its own range.

Sample Gyroscope Interaction

Let’s walk through setting up a basic Level App interaction using the Gyroscope trigger. For a more in-depth tutorial, check out this step-by-step video tutorial that goes with the Gyroscope demo project in the Learn section.

  • First, add a stack to your page. Customize it to look like a short, wide rectangle, and pin it to the center of your page.

  • Next, add a Gyroscope trigger to either the full page or the stack (it doesn’t matter).

  • Change the trigger’s axis to Z and change the range from -45º to 45º. No need to change the offset.

  • Next, add a Set 3D Rotation action onto the trigger.

  • Set your stack as the Target, the axis to Z, and keep Mirror Max Values on. Set the Min Zº to -30º (which will cause the mirrored Max Zº to be 30º).

  • Connect iOS in Play Mode and test it out!

Did this answer your question?