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

編者按：國內關注VR的設計師不多，能持續關注并產出優質內容的設計師更是鳳毛麟角，建議想跟上趨勢的同學多關注騰訊高級交互設計師@C7210?。今天他的譯文實戰性很強，包括從Unity商店下載環境資源、在項目中使用Google VR Unity SDK提供的組件及第三方腳本等等。

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

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

@C7210?：時至今日，多少已經對VR世界有些神往了吧？作為設計師，是否已經有了上手的興趣？大家都差不多的樣子。最近，有幾篇不錯的文章給到我(英文原文作者)一些啟示，包括：

• From product design to virtual reality(Medium，墻外，作者Jean-Marc Denis，Beforweb譯文版：從二維界面到虛擬現實)
• A month designing in VR(Medium，墻外，作者Julius Tarng)
• Designing for virtual reality(ustwo出品)

經過簡單的研究與學習，我發現即便不曾有過3D設計或腳本編寫等方面的背景經驗，你仍然有可能創建出最基礎最簡單的VR世界，并以app的形式部署到手機當中，然后通過Cardboard進行體驗。對產出形式沒什么概念？我做的這款PolyLand VR就是實際范例；而具體的實踐方法就是我將要在本文當中與各位分享的。

所需要的工具

• Cardboard：我個人使用Google Cardboard；其他Cardboard類設備也可。
• Unity：下載并安裝最新的免費個人版本即可。
• Android SDK：下載并安裝最新的Android開發工具包(本文以Android平臺作為演示；相似的方法同樣可以用于iOS，詳見“Unity與Cardboard app基礎實踐-1”一文)。
• Google VR Unity SDK：在GitHub下載；其中包含了SDK以及Google官方提供范例項目。
• 用于Google VR Unity SDK的自動行走腳本：在GitHub下載；作者Jupp Otto。

我們將要一起學習制作的是一個非常簡單的VR環境；在實際運行時，你可以通過頭顯上的按鈕來打開或關閉自動行走功能。

第1步：構建3D環境

打開Unity，新建3D項目：

我將會使用Forest Environment這套免費的模型來搭建環境，你也可以在Unity資源商店隨便逛逛，選擇自己更加喜歡的環境模型拿回來用。在資源頁面中點擊Open in Unity按鈕，Unity會自動將其加載到Asset Store面板當中。點擊面板上的Download按鈕(需要注冊并登錄Unity帳戶；Unity不允許用戶直接通過網頁下載資源)：

下載完成之后，在Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

在Project面板當中，按照下圖所示的路徑找到demoScene_free.unity文件，雙擊，然后我們下載到的環境模型便會被加載到Scene面板中：

點擊頂部的Play按鈕，在Game模式中查看一下目前的實際效果：

第2步：安裝Google VR Unity SDK

在左側的Hierarchy面板中，刪除First Person Controller和Main Camera：

將之前下載的Google VR Unity SDK解壓，得到“gvr-unity-sdk-master”文件夾。回到Unity，點擊菜單欄中的Assets > Import Package > Custom Package，選擇剛剛解壓縮的文件夾中的GoogleVRForUnity.unitypackage，點擊Open按鈕。在接下來彈出的Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

導入完成后，在Project面板的資源列表中找到Assets > GoogleVR > Legacy > Prefabs文件夾，將其中的GvrMain拖放到Scene面板中：

點擊Play按鈕，界面會自動切換到Game面板。按住alt或control鍵，同時移動鼠標，測試一下主視角的移動方式。如果測試時發現之前拖放進來的GvrMain在位置上不太合適(主視角漂浮在空中或是位于地面以下)，你可以結束Play模式，回到Scene面板當中對其進行調整 - 在右側檢查器中調整“Position”的值，或是直接通過鼠標移動GvrMain對象均可。

第3步：添加自動行走功能

將之前下載的自動行走腳本文件包解壓，將其中的Autowalk.cs文件夾拖放到Project面板的Assets根目錄下：

雙擊Autowalk文件，使其在MonoDevelop編輯器當中被打開。Command+F，搜索“CardboardHead”，并替換為“GvrHead”；搜索“Cardboard.SDK”，全部替換為“GvrViewer.Instance”，然后保存文件并關閉MonoDevelop。

回到Unity，點選主界面左側Hierarchy面板中的“GvrMain”，然后在主界面右側的檢查器中點擊Add Component按鈕，在搜索框中輸入“autowalk”，點選該文件：

檢查器當中會出現新的“Autowalk”選項區。勾選“Walk When Triggered”，將“Speed”設置成“1”(或是你覺得更加合適的數值)：

點擊Play按鈕，進入Game模式，你會發現在點擊鼠標之后主視角會自動向前行進，再次點擊則會停下。

第4步：打包app

點擊菜單欄中的File > Build Settings，在彈出的Build Settings窗口中，選擇Platforms列表里的“Android”，然后點擊列表下方的Player Settings按鈕：

Unity主界面右側的檢查器當中會出現PlayerSettings面板。在頂部的Company Name字段里輸入公司或組織機構名稱。接下來，在“Settings for Android”部分當中，點擊“Resolution and Presentation”使其展開，將“Default Orientation”設置為“Auto Rotation”，然后取消勾選“Allowed Orientations for Auto Rotation”下的前三個選項，只保留最后一個“Landscape Left”為選中態：

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

仍然在“Settings for Android”當中，點擊“Publishing Settings”使其展開。如果你沒有keystore，那么在這里需要勾選“Create New Keystore”，然后輸入密碼，并點擊“Browse Keystore”。在對話窗口中輸入keystore的名稱，點擊Save按鈕。此時在“Browse Keystore”按鈕旁邊會出現keystore所處的路徑(更多信息請參考Android Studio官方文檔當中的“Sign Your App”部分)。在下方的“Key”選項區里，點擊Alias下拉列表，選擇“Create a new key”，在對話窗口中輸入相關信息，點擊Create Key按鈕：

如果覺得需要，還可以在“Icon”及“Splash Image”當中添加相應的素材作為app icon和閃屏圖片。最后在Build Settings窗口中點擊Build按鈕。Building期間，你可能需要選擇Android SDK的根目錄。解壓之前下載好的Android SDK壓縮包，選擇這個文件夾即可。此外你可能還會被要求升級SDK，點擊確認即可。Build完成后，你便可以在Android手機上安裝app了，然后放到Cardboard里盡情體驗吧。

有時你可能會發現視角不會隨著頭部的轉動而相應的運動，這時重啟app即可；具體原因或許和SDK及Android系統的版本有關。

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

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

「優設六月最新的VR設計好文合集」

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

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

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

原文地址：hackernoon.com
譯文地址：beforweb

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

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