Unity 根據手機陀螺儀做UI動態旋轉移動的功能。像手遊崩壞3裡面流動的UI介面一樣
玩過手遊崩壞3的應該會發現遊戲裡面的UI 介面還有一些場景 會根據 玩家手機的平衡狀態對UI或者相機進行位移或者旋轉。
今天我們要使用移動端的重力感應,做類似的效果,來增加UI介面的流動感.
其實就是通過移動端的重力感應獲得一個 三維向量,然後根據這個向量,對目標 UI 進行 旋轉,位移 等等操作。
-
首先我們先了解移動端手機陀螺儀的向量方向。首先,水平拿著手機,有Home鍵的一端右手拿。然後,由於圖可知,綠線X軸就是垂直向上的線,Y軸就是水平向左的線。而Y軸就是伸向手機螢幕裡面的線。在你左右前後搖動手機的時候。Unity 可以通過
Input.acceleration
-1
到1
.
-
既然,知道了怎麼獲取手機的陀螺儀的變化。那麼,通過這個值我們用來控制UI或者其他任何物件。
-
但是,要讓Unity 的UI 進行位移,旋轉變化的話。還得先設定點東西。
首先找到 UI畫布的Canvas
元件。修改Render Mode
為Screen Space-Camera
.並且指定相應的的Camera
。進行這一步操作,你的UI 才可以進行正確的位移和旋轉。
-
其次呢。就是邏輯了。我們在這裡是運用手機的
X軸
的變化來改變tager
物件的Y軸
旋轉,X軸
移動;Y軸
的變化來改變tager
物件的X軸
旋轉,Y軸
Z軸
的變化只去改變tager
物件的Z軸
位置。 -
剩下的就比較簡單了,就是程式碼了,所以老規矩上指令碼吧。程式碼沒有優化,比較智障,請平復一下心情再看。
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;