Gyroscope scrolling using Input.gyro.eulerAngles.x reverses direction at 90°

Question

I am working on a project where I want to create a 'scrolling' effect using the gyroscope on mobile devices. The basic idea is that I have an Image object in my scene and I want to be able to show different parts of it based on device rotation with the gyroscope. For example, you see the wall of a room, and by rotating your phone you can turn to see different parts of the room (but in 2D).

For now I managed to move my Image using Input.gyro.attitude.eulerAngles.x; from Gyroscope like this:

protected void Update()
{
    var x = transform.localPosition.x;
    var gyroX = Input.gyro.attitude.eulerAngles.x;
    x += -gyroX * Speed;

    BackgroundImage.transform.localPosition =
        new Vector3(x, transform.localPosition.y, transform.localPosition.z);

}

The problem I am seeing is that when Input.gyro.attitude.eulerAngles.x reaches 86.0 it starts decreasing. Even if you are rotating your phone to the right, it changes its direction.

I checked the documentation, examples over internet, but didn't find anything about that.

The only rotation axis which I am interested in is X, because the app will be in portrait mode and I want to be able to move the image only horizontally (by x).

So the phone's rotation has to be similar to what a user would do while taking a panoramic photo:

If you have any idea what can cause that issue and how can I fix it, or any other suggestions for how can I achieve the thing I want to create, please share your knowledge.

Answer 1

rotationRateUnbiased will give you the change in rotation. Try summing the rotationRateUnbiased.x value by multiplying it by delta.time and speed. I had the same problem and solved like this:

float angle;
float speed = 100;

void Start()
{     
    Input.gyro.enabled = true;
    angle = 0;     
}


void Update()
{
    if (Input.gyro.enabled)
    {
        float gyroXin = Input.gyro.rotationRateUnbiased.y * Time.deltaTime * speed;
        angle -= gyroXin;

        // And do whatever you like with angle
    }
}

Answer 2

To pan your image based on the relative rotation of your phone, you'll want to use Gyroscope.rotationRateUnbiased instead of Gyroscope.attitude. The latter describes the current orientation of the phone, which means it will wrap around when you rotate your phone a full 360 degrees, and your magnitude depends on how far you are from Unity's global zero, not how fast you're turning your phone.

In contrast, rotationRateUnbiased gives the instantaneous speed of rotation about each axis, which sounds more like what you're looking for. Remember to scale the speed by deltaTime so your movement doesn't jump/stutter or show inconsistencies under framerate changes.

protected void Update()
{
    var x = transform.localPosition.x;

    // I'm assuming the x axis of the phone is the one crossing the phone's
    // long axis - the Unity docs are a bit coy about important details like this....
    var gyro = Input.gyro.rotationRateUnbiased.x * Time.deltaTime;

    x -= gyro * Speed;
    // You may want to clamp or wrap x here in your image space.

    BackgroundImage.transform.localPosition =
        new Vector3(x, transform.localPosition.y, transform.localPosition.z);
}