Unity陀螺仪使用-仿崩坏3旋屏效果实现

O(∩_∩)O哈哈~大家好,这是本菜鸡的第一篇分享,主要介绍如何还原类似崩坏3主界面的陀螺仪旋屏效果。以下实现仅基于个人的分析理解,难度挺低的,大佬们凑合看看就好啦,写的不好的地方欢迎指正哈~

需求分析

崩坏3的主界面陀螺仪效果具备以下两个特点:

1、当用户转动手机的时候,摄像机的视角会朝指定的方向旋转。

2、摄像机的视角旋转速度和回复速度的大小与用户转动手机的速度大小成正比。

设计实现

首先了解下Unity中提供的陀螺仪相关信息。如下图所示,陀螺仪的坐标轴是右手坐标系与unity的左手坐标系不同,在使用时需要注意!

手机平放,x轴为右手边,y轴为正前方,z轴为正上方。


图1 陀螺仪坐标轴

陀螺仪主要参数详解:

Input.gyro.enabled:bool类型,返回陀螺仪的启用状态。

Input.gyro.attitude:Vector3类型,返回手机当前的姿态信息,即与手机初始姿态相比在x、y、z轴上的偏离情况(单位:弧度),初始姿态指的是手机水平正向放置(此时Input.gyro.attitude为(0,0,0))。

Input.gyro.rotationRate:Vector3类型,返回陀螺仪测量的各轴上的旋转速率的原始值,单位为“弧度/秒”。

Input.gyro.rotationRateUnbiased:Vector3类型,返回陀螺仪测量的各轴上的旋转速率的修正值,单位为“弧度/秒”。

Input.gyro.updateInterval:float类型,返回陀螺仪参数的更新间隔,单位:秒。

Input.gyro.gravity:Vector3类型,返回陀螺仪测量的重力加速度向量。

Input.gyro.userAcceleration:Vector3类型,返回设备的加速度向量。

注意:在手机的Portrait(竖屏)和Landscape(横屏)模式下,陀螺仪的坐标轴并不一致,如果需要的话需要相应变换。

了解陀螺仪相关参数的作用后,我们开始分析如何实现需求。首先,只有当用户转动手机的时候,摄像机的视角才会相应变化,说明摄像机的变化跟手机的当前姿态无关。这意味着我们的输入应该是陀螺仪测量的旋转速率(rotationRate)而非手机的当前姿态(attitude)信息。由于rotationRateUnbiased是在rotationRate的基础上进行修正,测量结果更加准确,我们使用该属性控制摄像机视角的旋转。

我们所说的摄像机视角的旋转,实际上是摄像机基于自身坐标轴根据陀螺仪的rotationRateUnbiased参数进行旋转。结合图1各轴的方向分析可知,手机横屏放置时,陀螺仪的x、y轴和摄像机自身的x、y轴的正方向是吻合的(z轴正方向相反)。我们仅需要在x、y轴方向上旋转摄像机,陀螺仪z轴上的旋转变化不应对摄像机产生影响。

我们可通过在Update方法里执行以下语句控制摄像机的旋转。

transform.Rotate(vertRotateRate, horiRotateRate, 0);

其中,vertRotateRate和horiRotateRate分别表示陀螺仪在垂直(绕x轴)方向和水平(绕y轴)方向上的旋转速率:

vertRotateRate = Input.gyro.rotationRateUnbiased.x;

horiRotateRate = Input.gyro.rotationRateUnbiased.y;

为了防止旋转速率过大,导致摄像机瞬间旋转较大角度从而影响表现的问题,我们需要通过以下语句限制旋转速率的大小:

vertRotateRate = Mathf.Sign(vertRotateRate) * Mathf.Clamp(Mathf.Abs(vertRotateRate), 0, maxRotateRate);

horiRotateRate = Mathf.Sign(horiRotateRate) * Mathf.Clamp(Mathf.Abs(horiRotateRate), 0, maxRotateRate);

其中,maxRotateRate是我们设定的最大旋转速率,其值可设为Mathf.PI,即最大为π rad / s。

实现摄像机的旋转后,还要考虑如何在旋转结束后让其回复至初始旋转状态,并且使得回复速率与陀螺仪输入的旋转速率成正比,即"转得越快,回得越快"。为了实现摄像机得回复功能,我们需要用一个变量initRotation(Quaternion类型)记录摄像机的初始旋转状态。因此,我们可以通过在Update里面对相机的当前rotation到initRotation进行插值以实现回复效果,实现如下:

transform.localRotation = Quaternion.Slerp(transform.localRotation, initRotation, restoreRate + restoreRate * factor);

其中,restoreRate是一个可设定的默认值,建议取值在0.05左右,factor是一个缩放因子,跟vertRotateRate 及horiRotateRate 相关,其值为vertRotateRate 和horiRotateRate 中绝对值较大者和maxRotateRate的比值(factor的值在[0,1]之间)。通过restoreRate和factor构建的简单线性关系,可以实现回复速率与旋转速率成正比。factor的计算如下:

factor = Mathf.Max(Mathf.Abs(vertRotateRate), Mathf.Abs(horiRotateRate)) / maxRotateRate;

需要注意的是,我们使用transform.localRotation旋转摄像机,如果你的项目中摄像机没有父对象,请改为transform.rotation。

好了,讲到这里,我们的实现逻辑已经很清晰了,其实超级简单对不对,但效果还是可以的。值得再提的一点是,我们可以设置两个缩放因子vertRotateRateScale、horiRotateRateScale来分别控制摄像机垂直、水平方向上旋转速率的大小(使得两个方向上的旋转速率差异化),以增强灵活性。

最后,放出我们最终的实现代码,毕竟目前水平有限,如果您有好的建议或优化方案,还请不吝赐教哈O(∩_∩)O~感谢!

public class CameraGyroController : MonoBehaviour

{

    public Vector3 initEuler = Vector3.zero;                    //初始旋转对应欧拉角

    private Quaternion initRotation = Quaternion.identity;      //初始旋转信息

    private Vector3 lastInitEuler = Vector3.zero;              //用于判断初始欧拉角是否变化

    public float vertRotateRateScale = 0f;                      //垂直陀螺仪旋转速率缩放系数

    public float horiRotateRateScale = 0f;                      //水平陀螺仪旋转速率缩放系数

    public float restoreRate = 0f;                              //回复速率

    private float maxRotateRate = Mathf.PI;                    //陀螺仪单轴最大旋转速率

    private float factor = 0f;                                  //陀螺仪旋转速率和回复速率间的关联系数(旋转速率越大回复越快)

    private float vertRotateRate = 0f;                          //垂直方向旋转速率

    private float horiRotateRate = 0f;                          //水平方向旋转速率

    void Init()

    {

        initRotation = transform.localRotation;

        initEuler = initRotation.eulerAngles;

        lastInitEuler = initEuler;

        Input.gyro.enabled = true;

    }

    /// <summary>

    /// 根据陀螺仪控制主界面mainCamera的旋转

    /// </summary>

    void CameraRotateControl()

    {

        if (!Input.gyro.enabled)

        {

            return;

        }

        //如果初始旋转角度发生变化,则更新

        if (lastInitEuler != initEuler)

        {

            initRotation = Quaternion.Euler(initEuler);

            lastInitEuler = initEuler;

        }

        vertRotateRate = Input.gyro.rotationRateUnbiased.x;

        vertRotateRate = Mathf.Sign(vertRotateRate) * Mathf.Clamp(Mathf.Abs(vertRotateRate), 0, maxRotateRate);

        horiRotateRate = Input.gyro.rotationRateUnbiased.y;

        horiRotateRate = Mathf.Sign(horiRotateRate) * Mathf.Clamp(Mathf.Abs(horiRotateRate), 0, maxRotateRate);

        factor = Mathf.Max(Mathf.Abs(vertRotateRate), Mathf.Abs(horiRotateRate)) / maxRotateRate;

        //z轴不旋转

        transform.Rotate(vertRotateRateScale * vertRotateRate, horiRotateRateScale * horiRotateRate, 0);

        //逐帧往初始位置回复

        transform.localRotation = Quaternion.Slerp(transform.localRotation, initRotation, restoreRate + restoreRate * factor);

    }

    // Use this for initialization

    void Start()

    {

        Init();

    }

    // Update is called once per fram

    void Update()

    {

        CameraRotateControl();

    }

    void OnGUI()

    {

        GUILayout.Label("rotation rate unbiased:" + Input.gyro.rotationRateUnbiased);

        vertRotateRateScale = GUI.HorizontalSlider(new Rect(75, 400, 200, 40), vertRotateRateScale, 0f, 1f);

        GUI.Label(new Rect(300, 395, 200, 40), "Vert Rotate Rate:" + vertRotateRateScale);

        horiRotateRateScale = GUI.HorizontalSlider(new Rect(75, 475, 200, 40), horiRotateRateScale, 0f, 1f);

        GUI.Label(new Rect(300, 470, 200, 40), "Hori Rotate Rate:" + horiRotateRateScale);

        restoreRate = GUI.HorizontalSlider(new Rect(75, 550, 200, 40), restoreRate, 0f, 0.2f);

        GUI.Label(new Rect(300, 545, 200, 40), "Restore Rate:" + restoreRate);

    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容