天天看點

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

大家知道在遊戲開發中,我們經常會需要放置一些操作面闆啊,血量槽啊,比如cs中的槍械,子彈,血量等等,這些ui因素是應該永遠顯示在使用者視野當中的,而不是一轉頭就看不到自己的血量了。

這個問題在傳統的unity遊戲開發中自然是小菜一碟,但是在虛拟現實應用裡就不一樣了,我們的手機螢幕被分成了兩部分,是以這些ui也應該是相應的分離顯示,而如果在開發中使用傳統的解決方案自然是不可以了,因為隻會在螢幕上層顯示一個ui,這顯然在虛拟現實眼睛裡就沒法看了。而且根據我的嘗試和對api的閱讀,cardboard好像甚至禁止了gui等ui的顯示,而提供了一個cardboard專用的ui接口,至于這個所謂的cardboard gui我并沒有嘗試過,因為我們直接去讓某個元件一直相對于視野不變就可以了,這樣的可擴充性更強,而且最關鍵的是非常簡單,一會下面就會為大家介紹具體的做法。

另外去實作一個固定在視野中的物體的應用可不是僅僅局限于ui的,虛拟現實中的注視點(之前提到的那個小黃點)就是一個永遠在視野中央的物體,再比如我之前的項目裡是開發了一個基于虛拟現實的無人機駕駛,使用者是坐在虛拟機艙裡進行操作的,虛拟機艙是一個模型場景,視角是要随着使用者轉頭而改變的,比如使用者低頭會看到操縱杆,回頭會看到自己的座椅背,但是窗外的景象是無人機實時傳回的視訊,是以需要一個不随視角變動的視訊播放器,顯然用代碼讓視訊播放器随着視角動是非常麻煩的,需要考慮相位和旋轉,而利用這個方法就很輕松的解決了這個問題。

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

大家看到cardboardmain,其下層為head,我們去看head的inspector面闆:

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

我們看到head綁定了一個cardboardhead的腳本,這個腳本是cardboard unity sdk所提供的一個腳本,在api中cardboardhead.cs的描述部分的第一句是這樣叙述的:将此腳本附加到任何與使用者頭部運動相比對的遊戲對象上。也就是說head模拟了現實中使用者的頭,head下的部分都是頭的一部分,是以也就不難了解head下的main camera與gazepointer了。

main camera其實就是使用者的雙眼,下屬的main camera left 和 main camera right就是使用者的左眼和右眼,雙眼毫無疑問是頭部的一部分,是以main camera作為head的下屬,也就是頭的一部分。也是以模拟雙眼的兩個自攝像頭是随着頭部運動而運動的,是以我們在轉動頭部的時候才具有不同的視角。

gazepointer其實就是之前提到多次的注視點的實體,将這個注視點作為頭部的一部分可以這樣了解,如果想象一個戴着機車頭盔的人,就可以了解為這個光标是頭盔前擋風玻璃上的一個點,無論這個人把頭轉向哪,這個點總是在他的視野中央。

是以如果我們需要去放置一個固定在視野中的物體,遵循gazepoint的想法,我們就應該把這個物體放在人的頭盔前玻璃上,是以我們隻需要把物體放在head下并且調整好位置和角度就可以讓這個物體成為人頭部的一部分随頭部運動而運動了。也就是實作了本篇所說的放置一個固定在視野中的物體,比如一些血槽之類ui。

現在了解了原理,下面我會基于官方的demo去實作一個很簡單的ui,具體功能就是能夠在視野中的固定位置顯示目前的幀數。

是以先在head下放置一個能顯示text的元件,我是用的demo中顯示腳下按鈕的方式,在head下建立了一個canvas(gameobjects - ui - canvas),rendermode選擇world space。canvas下是一個panel(gameobjects - ui - panel),panel下是一個text(gameobjects - ui - text),并且給這個text元件加了一個textview1的tag,友善在腳本中使用,具體結構群組件屬性參考下圖:

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>将ui(紅框部分)放在head下</b>

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>canvas元件,不要忘記設定world space,不然不能調大小</b>

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>panel元件</b>

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>text元件,這裡設定了一個textview1的tag</b>

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>将ui放置在攝像頭正前方</b>

<b>代碼方面相對于cardboard虛拟現實開發初步(四)中講解的demo代碼修改很少,就是在teleport.cs中通過tag擷取到text元件并且在update()方法中設定文字為幀速(這裡我為了簡單用的是1/time.deltatime.嚴格講這不是精确的fps)</b>

代碼:

<b>然後運作就可以看到最終效果了:</b>

Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體
Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體
Cardboard虛拟現實開發技巧(一)之放置一個固定在視野中的物體Google Cardboard 虛拟現實眼鏡開發技巧(一)之放置一個固定在視野中的物體

<b>我們可以看到無論怎麼樣移動視角或者歪頭,ui總是顯示在視野的固定位置</b>

作為虛拟現實眼鏡開發技巧這個系列的第一篇教程,本篇通過一個小demo講解了如何去設定一個位置相對于視野不發生變換的物體。虛拟現實眼鏡開發技巧這個系列的初衷是想能給大家帶來實質性的幫助,因為不可能講到面面俱到,是以摘出一些大家都會遇到的問題來叙述。

關于cardboard虛拟現實眼鏡開發的知識,之前已經我已經寫了虛拟現實開發初步系列的1-4篇來幫助大家入門,英文的api也從長城網外的谷歌官網搬運過來了,我還自己翻譯了一篇中文版的文檔,以上内容都在我部落格的分類和專欄中,大家可以自己去翻閱,希望這些内容能幫助到大家~

繼續閱讀