全景VR視頻遊戲外包公司：技術分享使用U3D+CB製做VR遊戲

隨着Oculus宣佈1月6日開啓預售，2016年極可能成爲VR遊戲元年，但不少的調研顯示，手遊設備纔是市場增加的關鍵，SuperData發佈的報告顯示，2016年全球VR遊戲市場規模預計在51億美圓左右，消費者設備安裝量在3890萬左右，憑藉價格門檻的優點，以谷歌Cardboard和三星Gear VR爲表明的移動VR設備很大可能成爲用戶量最大的設備，可能佔據2016年虛擬現實設備安裝量71%的份額，達到2700萬。

 

　　咱們的老朋友Ray在本身的博客中展現瞭如何用Unity和Cardboard把一款3D遊戲變成VR遊戲的方法，他在文章最後還表示，你甚至能夠用這種方法把遊戲轉化爲AR遊戲，或者從頭開始作新的VR遊戲。

　　不少的科幻電影都展現了用人類意志控制物體的能力，但到目前爲止，這仍舊是一種幻想，目前尚未技術能夠實現這一點。在這份新手教學博客中，你能夠學到如何用Unity作一款兼但的虛擬現實遊戲，配合谷歌Cardboard創造比較簡單的VR體驗，本文主要講的是：

　　把Cardboard攝像頭集成到你的遊戲中；調整UI元素以適應VR模式；作VR模式下能夠選擇的按鈕；在遊戲運行的時候程序化地把遊戲在常規和VR模式下進行切換。

谷歌Cardboard是個什麼鬼？

　　理論上說，創造VR體驗是很是直接的，你在屏幕上展現的並非一個單獨的圖片，而是須要2個。由於它們來自位置相隔幾英寸距離的兩個攝像頭，玩家們從左攝像頭看到的是左邊圖像，右邊看到的則是右邊圖像，這就創造了遊戲景深。

　　此外，再加上一些不錯的動態傳感器，你能夠探測到用戶面朝哪一個方向。把這些和你所創造的3D世界結合起來的話，就能夠得到一個沉浸感很強的遊戲體驗。在實際狀況中，在一個高分辨率的屏幕上展現兩個圖像須要很是複雜的硬件，還須要能夠追蹤玩家的頭部運動，把全部的功能集成到一個設備商，還要控制其重量，以避免讓用戶戴起來太累。

　　然而，隨着谷歌Cardboard的出現，每一臺智能機都有可能與Cardboard協做，能夠用你手機的屏幕與傳感器，把它們變成VR設備的一種，而你所須要的，只是一些Cardboard和塑料鏡片。

開始準備

　　須要注意的是，你可能大量用到Unity GUI，因此若是歷來沒有嘗試過這個工具，那麼最好是看看Unity GUI教程。想要用Google Cardboard作出本身的VR遊戲，你須要如下工具：

　　Unity專業版，5.0以上；一部智能機，能夠是iPhone 5之後的iOS設備，也能夠是4.3以上版本的Android設備。須要說的是，本文假設你是基於iPhone開發VR遊戲。

　　若是你歷來沒有用過Unity並且也不熟悉界面，那最好是去讀Unity教程介紹

那麼問題來了，首先，你要有一個Cardboard設備，怎麼搞到手呢？

　　固然，若是尚未Cardboard設備的話，最好是從供應商那裏選購，價格加運費大約是20-30美圓，若是你以爲本身很是善於DIY，也能夠動手作本身的版本。在購買Cardboard的時候，要注意提到V2或者Cardboard 2.0的字樣，由於它們適配了包括大屏幕的iPhone 6+在內的更多手機，還支持用戶經過按鈕進行輸入操做。

##沒有Cardboard設備能夠嗎？

　　從某種程度上說，是能夠的，你仍然能夠在本身的設備上運行作出來的遊戲，它看起來會是這樣的（下圖）：

 

　　在玩遊戲的時候，若是你用恰當的方式盯着屏幕看，也能夠找到VR的感受。若是你移動手機，能夠進行控制。雖然你也能夠玩這款遊戲，還可以看到遊戲的實際效果，但這種體驗是...你懂的。

　　長話短說，若是你沒有足夠的耐心等待Cardboard到貨，你仍然能夠從本文中學到東西，只是，若是有合適的設備，你可以學的東西更多。

遊戲Demo：Ninja Attack

　　投入一些時間嘗試這個Demo，下載並解壓這個Unity新手項目。接下來就是運行Unity，在歡迎界面，選擇打開（Open）-找到StarterNinja文件夾，打開NinjaAttack項目。

　　項目瀏覽器（Project Browser）中，在Assets裏雙擊MainScene按鈕，而後點擊Play嘗試一下這款遊戲。在圖片中，你是左邊的忍者，隨着怪獸在屏幕中出現，你能夠在屏幕上點擊任何地方釋放一個忍者之星消滅怪獸，在擊殺20個怪獸以後，你就贏了，可是，若是怪獸到達了左邊的紅色區域，你就輸了。

 

　　這款遊戲看起來很熟悉是嗎？熟悉的讀者可能會發現，它其實就是我以前介紹SpriteKit以及Cocos2D教程用到的遊戲，不過與之不一樣的是，這裏的遊戲是用3D渲染的。固然，你並不必定可以真正地看到很是酷炫的3D效果，這款遊戲使用的是上帝視角，因此對全部的polygon進行渲染總以爲浪費時間，因此，你如今能夠發現爲何這款遊戲很是適合作成VR了。

開始使用Cardboard

　　你須要作的第一件事就是爲Unity下載Cardboard SDK。接下來，把它導入到你的項目中。從Unity的主菜單，選擇Assets\Import Package\Custom Package，而後選擇你剛剛下載的CardboardSDKForUnity.unitypackage。確保全部東西都被選中，反選Legacy文件夾，而後點擊Import按鈕。

 

　　爲了讓你的遊戲做爲一個VR體驗，你須要用到一些技巧，在Project Browser中的Cardboard\Prefabs文件夾裏，把CardboardMain Prefab拖拽到你的場景中，在Inspector中，給其賦予和你的忍者角色同樣的位置（5.53,1.13,0.122），而且要進行90度Y Rotation。

　　你會發現的是，它比忍者的中心部位略高，這樣能夠展示出你在看他的眼睛。

 

　　接下來，選擇主攝像頭（Main Camera）而且在Inspector中反選，作raccoon忍者對象的時候也須要一樣的操做。如今，把遊戲在Unity編輯器中再次運行，你就會看到一些相似於3D場景的東西。若是你在移動鼠標的時候按住選擇鍵，你的攝像頭就會隨着頭部的運動進行旋轉。

 

在iOS設備上運行你的遊戲場景

　　在Unity編輯器中運行你的遊戲是很是不錯的，但最後一次檢查的時候，用VR頭盔配上電腦顯示器看起來會讓人很痛苦，因此咱們須要適配到iPhone上。

　　選擇File\Build Settings,iOS應該已經被選爲你的默認平臺，點擊Click Player Settings而後轉換到Inspector。

　　在Resolution and Presentation菜單下，把Default Orientation設置成Landscape Left。

　　在其餘設置（Other Settings）中，把Bundle Identifier改爲你的公司所須要的東西，好比com.(你的公司名).NinjaAttackVR。

　　把目標設備改成iPhone，把iPhone和電腦進行鏈接，選擇Build和Run，而後給輸出文件夾命名，這個名字你能夠隨意取。

 

　　這時候，Unity就會導出你的項目，而後它就會自動在Xcode中打開，若是沒有打開，啓動Xcode而且手動打開生成後的項目，運行而後在手機上嘗試。首次運行遊戲的時候，你須要一系列的設置過程，好比能夠在Cardboard硬件上掃描二維碼，這樣Cardboard SDK就能夠根據你的設備、距離等進行畫質微調。

　　須要注意的是，若是設置過程當中，你在掃描二維碼的時候出現了 網址打開錯誤，那就必須調整Xcode項目中的info.plist，蘋果開發者論壇中有說到這個問題，感興趣的童鞋能夠親自查閱。

 

　　接着，把你的手機插入Cardboard當中，來回轉頭以調整攝像頭視角，你就能夠看到相對不錯的3D畫面了。

再一次把它作成遊戲

　　可以看到你的遊戲世界是很是不錯的，但初次以外，你還須要把玩法加入到遊戲中，特別是你須要從忍者面朝的方向扔出忍者之星，這是你將要作的第一個玩法。

　　對於UI來講，Cardboard支持一個按鈕，看起來多是比較有限，但若是把它和頭部的動態追蹤相結合的話，它能夠作出更爲複雜的互動。在《Ninja Attack》中，你經過Cardboard.SDK.VRModeEnable資源偵測玩家是否開始了VR模式，檢查按鈕是否和Cardboard.SDK.Triggered資源同時按下去了，若是這些值都對，就能夠在用戶面朝的方向扔出忍者之星。

　　打開你的NinjaStarLauncher.cs腳本，你會發現它在Inspector裏是和GameLogic GameObject連在一塊兒的。

　　創造一個新的private變量：

　　private Vector3 _vrShooterOffset;

　　把它在Start() method中初始化：

　　_vrShooterOffset = new Vector3(0.0f, -0.4f, 1.0f);

　　用如下代碼替換Update ()：

 

　　這就能夠運行了，接下來咱們看看Update()是作什麼的：

　　你首先檢查遊戲是否在VR模式，用戶是否按下了按鈕檢查Cardboard.SDK singleton object上的資源。

　　在此以後，你能夠調用LaunchNinjaStarFrom()釋放一個忍者之星，你須要用到兩個parameter：

　　第一個是GameObject頭文件，Cardboard庫會爲你調出來，因此它應該是已經指向了正確的位置；第二個是輕微偏移，這樣你面前的忍者之星就會看起來更真實，不然的話你扔出去的忍者之星就像是在四隻眼之間進行運動，雖然看起來很cool，但給人的感受很奇怪。

　　因爲你的Ninja Star GameObject已經被設計飛往特定方向，因此它會朝着正確的方向進攻。

　　再試一次，這時候，你能夠轉頭扔向壞人，輸贏logic仍舊起做用。

 

解決Game Over菜單

　　你可能已經注意到了，當遊戲結束的時候，用以前的Game Over按鈕，你的角色仍舊是在屏幕的左邊。這款遊戲用到了Display Canvas來展現Game Over界面，Unity最新的GUI教程中有講到這一點，它老是出如今遊戲窗口的頂部。這個標籤適用於大多數的遊戲GUI，由於它能夠自動適應到你屏幕的上方，不論你的攝像頭在作什麼，並且它能夠很是不錯地適應不一樣屏幕尺寸。

 

　　但在這個案例中，你須要一個存在於遊戲世界中的GUI canvas，有一部分緣由是它能夠在3D環境中更好渲染，但還由於不但願把玩家愛是叫鎖定到攝像頭上。你的玩家們須要能夠上下自由地看，這樣他們能夠看到不一樣的UI元素，找到最活躍的而後點擊按鈕。

創造一個新的Canvas

　　在Hierarchy菜單下選擇GameOverCanvas，右擊而且選擇複製，重命名爲VRGameOverCanvas，這樣可使它與原來的進行區別開來，把GameOverTxt重命名爲VRGameOvertxt。

 

　　在VRGameOverCanvas組件中，把渲染模式改成World Space。

　　在Rect Transform組件中，把位置改成（-2.24,1.1,0.07）,而後進行90度Y Rotation

 

　　最後，把X和Y Scale改成0.009，當全部一切完成的時候，VRGameOverCanvas看起來因該是這樣的：

　　你能夠在Game View視角下看到兩個canvas是大體重疊的（當遊戲不運行的時候）：

 

　　這些值是哪裏來的呢？坦白地說，我實際上是調整到本身經過Cardboard攝像頭看起來比較不錯爲止。有時候，編程更多的是一門藝術而不是學科。

支持兩個Canvase

　　接下來，你須要更改GameController.cs，這樣它纔會發現兩個Canvas打開和GameLogic GameObject腳本，它也是和GameLogic GameObject聯繫在一塊兒的。把如下的兩個公共變量加入到你的class裏：

public Canvas VRGameOverCanvas; public Text VRGameOverTxt; 　　在resetGame()的開始加入以下代碼：

VRGameOverCanvas.enabled = false; 　　用如下代碼取代Gameover():

public void GameOver(bool didIWin) { isGameOver = true; _didIWin = didIWin; string finalTxt = (_didIWin) ? 「You won!」 : 「Too bad」; if (Cardboard.SDK.VRModeEnabled) { VRGameOverCanvas.enabled = true; VRGameOverTxt.text = finalTxt; } else { gameOverCanvas.enabled = true; gameOverTxt.text = finalTxt; } } 　　這個展現了正確的Canvas和Text對象，取決於你是否在VR模式（開啓Cardboard.SDK.VRMode）.

 

　　在你保存了腳本以後，你須要把正確的對象分配到新的公用變量。在Inspector裏找到GameController，點擊每一個新變量旁邊的目標，而後選擇VRGameOverCanvas對象做爲你的VR遊戲Over Over Canvas變量，把VRGameOverTxt對象選爲你的VR Game Over Txt變量。

　　須要注意的是，可能你會奇怪，爲何是很麻煩地支持兩個Canvas而不是至改變現有的一個呢？緣由是，你既須要支持上帝視角，還須要支持VR模式，因此必定要進行優化。

　　若是你準備如今就運行遊戲，就能夠發現VR模式裏的遊戲結束界面展現的很天然。你能夠上下看界面的不一樣部分，如今全部缺乏的東西就是再來一次的按鈕。

 

增長Gaze輸入方式

　　幸運的是，Unity內置了‘在使用world-space GUI Canvas的時候，攝像頭中心點能夠做爲鼠標使用’，但你須要提供額外的腳本才能使它在VR界面中進行使用。

 

　　首先，擴展Cardboard Main\Head，找到主攝像頭並把它重命名爲VR Main Camera。選中VRGameOverCanvas對象，大家應該能夠看到一個事件攝像頭，點擊Hierarchy裏的EventSystem項目，點擊增長組件按鈕，並增長GazeInpute Module腳本。這個腳本能夠確保Unity的GUI系統瞭解Cardboard攝像頭的工做方式。

　　檢查VR Mode Only，由於在VR模式下的時候，只須要這麼運行就能夠了。最後，點擊你剛剛增長的Gaze Input Module Component，而後選擇Move Up，重複一次，確保它能夠出如今觸屏輸入和獨立輸入模式中，這能夠確保Gaze Input Module在遊戲進行的同時優先選擇輸入方式。當全部都作好的時候，它看起來應該是這樣的：

 

　　如今，你就能夠進行嘗試了。這一次，當你把視角放到Play Again按鈕的時候，它就會變綠，讓你從新開始一場新的遊戲。

 

玩法微調

　　或許你會發現這個版本的遊戲在VR模式下玩起來有點難，這是由於你的視角是縮水的，因此在你看着錯誤的方向時，敵人很容易從你身邊溜過去。並且，你沒法迅速改變瞄準方向，你會由於脖子轉速的限制而影響到遊戲操做。你讓玩家體驗VR模式並非爲了懲罰他們，因此，你該如何調整呢？固然，可能會有人建議把敵人速度下降。

　　在Prefabs文件夾中選中EvilSlimeEnemy Prefab，而後打開EnemyMover.cs，把如下代碼增長到Start()，隨後設置速度：

　　這會讓你的遊戲在VR模式下變得更簡單，因此玩家們不至於由於選擇了VR模式就得到糟糕體驗。

解決屏幕上的分數顯示問題

　　你還須要解決的一個UI問題是屏幕上的分數，這個就須要不一樣的方式來處理了。雖然它仍然須要在VR模式中恰當的被顯示出來，但你更但願它在你看任何方向的時候都固定在攝像頭上。

　　選中Cardboard Main\Head，右擊並選擇UI\Canvas，重命名新的canvas爲VRScoreCanvas，把渲染模式調整爲World Space，爲其賦予如下值：

　　位置(0，1，2.5)、寬度400、高度100、旋轉(0，0，0)、Scale（0.0115，0.0115，1）。當完成以後，遊戲看起來該是這樣的：

 

　　看起來可能你的文本很奇怪地放在了屏幕中央，但在VR模式裏，你可以看到的世界比正常狀況下是少不少的，因此你在遊戲中看到分數的時候應該是在邊緣部位的，你能夠自由進行位置調整，以使其適應你的手機。

　　接下來，使用文本對象展現你的分數，這個過程和Game Over的作法相似。

　　打開GameController.cs並增長一個新的公用變量：

public Text VRScoreTxt; 　　接下來，你每次更新scoreTxt的時候都須要更新VRScoreTxt，在ResetGame() method中，把如下代碼加在每次更新後的scoreTxt以後:

　　VRScoreTxt.text = 「–「; 　　而後把這行代碼增長到GotOne()，也放在更新scoreTxt的後面:

　　VRScoreTxt.text = 「」 + _currScore; 　　保存你的腳本，回到Unity，而後你會發現GameLogic當中的GameController Component現在能夠輸入VR Score Txt變量了，點擊臨近的目標而後選擇你的VRScoreTxt文本對象。

 

　　再次體驗你的遊戲，如今，你就能夠看到分數出如今左上角了，還能夠容許你的頭部進行運動。

VR模式的切換

　　因爲你的遊戲同時支持上帝視角和VR模式，你應該給用戶自由切換的選擇，UI作起來是很直觀的，你只須要在上帝視角模式中加入一個簡單的按鈕，讓玩家們來回切換模式便可。

　　首先，你須要增長切換的代碼，選擇Hierarchy裏的GameLogic，點擊增長組件，選擇新腳本（New Script）而後把腳本命名爲CardboardSwapper。

　　打開並用如下內容替換class代碼：

 

　　這個class裏最重要的method就是ActiveVRMode，它是用來激活Cardboard的VR模式的。其他的logic負責控制場景中的多個GameObject，取決因而否處於VR模式，你在上帝視角是看不到某些東西的。

　　你還能夠發現的是，當你偵測後面按鈕的時候調用了Switch(),這個功能很是適合測試。

　　你還須要爲GameController腳本增長更多的logic，這樣它才能在切換模式的時候展現或者隱藏一些東西，打開GameController.cs，把這個method加進去：

　　public void RefreshGameOver() {

　　gameOverCanvas.enabled = false;

　　VRGameOverCanvas.enabled = false;

　　if (isGameOver) {

　　GameOver(_didIWin);

　　}

　　} 　　保存一切而後從新回到Unity界面，選擇GameLogic而後向下滾動到Cardboard Swapper組件，對於Cardboard Object數列，把它的大小賦值爲1，而後放到場景中的CardboardMain GameObject中。這樣不只能夠禁用你的Cardboard Head讓你回到上帝視角攝像頭模式，還能夠禁用VRScoreCanvas。

　　對於Mono Object數列，把它的大小賦值爲3，而後爲你的場景選擇Canvas、Main Camera和raccoon ninja，不要從Assets裏選擇。

　　最後你須要在上帝視角canvas爲用戶增長一個按鈕，爲了節約時間，我已經把它作好了，位於prefabs文件夾中。

　　從Assets\Prefabs中把CardboardButton推拽到Hierarchy，這樣它就成爲了你的Canvas對象的子對象，確保其位置設定是(-50,50,0):

　　在你的按鈕對象底部，把它們鏈接起來，這樣點擊按鈕的時候就能夠調用CardboardSwapper.Switch() method，你能夠從這個動畫看看是如何作出來的：

 

　　再次嘗試你的遊戲，點擊屏幕右下方的按鈕切換至VR模式，而後單機Cardboard界面背後的按鈕切換到上帝視角模式。作到這裏，你的VR模式切換就已經完成了。

 

　　如今，你能夠把Unity中的任何3D遊戲作成VR遊戲了，並且只須要一個Cardboard和一些塑料鏡片，這是可讓全部人都可以體驗的VR遊戲。Android版本的作法和iOS大體相同，谷歌的Unity Developer指南還提供了更多的技術信息。最後，你甚至能夠爲你的VR遊戲增長AR功能。

何去何從

　　最後，你能夠嘗試Unity裏全部的3D遊戲，看是否可以順利地作成VR體驗，或者，這個教程也可讓你作出全新的VR遊戲。