1. 程式人生 > >Unity 根據手機陀螺儀做UI動態旋轉移動的功能。像手遊崩壞3裡面流動的UI介面一樣

Unity 根據手機陀螺儀做UI動態旋轉移動的功能。像手遊崩壞3裡面流動的UI介面一樣


    玩過手遊崩壞3的應該會發現遊戲裡面的UI 介面還有一些場景 會根據 玩家手機的平衡狀態對UI或者相機進行位移或者旋轉。
    今天我們要使用移動端的重力感應,做類似的效果,來增加UI介面的流動感.
    其實就是通過移動端的重力感應獲得一個 三維向量,然後根據這個向量,對目標 UI 進行 旋轉,位移 等等操作。

  1. 首先我們先了解移動端手機陀螺儀的向量方向。首先,水平拿著手機,有Home鍵的一端右手拿。然後,由於圖可知,綠線X軸就是垂直向上的線,Y軸就是水平向左的線。而Y軸就是伸向手機螢幕裡面的線。在你左右前後搖動手機的時候。Unity 可以通過 Input.acceleration

    獲取一個Vector3,用來記錄這三個值的變化。記住,這三個值的取值都在 -11.
    這裡寫圖片描述

  2. 既然,知道了怎麼獲取手機的陀螺儀的變化。那麼,通過這個值我們用來控制UI或者其他任何物件。

  3. 但是,要讓Unity 的UI 進行位移,旋轉變化的話。還得先設定點東西。
    首先找到 UI畫布的Canvas元件。修改Render ModeScreen Space-Camera.並且指定相應的的Camera。進行這一步操作,你的UI 才可以進行正確的位移和旋轉。
    這裡寫圖片描述

  4. 其次呢。就是邏輯了。我們在這裡是運用手機的X軸的變化來改變tager物件的Y軸旋轉,X軸移動; Y軸的變化來改變tager物件的X軸旋轉,Y軸

    移動;Z軸的變化只去改變tager物件的Z軸位置。

  5. 剩下的就比較簡單了,就是程式碼了,所以老規矩上指令碼吧。程式碼沒有優化,比較智障,請平復一下心情再看。

using System;
using UnityEngine;

[Serializable]
public class SetUp
{
    [Tooltip("敏感度")]
    public float sensitivity = 15f;   //敏感度
    
    [Tooltip("最大水平移動速度")]
    public float maxturnSpeed = 35f;    // 最大移動速度

    [Tooltip("最大垂直傾斜角移動速度")]
    public float maxTilt = 35f;    // 最大傾斜角

    [Tooltip("位移加成速率")]
    public float posRate = 1.5f;    
}

public class MobileScreenOrientation : MonoBehaviour
{

    public enum MotionAxial
    {
        All = 1,  //全部軸
        None = 2,   
        x = 3,   
        y = 4,
        z = 5
    }

    public enum MotionMode
    {
        Postion = 1,   //只是位置辯護
        Rotation = 2,   
        All = 3    //全部變化
    }

    //就是這裡比較笨了。本來使用UnityEditor類庫的多選功能。但是這個類庫不支援移動平臺。
    public MotionAxial motionAxial1 = MotionAxial.y;     
    public MotionAxial motionAxial2 = MotionAxial.None;

    public MotionMode motionMode = MotionMode.Rotation;   //運動模式

    public SetUp setUp;

    public GameObject tager;     //被移動的物件

    Vector3 m_MobileOrientation;   //手機陀螺儀變化的值

    Vector3 m_tagerTransform;
    Vector3 m_tagerPos;
    public Vector3 ReversePosition = Vector3.one; //基於陀螺儀方向的取反

    void Awake()
    {
        Screen.orientation = ScreenOrientation.Landscape;
        m_tagerTransform = Vector3.zero;
        m_tagerPos = Vector3.zero;
        
    }

    void LateUpdate()
    {
        if (tager == null)
            return;

        m_MobileOrientation = Input.acceleration;



        if (motionAxial1 == MotionAxial.None && motionAxial2 == MotionAxial.None)   //不操作任何軸
            return;
        else if (motionAxial1 == MotionAxial.x && motionAxial2 == MotionAxial.None)   // X軸
        {
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.y && motionAxial2 == MotionAxial.None)   //Y 軸
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.z && motionAxial2 == MotionAxial.None)   // z軸
        {
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, -m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.x && motionAxial2 == MotionAxial.y)   // X和Y軸
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.y && motionAxial2 == MotionAxial.x) // Y和X軸
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.x && motionAxial2 == MotionAxial.z)  // x 和 Z 軸
        {
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, -m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.z && motionAxial2 == MotionAxial.x)  // Z 和 X 軸
        {
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, -m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.y && motionAxial2 == MotionAxial.z)   // Y和Z 軸
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, -m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.z && motionAxial2 == MotionAxial.y)   // Z和 Y軸
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, -m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }
        else if (motionAxial1 == MotionAxial.All && motionAxial2 == MotionAxial.All)   // 所有軸向都運動
        {
            m_tagerTransform.y = Mathf.Lerp(m_tagerTransform.y, -m_MobileOrientation.x * setUp.maxturnSpeed * ReversePosition.y, 0.2f);
            m_tagerTransform.x = Mathf.Lerp(m_tagerTransform.x, m_MobileOrientation.y * setUp.maxTilt * ReversePosition.x, 0.2f);
            m_tagerTransform.z = Mathf.Lerp(m_tagerTransform.z, m_MobileOrientation.z * setUp.maxTilt * ReversePosition.z, 0.2f);
        }

        m_tagerPos.x = m_tagerTransform.y;
        m_tagerPos.y = -m_tagerTransform.x;
        m_tagerPos.z = m_tagerTransform.z;

        if (motionMode == MotionMode.Postion)
        {
            tager.transform.localPosition = Vector3.Lerp(tager.transform.localPosition, m_tagerPos * setUp.posRate, Time.deltaTime * setUp.sensitivity);
        }
        else if (motionMode == MotionMode.Rotation)
        {
            tager.transform.localRotation = Quaternion.Lerp(tager.transform.localRotation, Quaternion.Euler(m_tagerTransform), Time.deltaTime * setUp.sensitivity);
        }
        else
        {
            tager.transform.localPosition = Vector3.Lerp(tager.transform.localPosition, m_tagerPos * setUp.posRate, Time.deltaTime * setUp.sensitivity);
            tager.transform.localRotation = Quaternion.Lerp(tager.transform.localRotation, Quaternion.Euler(m_tagerTransform), Time.deltaTime * setUp.sensitivity);
        }
    }
    
}

####6. 趕緊把指令碼掛在Canvas物件上面,然後指定tager。打包到手機上面,測試測試吧。

效果展示:

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述


這裡寫圖片描述

Hello ,I am Edwin

首先謝謝大家的支援,其次如果你碰到什麼其他問題的話,歡迎來 我自己的一個 討論群559666429來(掃掃下面二維碼),大家一起找答案,共同進步 同時歡迎各大需求商入住,釋出自己的需求,給群內夥伴提供副職,賺取外快。

這裡寫圖片描述

相關推薦

Unity 根據手機陀螺UI動態旋轉移動功能3裡面流動UI介面一樣

    玩過手遊崩壞3的應該會發現遊戲裡面的UI 介面還有一些場景 會根據 玩家手機的平衡狀態對UI或者相機進行位移或者旋轉。     今天我們要使用移動端的重力感應,做類似的效果,來增加UI介面的流動感.     其實就是通過移動端的重力感應獲

HTML5 控制手機陀螺

監聽deviceorientation window.addEventListener('deviceorientation', function(event) { var alpha = even

html5如何獲取手機陀螺角度資訊

html5事件中,deviceorientation事件,此事件是檢測裝置方向變化時的事件。其常用屬性為alpha(x)、beta(y)、gamma(z)。 預設將手機垂直,且正面(90度)衝著自己

Unity3D中手機陀螺的使用

        使用手機陀螺儀,可以獲取手機的3D姿態,這在開發中是很有用的。當然現在的手機內建的陀螺儀都是比較廉價的,精度不高,但是作為實驗裝置看看效果還是可以的。本文將給出呼叫手機陀螺儀的簡單方法

Unite 2018 | 《3》:在Unity中實現高品質的卡通渲染

width diffuse 動態生成 LG 編輯 www. tgs term 謝謝 本篇文章為Unity官方論壇發布的文章 由於全是幹貨,為了方便自己查找,也為了避免刪除找不到了 於是復制了過來。。。 原文地址: http://forum.china.unity3d.c

Unity關於3螢幕效果實現猜想(時空斷裂)

崩壞3的螢幕效果用了bloom,扭曲效果 時空斷裂: 在觸發和沒觸發之前都有bloom效果,不過觸發了時空裂隙除了角色和特效很多東西變成暗紫色 我的猜想是這樣:用了一張替換shader方法來渲染一張mask圖,例如紅色渲染角色,綠色渲染特效,黑色就是其餘部分包括場景和天空 利用這張m

Unity特效扭曲效果(參照3處理螢幕方式實現)

  最近專案要用到扭曲效果,查了一些資料,關於崩壞3扭曲效果分析 http://forum.china.unity3d.com/forum.php?mod=viewthread&tid=32271&page=1&authorid=1 關於崩壞的效果

移動端二三事【四】:陀螺(重力感應器)實現手機位置、加速度感應以及常見應用

效果 防止 size tro 通過 select 代碼 陀螺儀 prime 首先說明一下:陀螺儀感應需在真機環境下進行調試,PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件,再通過事件對象獲取accelerationIncludingG

unity實用技能】unity3d 陀螺控制camera移動旋轉

無https://docs.unity3d.com/ScriptReference/Gyroscope.html unity 官方文檔就很清楚,只有一點要註意: 所有教程都教你怎麽用 input.gyro.attitude 但是這個表示的是空間中的位置,首先你是想做像王者榮耀開頭晃動攝像機的效果,需要把上個位

unity 移動端呼叫陀螺控制圖片移動

using UnityEngine; using System.Collections; using UnityEngine.UI; //陀螺儀控制圖片移動 public class TuoLuoYi : MonoBehaviour { private const float lowPa

移動端二三事【五】:陀螺(重力感應器)實現手機位置、加速度感應以及常見應用

首先說明一下:陀螺儀感應需在真機環境下進行除錯,PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件,再通過事件物件獲取accelerationIncludingGravity(內建重力加速度感應器)物件。程式碼如下:

Unity Gyro之使用陀螺實現簡單VR全景環視效果

轉https://jingyan.baidu.com/article/3aed632ec0f421701180914e.html 開啟Unity,新建一個空工程,具體如下圖 在場景中佈置一些物體作為參照,把相機置於其中,便於觀察,具體如下圖 拷貝MainCamer

js 獲取手機平衡陀螺)角度資訊

html5中的deviceorientation事件,此事件是檢測裝置方向變化時的事件。其常用屬性為alpha(x)、beta(y)、gamma(z)。 alpha:左右旋轉 beta:前後旋轉 g

微信小程式canvas 畫動態圓環百分比進度條例項 根據手機螢幕寬度自適應放大縮小

這裡是wxml程式碼: <component-analysis-report active="0" bindselectReport="selectReport"></component-analysis-report> <c

科普:手機裡的陀螺到底是什麼

陀螺儀是一種感測器,這個東西在手機上主要是用來檢測手機姿態的,我們玩體感遊戲少不了它,一些手機拍

圖片隨手機水平移動-陀螺360度設定條件

// 全景圖-陀螺儀 var flag=true; var firstAngle = 0; var instance = 0; var tuoluo = false;//阻止事件監聽 function deviceorientation(wrap_translateX) { // 全景圖-陀螺儀

unity 只有一個方向旋轉陀螺

最近在做一個2d專案,但是要配合外設來做,只需要使物體按照手機左右(y軸)的旋轉來進行平面上的旋轉,所以呢,之前的陀螺儀用起來就不是很方便了。 無奈之下只能捨棄之前的指令碼了(附上之前的完整的程式碼)using System.Collections; using Syst

【C#】AR unity 陀螺控制攝像機 真實方向

using UnityEngine; using System.Collections; using System.Collections.Generic; using System; public class TurntableSensorCamera : MonoBe

Unity陀螺

// ***********************************************************// Written by Heyworks Unity Studio http://unity.heyworks.com/// **********

ListView中根據手機螢幕高度動態設定只顯示一螢幕的item個數

        int contentTop = activity.getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();         int titleBarHeight = contentTop - statusBarHeight;