谷歌VR APP實戰！UNITY與CARDBOARD APP基礎實踐（三）

編者按：今天的VR實戰是騰訊ISUX高級交互家設計師@C7210?親自寫的，教你借用免費的Unity資源，搭起3D場景，放上3D對象，并使用Google提供的SDK組件模擬VR視野。這個教程最好玩的地方是，如果有興趣打包成App放到iPhone當中，便可以直接塞到Cardboard里面以真實VR的方式進行體驗了。

歡迎關注譯者（高級交互設計師、貓奴、吉他手、鼓手、老狗、單身，現就職于騰訊ISUX）的微信公眾號：Beforweb

這兒有他的訪談：《優設訪談！騰訊高級交互設計師C7210的十年設計路》

往期教程回顧：

1. 《谷歌VR APP實戰！UNITY與CARDBOARD APP基礎實踐（一）》
2. 《谷歌VR APP實戰！UNITY與CARDBOARD APP基礎實踐（二）》

“Unity與Cardboard app基礎實踐”的話題之前已經做過兩期，均是譯文。第三期直接自己寫了，兩方面考慮：一是目前能看到的Cardboard實戰文章或視頻教程大多是基于舊版SDK，而非Daydream發布之后更新的大一統版本的“Google VR”SDK，時效性上有問題，翻譯過程中需要做大量的修改工作，包括代碼和配圖等等方面；另外自己也希望將之前學到的若干知識點匯總在一個完整的小范例當中進行實踐，既然方法已經學到了，就整合到一起，一邊梳理一邊將流程分享出來。

我們接下來將要一起搗鼓的東西，簡單描述一下大約就是借來一些免費的Unity資源，搭起3D場景，在里面放上一兩個沒有任何意義的3D對象，使用Google提供的SDK組件模擬VR視野，當視線聚焦在3D對象上時，VR準星會發生形變，同時3D對象會改變外觀，暗示互動性；而通過鼠標模擬Cardboard按鈕點擊事件還可以使3D對象產生位移。大致就是這樣。如果有興趣打包成app放到iPhone當中，便可以直接塞到Cardboard里面以真實VR的方式進行體驗了。

提煉一下具體的實踐要點，包括：

• 向Unity項目中導入Google VR Unity SDK。
• 在Unity Asset Store中瀏覽并下載免費資源包。
• 調用Google VR相關組件，構建VR模式。
• 向場景(Scene)中添加交互對象。
• 編寫代碼，制定凝視交互的規則。
• 構建事件系統及觸發規則。
• 通過Xcode將VR app部署到iPhone當中。

需要準備的原料

• Unity：下載并安裝最新的免費個人版本。
• Google VR Unity SDK：下載并解壓，其中包含了SDK以及Google官方提供范例項目。
• Cardboard：Google Cardboard或其他同類設備均可。
• Xcode：用于將最終打包的app部署到iPhone當中。體量龐大，如果不準備實際部署也可忽略。

布置3D環境與交互組件

打開Unity，新建3D項目：

點擊菜單欄中的Assets > Import Package > Custom Package，選擇之前解壓縮的Google VR Unity SDK當中的GoogleVRForUnity.unitypackage：

在接下來彈出的Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

導入完成后，Project面板當中的資源路徑看上去應該是這樣的：

Google VR Unity SDK布置完畢，下面我們來找一些現成的環境素材。點擊Asset Store面板，在內嵌頁面的右側導航當中找到3D Models > Enviroments，接下來可以篩選出所有的免費模型，找到自己喜歡的，確認資源中包含.unity場景文件，例如下圖當中我所選用的Moon Landscape資源包所提供的Demo Scene(接下來所涉及到的相關文件操作均以Moon Landscape為例)：

點擊內嵌頁中的Download或Import(如果之前已經下載過)按鈕。下載完成后，在彈出的Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

導入完成后，在Project面板的Assets管理器當中找到剛剛下載的資源包里的demo場景文件：

雙擊打開該文件，Scene面板當中會出現demo場景，我們接下來就在這里工作：

想要置身于3D環境當中以第一人稱視角觀察世界，我們需要“眼睛”，即Unity提供的Camera控件。新建的空白場景當中不包含任何Camera控件，我們需要自己來添加。點擊菜單欄當中的Game Object > Camera：

確保新添加的Camera控件被選中(如果沒有，可以在左側Hierarchy面板當中點選)，在右側Inspector面板當中點擊Tag下拉菜單，選擇“MainCamera”：

由于Moon Landscape場景當中的地形會高出水平面，所以我們需要調整Camera的位置，使其位于地面以上。在“Postion”當中，為“Y”輸入恰當的數值，譬如“25”(或任何能夠確保Camera垂直方向的位置略微高出地面的數值)：

同樣在Inspector面板當中，點擊底部的Add Component按鈕，輸入關鍵詞“Physics”，點選“Physics Raycaster”(使Camera視線可以與3D對象進行互動)：

一番設置之后，Camera控件的Inspector面板看上去應該是這樣的：

接下來我們需要添加Google VR相關組件。在Project面板的資源列表中找到Assets > GoogleVR > Prefabs文件夾，將其中的GvrViewerMain拖放到左側的Hierarchy面板中(這一步驟相當于為Unity項目添加Google VR模式，包括視覺樣式及互動機制等等)：

確保GvrViewerMain被選中，在右側Inspector面板當中調整“Screen Size”和“Viewer Type”的值，選擇需要部署的手機型號及Cardboard款式：

接下來我們要向Camera視野當中添加準星，用于接下來的凝視交互。在Project面板的資源列表中找到Assets > GoogleVR > Prefabs > UI文件夾，將其中的GvrReticle拖放到左側Hierarchy面板中的Camera控件上，使其成為Camera的子元素：

OK我們來預覽一下當前場景的實際效果。點擊頂部的Play按鈕，界面會自動切換到Game模式。夜空、月球表面、Cardboard分屏、準星，還不壞(此時可以按住鍵盤上的alt或control鍵，同時移動鼠標，測試一下主視角的移動方式)：

再次點擊頂部的Play按鈕，退出Game模式。接下來我們要向場景當中添加互動對象。立方體(Cube)是Unity當中最基礎最簡單的3D對象 - 點擊菜單欄當中的Game Object > 3D Object > Cube，一個立方體便會被添加到場景當中：

我們需要將立方體置于Camera默認視線的前方(選中Camera控件即可查看其視野方向及范圍，便于確定“前方”的具體位置)。此外，冷寂的月球環境讓我想到了《2001太空漫游》當中的一些情景(斯坦利·庫布里克指導，1968年的鴻篇巨制，有誰看過沒？)，于是我希望將立方體修改為電影中的黑石碑樣式。選中Cube，在右側Inspector面板當中調整“Position”和“Scale”的值：

調整之后Cube的形狀與位置大致如下圖所示：

在這個簡單的范例當中，3D環境及交互組件就是這些。下面我們要做一些代碼工作了。

編寫代碼，設定交互規則

在Assets面板當中點擊鼠標右鍵，選擇Create > C# Script，將新添加的代碼文件命名為“Interactions”：

雙擊該文件，Unity會自動加載MonoDevelop代碼編輯器。清除掉文件當中自帶的全部內容，替換為以下代碼：

 using UnityEngine;
 using System.Collections;

public class Interactions : MonoBehaviour {

public void SetGazedAt(bool gazedAt) {
 GetComponent().material.color = gazedAt ? Color.red : Color.black;
 }

public void MoveUp() {
 transform.position += new Vector3 (0f, 1f, 0f);
 }

void Start() {
 SetGazedAt(false);
 }

public void OnGazeEnter() {
 SetGazedAt(true);
 }

public void OnGazeExit() {
 SetGazedAt(false);
 }

public void OnGazeTrigger() {
 MoveUp();
 }

}

代碼本身并不復雜，簡單解釋一下邏輯。我們在Interactions類當中總共聲明了6個函數：

• SetGazeAt()：根據傳入的條件，判斷交互對象(譬如立方體)應該呈現出紅色還是黑色外觀。
• MoveUp()：將交互對象沿Y軸向上移動一個單位的距離。
• Start()：調用特定的功能進行初始化設定(SetGazeAt，參數為“false”)。
• OnGazeEnter()：當準星聚焦于交互對象時，調用特定的功能(SetGazeAt，參數為“true”)。
• OnGazeExit()：當準星不再聚焦于交互對象時，調用特定的功能(SetGazeAt，參數為“false”)。
• OnGazeTrigger()：準星聚焦于交互對象時，用戶按壓Cardboard上的按鈕，則調用特定的功能(MoveUp)。

構建事件系統

代碼搞定，接下來需要將事件處理系統添加到項目當中，使交互規則可以在視線與交互對象之間運作起來。點擊菜單欄當中的Game Object > UI > Event System，將其添加到左側的Hierarchy面板中：

確保Event System處于選中態，在右側Inspector面板當中點擊底部的Add Component按鈕，輸入關鍵詞“Gaze”，點選“GazeInputModule”，向事件系統中添加基于凝視的交互模組：

我們需要提升凝視交互規則的優先級，使其不會被默認規則覆蓋，否則在實際注視Cube對象時，準星的行為會有異常。點擊“Gaze Input Module”標題右側的齒輪圖標，在下拉列表中選擇“Move Up”，使“Gaze Input Module”整體移至“Standalone Input Module”上方：

我們還需要使Cube能夠響應代碼定義的交互事件規則。在左側的Hierarchy面板中選中Cube對象，在右側Inspector面板當中點擊底部的Add Component按鈕，找到“Interactions”，將代碼添加到Cube對象當中：

再次點擊Add Component按鈕，輸入“Event”，點選“Event Trigger”：

接下來我們需要將特定的交互動作與代碼中設定的規則關聯起來。點擊Add New Event Type按鈕，選擇“PointerEnter”：

點擊“None (Object)”右側的按鈕，在彈出的列表當中選擇“Cube”自身：

然后在右側的Function列表中選擇Interactions > OnGazeEnter()，也就是我們之前在Interactions代碼文件當中定義的OnGazeEnter函數：

這一系列設置相當于告訴系統，當準星移動到Cube對象上時，執行OnGazeEnter函數當中定義的行為，即通過SetGazeAt()將Cube的外觀設置為紅色。

同理，我們還需要告訴系統當準星離開Cube對象時，或是在Cube對象上按壓Cardboard按鈕時需要執行怎樣的行為。

點擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerExit”：

確保事件對象為“Cube”，然后在右側的Function列表中選擇Interactions > OnGazeExit()：

同理，再次點擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerClick”：

確保事件對象為“Cube”，然后在右側的Function列表中選擇Interactions > OnGazeTrigger()：

預覽

至此，我們的范例已經基本完工，不如預覽一下自己的工作成果。點擊頂部的Play按鈕，進入Game模式：

按住alt鍵，同時移動鼠標，使準星聚焦于黑石碑，會發現石碑變成了紅色，準星本身也變成了環狀(提示所注視的對象具有交互特性)：

點按鼠標，石碑會一點點升起：

說無聊也是夠無聊的，但事已至此，完全可以給自己一點掌聲，因為我們學會了一些很基礎同時也很重要的東西。你還可以繼續嘗試做些額外的工作，譬如復制幾個石碑，排成一行，看上去會很酷，同時也可以幫你了解在Unity當中操作3D對象的基本方法。如果無需擔心設備的性能問題，又足夠無聊，復制出幾萬個黑石碑，混亂的堆放起來，像《2010太空漫游》(《2001太空漫游》續作)那樣將整個星球完全吞噬掉也無妨。

打包app，在iPhone上運行

接下來的步驟屬于選做作業，如果手頭有Cardboard，那么實際體驗一下終歸會更有成就感一些。具體的實現流程和之前“Unity與Cardboard app基礎實踐(1)”當中介紹的相同。

點擊菜單欄中的File > Build Settings：

在Build Settings窗口中，選擇Platforms列表里的“iOS”，然后點擊列表下方的Switch Platform按鈕：

等待素材導入完成，然后點擊Build Settings窗口中的Player Settings按鈕，此時右側的Inspector面板當中會出現PlayerSettings選項區：

找到“Settings for iOS”部分，點擊其中的“Resolution and Presentation”使其展開，將“Default Orientation”設置為“Auto Rotation”，然后取消勾選“Allowed Orientations for Auto Rotation”下的前三個選項，只保留最后一個“Landscape Left”為選中態：

仍然在“Settings for iOS”當中，點擊“Other Settings”使其展開，并找到“Bundle Identifier”字段，在這里為你的app輸入一個合法的安裝包名稱，譬如“com.mycompany.cardboarddemo”，只要遵循“com.<公司或組織名稱>.<app名稱>”的形式即可：

接下來要構建用于部署到iOS設備當中的Xcode項目。在之前的Build Settings窗口中點擊Build按鈕，選擇恰當的保存位置及Xcode項目路徑名稱，點擊Save按鈕：

看到“Build Successful”的系統消息之后，如果Xcode沒有自動加載，那么到Finder當中找到剛剛構建好的Xcode項目文件夾，打開其中的.xcodeproj文件。用USB線連接好你的iPhone，在Xcode頂部的選項欄中選擇自己的iPhone設備，點擊Run按鈕，稍等片刻，我們的小范例便會化身為app出現在手機里面了(如果初次運行不成功，Xcode提示安全問題一類，那么需要到iPhone的“設置 > 通用 > 描述文件與設備管理”當中將范例app設置為信任)，塞進Cardboard遛遛看，雖然沒什么花頭，卻是自己一步步搗鼓出來的，會開心。

這一次，來自C我的實踐教程，就是這樣了，希望各位有所收獲。

「優設VR設計好文合集」

VR入行手冊！
《VR快速入行手冊！可能是現在最全面的VR知識學習指南》

實戰教程：
《實戰教程來了！一名UX設計師的VR設計初體驗》

VR設計指南：
《教程來了！VR設計指南之基礎概念與設計工具》

原文地址：beforweb

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com