VR的用戶界面
在設計VR的用戶界面時,傳統的UI設計方案可能會出現一些問題,現在我們來討論和解決VR中制作用戶界面的問題.
UI的分辨率和外觀
DK2的分辨率是1920 x 1080 (960 x 1080 每只眼), Gear VR 是 2560 x 1440 (1280 x 1440 每只眼),這意味著在屏幕上能看得清任何元素的像素.
特別要注意的是用戶界面元素在屏幕上的大小,我們推薦使用更大的字體或者加粗字體以及避免用很細的線設計界面.
UI類型
非故事類
在非VR項目中,UI通常覆蓋在屏幕上顯示如血條等信息,我們稱之為HUD(抬頭顯示器).這就是所謂的非故事類界面,它不真實存在,但它有利于玩家查看游戲中的信息.
這個詞同樣用在電影中作為非故事的聲音,如電影或電視的背景音樂.
在Unity中添加HUD樣式的非故事類UI是更改相機的UI Canvas渲染模式為Screen Space – Overlay或Screen Space實現的.
而VR中通常不用這種方法,我們眼睛無法集中在很近的一個點上,而且Screen Space-Overlay是不支持的.
空間UI
相反我們通常需要在場景中呈現我們的UI,把相機改成World SpaceCanvas渲染模式.這將讓我們的眼睛能聚焦到UI上,被稱為空間界面(Spatial UI)
在場景空間中放置UI也需要一些思考設計.太靠近用戶會引起視覺疲勞,太遠又會讓用戶覺得視點聚焦在地平線上,不過放置遠一些是適合在戶外場景中,小房間中就不適合了.還需要根據需求動態的縮放用戶界面的大小.
最好在一個相對舒適的閱讀距離上顯示用戶界面,并相應的調整它的尺寸.在Menu場景中可以看這個例子:它在面前幾米遠的距離,文字和圖像都很大,很易于查看.
如果在某些特定距離上進行空間用戶界面顯示,可能會發現界面與游戲對象發生了穿插,那么請看我們前面將的如何避免穿插或直接使用VR示例中的著色器.或者使用Text的著色器.
許多開發者最初會將用戶界面附加到相機上,所以當用戶移動視角時,界面會始終保持在視野中的一個固定位置,這如果用來做準心是很有用的,但如果是其他較大的界面元素就會影響到玩家的觀察視線,并可能導致用戶惡心不適感.在360度射擊游戲示例中,界面會在視圖中做短暫的停留,便于用戶熟悉場景環境,避免遮擋用戶視野.
VR技術為我們提供了一個模擬360度真實環境的機會,有時我們可以需要顯示給用戶讓用戶去尋找一個特定的方向.在示例場景中,我們在場景中使用了一些箭頭來提示用戶找到正確的方向,如果方向在正常范圍內,這淡出箭頭提醒.
可以用GUIArrows預置,它們的用途就是比較頭部的角度,如果頭部角度超過預設角度(GUIArrows腳本里Show Angle)時變會淡入提醒用戶往正確的方向看.
故事界面
空間界面的另一種實現方式就是將場景中的元素現實給用戶.這可能是墻上的一個掛鐘,電視機,顯示器,手機,或者一個帶有全息顯示的未來科技槍.這就是故事UI,我們可以看下示例Flyer場景的飛船界面或者射擊游戲的槍的界面.
雖然這不是嚴格意義上的故事界面,但在能讓用戶能很直觀的得到游戲中想要了解的信息.
用戶界面開發的深入閱讀
深入分析這些類型的界面可以閱讀本文Gamasutra(www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php).
用戶界面交互
利用前面VR交互中的VREyeRaycaster,VRInput, 和VRInteractiveItem我們可以創建一個類來處理用戶界面的交互.
在Maze場景中有一個特定的開關作為用戶界面交互,在每個游戲開始前都有個閱讀說明界面,可查看Oculus博客上的“Unity’s UI System in VR”,那里還提供了示例代碼.
VR示例中的用戶界面
讓我們看看VR示例中用到了哪些技術制作用戶界面
Menu
在場景中自定義了彎曲網格來作為用戶界面.
Flyer
游戲介紹和游戲結束界面都是在世界空間里的靜態界面.
然而,我們把一些重要信息放在在了飛船上,作為故事界面能讓玩家隨時查看到是很有意義的.
這個UI會始終旋轉面向鏡頭,這樣可以避免較大的傾斜角度影響用戶觀看閱讀界面.
Maze
在Maze場景,我們同樣用世界空間里的靜態界面做了游戲介紹和游戲結束畫面.:
當觸控滑動可用時,場景中的用戶界面也被用來提示玩家進行交互.
Shooter 180 (Target Gallery)
用世界空間里的靜態界面做了游戲介紹和游戲結束畫面:
正如上面所說的,在槍上用了故事界面來顯示分數和時間:
Shooter 360 (Target Arena)
最后,在這場景中用了空間用戶界面,但有輕微扭動,當玩家環顧四周時,我們在移動用戶界面中做了個短暫延遲,以滿足玩家自由的環顧四周.
同樣,槍上使用了固定的用戶界面:
VR中為文字做抗鋸齒
在場景中使用Canvas Scaler,UI就會有 “Reference Pixels Per Unit”設置項,默認為1,然后改變“Dynamic Pixels Per Unit”,知道看到文本略微柔化的邊緣.在這里可以看到”Dynamic Pixels Per Unit”被設置為1.75和設置為3時的差異.設置為3時,邊緣較硬,設置為1.75時,邊緣會有點柔化.
我們現在應該可以使用VREyeRaycaster,VRInput, 和VRInteractiveItem來創建基本的交互界面了.
聯系方式：0755-81699111
課程網址： http://www.vrkuo.com/course/vr.html
