VR菜鳥又如何 看設計師如何在14天內打造VR應用

【編者按】本文作者Tessa Chung， AOL Alpha的產品設計師。本文是關於作者在14天內打造一個VR應用Demo的經歷，原文發表在Medium。
在AOL Alpha工作時，我們經常會嘗試許多新誕生的平台，作為近些年來最火熱的概念，虛擬現實（VR）自然成了開發者的重點。最近我也涉足了該領域並完成了一項艱鉅的任務，整個過程極其考驗我的耐心，但最終我收穫頗多。

這項艱鉅的任務就是獨立打造一款VR應用Demo，但時間卻只有短短兩週。這款應用基於AOL的汽車博客且需兼容GoogleCardboard。此外，它還需要具備VR應用基本的功能，以便用户戴上Cardboard後能置身在自己心儀車輛的座艙中。

如果你是位經驗豐富的遊戲設計師，這項任務簡直小菜一碟。不過作為一名移動應用設計師，VR對我來説完全是全新的領域，在Unity3D引擎和腳本設計上，我更是屬於菜鳥級別。

由於VR仍處於初級階段，因此設計和開發中的困難無法避免。為了更快的上手，我專門花時間瀏覽了許多利用Unity3D引擎開發VR應用的案例。不看不知道，一看嚇一跳，VR開發領域現在簡直就是狂野的西部，這裏沒有規則，沒有組織，各種相關信息更是少得可憐。在整個開發過程中，我就像是在污染的湖中釣魚，魚餌下去不少，但多數時候釣上來的都是垃圾。
不過，經過我的努力，最終這款應用還是在14天之期內順利完成了。下面，我就給大家講述一下我的“心路歷程”，分享一些開發過程中積累的技巧和解決方案。

第1-2天：任務前的必要準備

做計劃

首先，我們坐下來開了個簡單的小會。會上定了大概的方向，將應用做的足夠簡潔是主要指導方針。我們需要完成主頁、主菜單和360度座艙的設計並加入一些交互界面。


圖1：應用的主要部分

主菜單設計
首先，我們需要在天空盒（skybox）中加入一張車輛座艙的全景圖片。主菜單看起來要像汽車的陳列畫廊，在這裏你可以利用自己的技術玩點小創意。這個主菜單可以做成列表、網格和麪板等造型。由於主菜單對整個應用具有絕對的支配力，所以我得安排好圖片呈現的方式。

為了幫助開發者快速上手，Unity最近發佈了一系列免費的VR設計範例，開發者可以通過這些示例快速在Oculus平台上製作出自己的動畫、點擊方式、模型的形狀和網格。這樣，VR應用所需的曲面UI背景就不是問題了。由於我的應用需要兼容GoogleCardboard，在這裏我耍了點小聰明，將這些免費素材轉換成了Cardboard兼容版。

素材在手，天下我有，此前的擔憂全都消失不見了。因此我開始在應用的視覺效果上下功夫，用手上現有的素材和工具測試了一系列設計方案。當然，由於時間有限，容易執行的方案最終脱穎而出。在該方案中，一系列扁平和弧形面板成了汽車縮略圖的最好呈現方式。


圖2（上）：弧形面板 圖3（下）：扁平面板

為此，我設計了三種圖片呈現方案：

1. 扁平面板的方案：主要以Cardboard的演示為基礎。

2. 弧形面板的方案：主要以Oculus Unity的演示為基礎。

3. 弧形面板的方案：主要以Cardboard的演示為基礎。此方案需要將Unity的Oculus平台演示轉換成Cardboard兼容的素材。雖然工程量變大了，但絕對值得一試。

從第三種方案開始

我決定先攻克最難的部分，於是第三種方案成了首選。不過，上手後我發現，將Unity的素材轉換成Cardboard專用實在是太令人煎熬了，它們有時很難一一對應，你需要逐個進行細微的調整。

此外，將Unity的腳本引入新平台的過程實在讓人抓狂，原始素材中總有些腳本環環相扣，要完成卷帙浩繁的修改工作實在是要人命，各種錯誤頻出更是讓人想砸鍵盤。整個過程中，“編輯器錯誤”的提示成了家常便飯。

圖4：令人抓狂的“編輯器錯誤”提示

2號方案

想要在Unity中製作弧形圖片和文本，你就要依賴3D網格和模型。不幸的是，官方演示中的網格比例與我手中的汽車圖片不搭，所以，如果我還想繼續使用，就需要重新對其進行設計。

我花了一整個下午研究這些奇奇怪怪的FBX文檔，但最終由於時間限制，我放棄了這個方案，確實有點可惜。此外，這裏面的腳本聯繫緊密，牽一髮而動全身，我根本沒時間從頭到尾徹底完成轉換。如果此前我有一定的建模經驗，這部分工作做起來想必會順暢許多。


圖5（動圖）：在Cinema 4D中修改FBX模型

1號方案

1號方案剛開始有些難對付，不過後來我將Unity的UI按鈕偽裝成了圖片素材。我將這些UI按鈕並列在相機前，讓它們互相之間保持30度的傾角（Y軸），這樣它們就能“包裹”住相機。隨後，整個主菜單的製作就簡單了許多，藉助Unity系統的特性，UI按鈕獲得了特別的視覺元素。UI按鈕確實是個好東西，後面製作click事件時，我也用到了它。


圖6：1號方案的早期俯視圖

評估並選擇最終方案
眼看第二天就要結束了，我必須在方案1和方案3中做出選擇。方案3耗費了我大量的精力，如果放棄還感覺挺可惜的，但如果採用該方案後期可能會遇到更多麻煩。相反，方案1在開發難度上有天然的優勢。最終，為了加快進度，我選擇了使用扁平面板的方案1。

第3-4天：場景切換方案

定好了設計方案後就需要具體實施了。在這一步中，我們重點要搞定場景與場景之間的切換。由於腳本設計對我來説是未知領域，所以各種困難完全是意料之中。

起初，我的大部分精力都投入到了click事件的製作中。我發現如果將屏幕與click事件聯繫起來並利用Unity Animator製作一些過渡效果，就能順暢的完成場景切換。

最後，我可以用菜單管理器做收尾，這樣一來，屏幕和各個事件就可以緊密聯繫起來了。雖然看起來有些複雜，但確實挺符合邏輯的。

場景切換

在前幾天的工作中，各種艱難險阻是主旋律，但不知為何突然間我運氣就變好了。在Google上進行了一番搜索後，我居然發現了能輕鬆搞定場景切換的神器——LoadScene。只要簡單的幾行代碼，我就能輕鬆用click按鈕控制場景切換了，這可比我之前想象的要簡單多了。

圖7 圖8（代碼）

在開發過程中我使用了Unity 5.3，該版本中包含名為SceneManagement的工具，利用它我們可以在運行時控制場景，所以別忘了將“using UnityEngine.SceneManagement”的代碼加入腳本中。另外，由於Unity平台迭代速度較快，你經常會發現此前積累的知識過時了，在這裏SceneManager.LoadScene就替代了原有的Application.LoadLevel。

我在每頁中創建了一個空白的遊戲對象，隨後將我的場景切換腳本（即按鈕管理器）加入其中。隨後在每張汽車圖片中，我簡單的加入了一個OnClick事件並選擇了ButtonManager.LoadScene的切換方式，最後為它設定場景切換的具體對象。搞定後，就可以點擊汽車圖片瀏覽車輛座艙了。

圖9：具體操作方式

第5-8天：面板觸發按鈕

下一步，我開始專注打造座艙內的場景。為了提升真實感，我連車輛瞬時油耗和性能表現等數據都加了進去，不過我可不想讓這些瑣碎的數據分散了用户的注意力，在VR世界中，閲讀過多文本簡直讓人抓狂。因此，我專門將這些瑣碎的信息謹慎的壓縮進一些交互元素中去。隨後，我就要開始安排座艙中交互按鈕的位置了，點擊這些按鈕，用户就可以看到彈出式的信息面板。

這一步執行起來就簡單多了，彈出式面板算是最基本的功能了，想必剛入門的菜鳥也能搞定。不過在完成前，你還是要先拿出測試版並對其進行鍼對性的測試和修改。

圖10：座艙中的按鈕和彈出式面板

在這一部分，我花了三天時間來處理文本信息的外觀。在這裏我用到了Unity的Animator工具，通過它我可以為面板設定開啟或關閉的轉枱，隨後我又用腳本為其添加了新按鈕，以便能更好的控制面板開啟或關閉的動畫。在製作過程中，我發現這一步設計起來並不是那麼簡單，由於移動部件過多，製作過程很容易出錯。

為了保證整個過程完美無缺，我測試了六七種教程上的方法，但無論是點擊還是懸浮，想要的效果都沒能實現。不過在第七天，我偶爾在論壇上看到了一個名為“在click按鈕上開啟和隱藏畫布”的帖子，下面一個回覆讓我茅塞頓開。

圖11

什麼？不需要代碼？我這漫長的三天都白走了嗎？於是我用EventTrigger改造了自己的測試按鈕，最後面板開啟和關閉的動作居然順利實現了。

不過，幾分鐘之後我就被潑了涼水，因為這動畫做的實在是太渣了。打開和關閉面板的動作還説得過去，但整個動作讓人看的尷尬症都犯了，跟我心中預想的絲般順滑根本不沾邊。所以我還得再給它加個動畫。


圖12（動圖）：簡單卻不和諧的彈出面板

最後的努力

第八天到了，開發的第三階段馬上就要結束。我整理了下思緒並重新將精力集中在腳本和動畫上。昨晚思考了很久後，我發現背景這張全景照片應該是操作選擇位。如果一個按鈕可以控制面板開啟和關閉兩個動作，那麼操作選擇位就應該負責查看面板的狀態。

雖然這一想法比較粗糙，但在其指導下我發現了一個新教程，它與我的思路基本吻合，該教程名為“滑動菜單”，不過由於該教程與我使用的Unity平台版本不同，我還花了不少時間適應。

我又打開了Animator工具，並在其中創建了空白、打開和關閉幾種狀態。隨後我使用動畫工具和關鍵幀製作了GameObject.IsActive（其中關閉時=0，打開時=1）。接着，我添加了一個名為isHidden的波爾參數，並將開啟和關閉的過渡動畫設為真（true），而其他過渡動畫則設為假（false）。


圖13：Animator中的三種狀態


圖14（代碼）

隨後我按照教程中的示例創建了新腳本並將該腳本加入一個空白的遊戲對象，接着用ToggleMenu的方法將OnClick事件加入我創建好的按鈕中。經過一番調整，我成功了，只需輕點按鈕，就會有一個面板彈出來。

第9天：製作UI並調整面板的動畫

經過一個星期的辛苦搭建，我主要的按鈕事件都能正常運行了，不過看起來還不夠流暢，我還需要再對其動畫進行微調。經過一系列測試，我為其增加了一個alpha過渡，這樣一來我就得到了非常完美的淡入和淡出效果。
第10-12天：優化場景切換的流暢度

由於時間還比較充裕，我決定再次檢視場景切換功能，不過場景過渡還是會有些卡，因此優化流暢度成了主要任務。由於這部分不涉及動畫，所以我無法使用按鈕和麪板製作中的老方法。在尋找新方法的過程中，我將解決方案縮減成了兩種，一種是畫面逐漸變黑，另一種則是利用CrossFadeAlpha和CrossFadeColor兩種方法來解決。

我嘗試了5種網友分享的腳本並試圖讓其兼容我的項目。在測試中，我還嘗試了加入協同程序（時間函數）和黑色的square UI，不過大多數的嘗試都以編譯錯誤告終，我也找不到修復的辦法。

失敗後我又重新開始找教程並再次回到了淡入淡出效果的老路上。跟着教程，我製作了名為Fading的全新腳本並逐字將其拷貝下來，接下來我按着教程一路前行並最終取得的成功。

不過這隻能算是一部分，我還需要另一個腳本來激活淡入淡出的特效，在這裏我又卡住了。第12天，我一直笨手笨腳的忙着學習教程中的代碼，不過無論怎麼看它都不太適合我的項目，編譯錯誤的提示一個接着一個出現。

圖15（代碼）：教程中激活淡入淡出特效的腳本

山重水複疑無路，柳暗花明又一村，我突然想到了Application.LoadLevel（即SceneManager.LoadScene）這個老朋友。我試着將教程腳本中的主要部分填入現有的按鈕管理器腳本（參見上文第4天），經過一系列實驗和調整後，我得到了一個修改後的新腳本，它可以運行一個協同程序並通過click按鈕調出我的Fading腳本。


圖16（代碼）

此前click按鈕就已經調試成功了，現在直接使用即可，如果遇到卡頓情況，你需要調整一下時間設置。終於成功了，隨後我只需將其應用到其他場景中即可。時間還剩下兩天，勝利已經在向我招手了。

第13天：衝刺階段和最後的驚喜

搞定了上面的部分後我感覺輕鬆多了，下面我需要完成車輛座艙的界面了。在這裏，我為每輛車加入了3個按鈕和3個彈出式面板。不過在測試時我突然發現這3個按鈕居然開啟的是同一個面板，這可怎麼辦！平復了一下鬱悶的心情後，我想到了幾個解決方案。

我花了一早上時間來修改腳本和參數。我本想通過改變參數來解決開關問題，但卻突然想到了個簡單的解決方案。我只需把PopupManager添加進面板並分配好彈出動畫信息就行。於是，我為3個按鈕都創建了OnClick事件並對目標面板進行了設置。最後，這些按鈕終於能各司其職了，成功已經近在眼前。


圖17：面板的檢查照片（左），按鈕（右）

在測試頁面完成了所有項目的測試並確認功能完好後，我將其擴大到整個應用並完成了最後的“打磨”。這個項目算是成功了，我還將原計劃提前了一天。雖説在這兩週內被各種錯誤折磨，但我學到了許多東西而且做出了成果。下一步，我會為該應用加入聲音和視頻，此外其內置車型也會不斷增加。

成品視頻：Vimeo

革命尚未成功，各位繼續努力吧！


資料來源：雷鋒網
作者/編輯：老呂IO