VR UI的問題在于如何展示出立體效果。之前給大家介紹了一個2D UI和3D UI。
2D UI就和正常UI一樣,在分屏的狀態下依然使用單屏顯示就OK,使用NGUI/UGUI都可以,不過還是推薦大家使用UGUI,我后面介紹的這些內容也都是使用UGUI的。
3D UI之前給大家介紹了使用3D 模型制作的UI,結合TextMesh來做。這個在AR場景中也是OK的。但是VR場景中,想達到立體的效果,UI也必須要分屏處理。
今天主要給大家介紹一下Cardboard SDK中使用的UI系統。在介紹這個UI系統之前,先要說下UGUI的事件系統EventSystem。
當我們在場景中創建任一UI對象后,Hierarchy面板中都可以看到系統自動創建了對象EventSystem,可以看到該對象下有三個組件:EventSystem、StandaloneInputModule、TouchInputModule(5.x版本貌似沒有了),后面兩個組件都繼承自BaseInputModule。
Unity5.3.0f4
Unity4.6.4f1
file:///C:/Users/ANTVR-~1/AppData/Local/Temp/enhtmlclip/Image(2).png
EventSystem組件主要負責處理輸入、射線投射以及發送事件。一個場景中只能有一個EventSystem組件。
StandaloneInputModule和TouchInputModule組件是系統提供的標準輸入模塊和觸摸輸入模塊,我們可以通過繼承BaseInputModule實現自己的輸入模塊。? ?? ???除了以上兩個組件,還有一個很重要的組件通過EventSystem對象我們看不到,它是BaseRaycaster組件。BaseRaycaster也是一個基類,前面說的輸入模塊要檢測到鼠標事件必須有射線投射組件才能確定目標對象。系統實現的射線投射類組件有PhysicsRaycaster, Physics2DRaycaster, GraphicRaycaster。這個模塊也是可以自己繼承BaseRaycaster實現個性化定制。
總的來說,EventSystem負責管理,BaseInputModule負責輸入,BaseRaycaster負責確定目標對象,目標對象負責接收事件并處理,然后一個完整的事件系統就有了。更多內容請看:Unity 5.0事件系統的說明http://docs.unity3d.com/Manual/SupportedEvents.html[url=http://docs.unity3d.com/ScriptReference/EventSystems.EventSystem.html]http://docs.unity3d.com/ScriptRe ... ms.EventSystem.html[/url]
那么再來看看Cardboard的UI系統。有的知識對于所有VR UI都是適用的。
VR UI的問題在于如何展示出立體效果。之前給大家介紹了一個2D UI和3D UI。
2D UI就和正常UI一樣,在分屏的狀態下依然使用單屏顯示就OK,使用NGUI/UGUI都可以,不過還是推薦大家使用UGUI,我后面介紹的這些內容也都是使用UGUI的。
3D UI之前給大家介紹了使用3D 模型制作的UI,結合TextMesh來做。這個在AR場景中也是OK的。但是VR場景中,想達到立體的效果,UI也必須要分屏處理。
Cardboard SDK官方開發指南:https://developers.google.com/cardboard/unity/guide
在VR場景中,結合頭控裝置,可以將UI的位置設置在用戶視線范圍內,或者視線范圍外。在非特殊情況下,建議設置在用戶視線范圍內。
Cardboard 的UI 系統是基于UGUI制作的。另外,他也有使用了OnGUI的方式來制作VR UI(這個不推薦大家使用)。
關于怎么使用UGUI自制一個VR UI,我們下一篇來介紹。
Cardboard SDK的demo將一個GazeInputModule.cs腳本加到EventSystem中。這個腳本控制人眼視角發射的射線并觸發相應的事件。
正如前面所說,這里還隱藏了一個組件BaseRaycaster.這樣才能會發射一些射線。
前面也介紹了EventSystem,并且介紹了其綁定的幾個腳本。注意他們的順序,如果的層級更高誰就會最先獲取數據。比如 StandaloneInputModule在前,那么就會獲取鼠標的事件。
OK,接下來主要看GazeInputModule.cs這個腳本,主要的方法是process():
public override void Process()
{
CastRayFromGaze();// 控制射線發射,先將3D坐標轉換為2D UI坐標系,發出射線
UpdateCurrentObject(); // 更新選中物體的狀態,比如按鈕會設置選中狀態等
PlaceCursor();// 計算相機近平面與碰撞物體之間的距離,并根據距離計算Cursor的尺寸,如果scaleCursorSize為true
if (!Cardboard.SDK.TapIsTrigger && ! Input.GetMouseButtonDown(0) && Input.GetMouseButton(0))
{
// Drag is only supported if TapIsTrigger is false.
HandleDrag(); // 拖動狀態,鼠標按下,這個倒是沒試過
}
else if (Time.unscaledTime - pointerData.clickTime < clickTime)
{
// Delay new events until clickTime has passed.
}
else if (!pointerData.eligibleForClick &&
( Cardboard.SDK.Triggered || ! Cardboard.SDK.TapIsTrigger && Input.GetMouseButtonDown(0)))
{
// New trigger action.
HandleTrigger(); //觸發事件
} else if (!Cardboard.SDK.Triggered && ! Input.GetMouseButton(0))
{
// Check if there is a pending click to handle.
HandlePendingClick(); // 懸而未決,就是光標選中,啥也沒干
}
}
復制代碼
主要流程:計算并發出射線->檢測射線碰撞的對象(UGUI組件)->處理事件
這個是UGUI的機制。
如果需要檢測普通GameObject的碰撞,則需要在Camera上添加 PhysicsRaycaster組件。
聯系方式:0755-81699111
課程網址: http://www.vrkuo.com/course/vr.html