VR開發教程:Unity開發VR眼鏡中文入門教程四

weixin_34162695發表於2017-05-03

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 – OverlayScreen Space實現的.

1840938-df116b617a399a3e.png
1840938-9749d33c5ed107a2.png

而VR中通常不用這種方法,我們眼睛無法集中在很近的一個點上,而且Screen Space-Overlay是不支援的.

空間UI

相反我們通常需要在場景中呈現我們的UI,把相機改成World SpaceCanvas渲染模式.這將讓我們的眼睛能聚焦到UI上,被稱為空間介面(Spatial UI)

1840938-51ccef016471848d.png

在場景空間中放置UI也需要一些思考設計.太靠近使用者會引起視覺疲勞,太遠又會讓使用者覺得視點聚焦在地平線上,不過放置遠一些是適合在戶外場景中,小房間中就不適合了.還需要根據需求動態的縮放使用者介面的大小.

最好在一個相對舒適的閱讀距離上顯示使用者介面,並相應的調整它的尺寸.在Menu場景中可以看這個例子:它在面前幾米遠的距離,文字和影象都很大,很易於檢視.

如果在某些特定距離上進行空間使用者介面顯示,可能會發現介面與遊戲物件發生了穿插,那麼請看我們前面將的如何避免穿插或直接使用VR示例中的著色器.或者使用Text的著色器.

許多開發者最初會將使用者介面附加到相機上,所以當使用者移動視角時,介面會始終保持在視野中的一個固定位置,這如果用來做準心是很有用的,但如果是其他較大的介面元素就會影響到玩家的觀察視線,並可能導致使用者噁心不適感.在360度射擊遊戲示例中,介面會在檢視中做短暫的停留,便於使用者熟悉場景環境,避免遮擋使用者視野.

1840938-c297a68f1e1a1f23.gif

VR技術為我們提供了一個模擬360度真實環境的機會,有時我們可以需要顯示給使用者讓使用者去尋找一個特定的方向.在示例場景中,我們在場景中使用了一些箭頭來提示使用者找到正確的方向,如果方向在正常範圍內,這淡出箭頭提醒.

可以用GUIArrows預置,它們的用途就是比較頭部的角度,如果頭部角度超過預設角度(GUIArrows指令碼里Show Angle)時變會淡入提醒使用者往正確的方向看.

1840938-93065abbb567cef5.png
1840938-44d742b5bd8f8b9a.gif

故事介面

空間介面的另一種實現方式就是將場景中的元素現實給使用者.這可能是牆上的一個掛鐘,電視機,顯示器,手機,或者一個帶有全息顯示的未來科技槍.這就是故事UI,我們可以看下示例Flyer場景的飛船介面或者射擊遊戲的槍的介面.

1840938-cba411ce7bc13a7a.png
1840938-96ed6c6f3a9b1b92.png

雖然這不是嚴格意義上的故事介面,但在能讓使用者能很直觀的得到遊戲中想要了解的資訊.

使用者介面開發的深入閱讀

深入分析這些型別的介面可以閱讀本文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

1840938-e71aee87fd272269.png

在場景中自定義了彎曲網格來作為使用者介面.

Flyer

遊戲介紹和遊戲結束介面都是在世界空間裡的靜態介面.

1840938-51c68646b10bfcc7.png

然而,我們把一些重要資訊放在在了飛船上,作為故事介面能讓玩家隨時檢視到是很有意義的.

1840938-0723ce6725beddb6.png

這個UI會始終旋轉面向鏡頭,這樣可以避免較大的傾斜角度影響使用者觀看閱讀介面.

Maze

在Maze場景,我們同樣用世界空間裡的靜態介面做了遊戲介紹和遊戲結束畫面.:

1840938-b2e4b137641cb27f.png

當觸控滑動可用時,場景中的使用者介面也被用來提示玩家進行互動.

1840938-0c4fa05ec3813405.png

Shooter 180 (Target Gallery)

用世界空間裡的靜態介面做了遊戲介紹和遊戲結束畫面:

1840938-8cbfda3f26deca0d.png

正如上面所說的,在槍上用了故事介面來顯示分數和時間:

1840938-492129b877088a13.png

Shooter 360 (Target Arena)

最後,在這場景中用了空間使用者介面,但有輕微扭動,當玩家環顧四周時,我們在移動使用者介面中做了個短暫延遲,以滿足玩家自由的環顧四周.

1840938-e37c916be02978b5.png

同樣,槍上使用了固定的使用者介面:

1840938-2aa2464b72e00328.jpg

VR中為文字做抗鋸齒

在場景中使用Canvas Scaler,UI就會有 “Reference Pixels Per Unit”設定項,預設為1,然後改變“Dynamic Pixels Per Unit”,知道看到文字略微柔化的邊緣.在這裡可以看到”Dynamic Pixels Per Unit”被設定為1.75和設定為3時的差異.設定為3時,邊緣較硬,設定為1.75時,邊緣會有點柔化.

1840938-5edb80fd9de51d21.png
1840938-3a9b6956531bed7f.png

我們現在應該可以使用VREyeRaycaster,VRInput, 和VRInteractiveItem來建立基本的互動介面了.

轉載自http://blog.1vr.cn

聯絡方式:0755-81699111

課程網址: http://www.vrkuo.com/course/vr.html

相關文章