【編者按】本文作者Tessa Chung， AOL Alpha的產(chǎn)品設(shè)計(jì)師。本文是關(guān)于作者在14天內(nèi)打造一個(gè)VR應(yīng)用Demo的經(jīng)歷，原文發(fā)表在Medium。

在AOL Alpha工作時(shí)，我們經(jīng)常會(huì)嘗試許多新誕生的平臺(tái)，作為近些年來最火熱的概念，虛擬現(xiàn)實(shí)（VR）自然成了開發(fā)者的重點(diǎn)。最近我也涉足了該領(lǐng)域并完成了一項(xiàng)艱巨的任務(wù)，整個(gè)過程極其考驗(yàn)我的耐心，但最終我收獲頗多。

這項(xiàng)艱巨的任務(wù)就是獨(dú)立打造一款VR應(yīng)用Demo，但時(shí)間卻只有短短兩周。這款應(yīng)用基于AOL的汽車博客且需兼容谷歌Cardboard。此外，它還需要具備VR應(yīng)用基本的功能，以便用戶戴上Cardboard后能置身在自己心儀車輛的座艙中。

如果你是位經(jīng)驗(yàn)豐富的游戲設(shè)計(jì)師，這項(xiàng)任務(wù)簡直小菜一碟。不過作為一名移動(dòng)應(yīng)用設(shè)計(jì)師，VR對我來說完全是全新的領(lǐng)域，在Unity3D引擎和腳本設(shè)計(jì)上，我更是屬于菜鳥級別。

由于VR仍處于初級階段，因此設(shè)計(jì)和開發(fā)中的困難無法避免。為了更快的上手，我專門花時(shí)間瀏覽了許多利用Unity3D引擎開發(fā)VR應(yīng)用的案例。不看不知道，一看嚇一跳，VR開發(fā)領(lǐng)域現(xiàn)在簡直就是狂野的西部，這里沒有規(guī)則，沒有組織，各種相關(guān)信息更是少得可憐。在整個(gè)開發(fā)過程中，我就像是在污染的湖中釣魚，魚餌下去不少，但多數(shù)時(shí)候釣上來的都是垃圾。

不過，經(jīng)過我的努力，最終這款應(yīng)用還是在14天之期內(nèi)順利完成了。下面，我就給大家講述一下我的“心路歷程”，分享一些開發(fā)過程中積累的技巧和解決方案。

第1-2天：任務(wù)前的必要準(zhǔn)備

做計(jì)劃

首先，我們坐下來開了個(gè)簡單的小會(huì)。會(huì)上定了大概的方向，將應(yīng)用做的足夠簡潔是主要指導(dǎo)方針。我們需要完成主頁、主菜單和360度座艙的設(shè)計(jì)并加入一些交互界面。

圖1：應(yīng)用的主要部分

主菜單設(shè)計(jì)

首先，我們需要在天空盒（skybox）中加入一張車輛座艙的全景圖片。主菜單看起來要像汽車的陳列畫廊，在這里你可以利用自己的技術(shù)玩點(diǎn)小創(chuàng)意。這個(gè)主菜單可以做成列表、網(wǎng)格和面板等造型。由于主菜單對整個(gè)應(yīng)用具有絕對的支配力，所以我得安排好圖片呈現(xiàn)的方式。

為了幫助開發(fā)者快速上手，Unity最近發(fā)布了一系列免費(fèi)的VR設(shè)計(jì)范例，開發(fā)者可以通過這些示例快速在Oculus平臺(tái)上制作出自己的動(dòng)畫、點(diǎn)擊方式、模型的形狀和網(wǎng)格。這樣，VR應(yīng)用所需的曲面UI背景就不是問題了。由于我的應(yīng)用需要兼容谷歌Cardboard，在這里我耍了點(diǎn)小聰明，將這些免費(fèi)素材轉(zhuǎn)換成了Cardboard兼容版。

素材在手，天下我有，此前的擔(dān)憂全都消失不見了。因此我開始在應(yīng)用的視覺效果上下功夫，用手上現(xiàn)有的素材和工具測試了一系列設(shè)計(jì)方案。當(dāng)然，由于時(shí)間有限，容易執(zhí)行的方案最終脫穎而出。在該方案中，一系列扁平和弧形面板成了汽車縮略圖的最好呈現(xiàn)方式。

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

為此，我設(shè)計(jì)了三種圖片呈現(xiàn)方案：

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

2. 弧形面板的方案：主要以O(shè)culus Unity的演示為基礎(chǔ)。

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

從第三種方案開始

我決定先攻克最難的部分，于是第三種方案成了首選。不過，上手后我發(fā)現(xiàn)，將Unity的素材轉(zhuǎn)換成Cardboard專用實(shí)在是太令人煎熬了，它們有時(shí)很難一一對應(yīng)，你需要逐個(gè)進(jìn)行細(xì)微的調(diào)整。

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

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

2號方案

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

我花了一整個(gè)下午研究這些奇奇怪怪的FBX文檔，但最終由于時(shí)間限制，我放棄了這個(gè)方案，確實(shí)有點(diǎn)可惜。此外，這里面的腳本聯(lián)系緊密，牽一發(fā)而動(dòng)全身，我根本沒時(shí)間從頭到尾徹底完成轉(zhuǎn)換。如果此前我有一定的建模經(jīng)驗(yàn)，這部分工作做起來想必會(huì)順暢許多。

圖5（動(dòng)圖）：在Cinema 4D中修改FBX模型

1號方案

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

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

評估并選擇最終方案

眼看第二天就要結(jié)束了，我必須在方案1和方案3中做出選擇。方案3耗費(fèi)了我大量的精力，如果放棄還感覺挺可惜的，但如果采用該方案后期可能會(huì)遇到更多麻煩。相反，方案1在開發(fā)難度上有天然的優(yōu)勢。最終，為了加快進(jìn)度，我選擇了使用扁平面板的方案1。

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

定好了設(shè)計(jì)方案后就需要具體實(shí)施了。在這一步中，我們重點(diǎn)要搞定場景與場景之間的切換。由于腳本設(shè)計(jì)對我來說是未知領(lǐng)域，所以各種困難完全是意料之中。

起初，我的大部分精力都投入到了click事件的制作中。我發(fā)現(xiàn)如果將屏幕與click事件聯(lián)系起來并利用Unity Animator制作一些過渡效果，就能順暢的完成場景切換。

最后，我可以用菜單管理器做收尾，這樣一來，屏幕和各個(gè)事件就可以緊密聯(lián)系起來了。雖然看起來有些復(fù)雜，但確實(shí)挺符合邏輯的。

場景切換

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

圖7 圖8（代碼）

在開發(fā)過程中我使用了Unity 5.3，該版本中包含名為SceneManagement的工具，利用它我們可以在運(yùn)行時(shí)控制場景，所以別忘了將“using UnityEngine.SceneManagement”的代碼加入腳本中。另外，由于Unity平臺(tái)迭代速度較快，你經(jīng)常會(huì)發(fā)現(xiàn)此前積累的知識(shí)過時(shí)了，在這里SceneManager.LoadScene就替代了原有的Application.LoadLevel。

我在每頁中創(chuàng)建了一個(gè)空白的游戲?qū)ο?，隨后將我的場景切換腳本（即按鈕管理器）加入其中。隨后在每張汽車圖片中，我簡單的加入了一個(gè)OnClick事件并選擇了ButtonManager.LoadScene的切換方式，最后為它設(shè)定場景切換的具體對象。搞定后，就可以點(diǎn)擊汽車圖片瀏覽車輛座艙了。

圖9：具體操作方式

第5-8天：面板觸發(fā)按鈕

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

這一步執(zhí)行起來就簡單多了，彈出式面板算是最基本的功能了，想必剛?cè)腴T的菜鳥也能搞定。不過在完成前，你還是要先拿出測試版并對其進(jìn)行針對性的測試和修改。

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

在這一部分，我花了三天時(shí)間來處理文本信息的外觀。在這里我用到了Unity的Animator工具，通過它我可以為面板設(shè)定開啟或關(guān)閉的轉(zhuǎn)臺(tái)，隨后我又用腳本為其添加了新按鈕，以便能更好的控制面板開啟或關(guān)閉的動(dòng)畫。在制作過程中，我發(fā)現(xiàn)這一步設(shè)計(jì)起來并不是那么簡單，由于移動(dòng)部件過多，制作過程很容易出錯(cuò)。

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

圖11

什么？不需要代碼？我這漫長的三天都白走了嗎？于是我用EventTrigger改造了自己的測試按鈕，最后面板開啟和關(guān)閉的動(dòng)作居然順利實(shí)現(xiàn)了。

不過，幾分鐘之后我就被潑了涼水，因?yàn)檫@動(dòng)畫做的實(shí)在是太渣了。打開和關(guān)閉面板的動(dòng)作還說得過去，但整個(gè)動(dòng)作讓人看的尷尬癥都犯了，跟我心中預(yù)想的絲般順滑根本不沾邊。所以我還得再給它加個(gè)動(dòng)畫。

圖12（動(dòng)圖）：簡單卻不和諧的彈出面板

最后的努力

第八天到了，開發(fā)的第三階段馬上就要結(jié)束。我整理了下思緒并重新將精力集中在腳本和動(dòng)畫上。昨晚思考了很久后，我發(fā)現(xiàn)背景這張全景照片應(yīng)該是操作選擇位。如果一個(gè)按鈕可以控制面板開啟和關(guān)閉兩個(gè)動(dòng)作，那么操作選擇位就應(yīng)該負(fù)責(zé)查看面板的狀態(tài)。

雖然這一想法比較粗糙，但在其指導(dǎo)下我發(fā)現(xiàn)了一個(gè)新教程，它與我的思路基本吻合，該教程名為“滑動(dòng)菜單”，不過由于該教程與我使用的Unity平臺(tái)版本不同，我還花了不少時(shí)間適應(yīng)。

我又打開了Animator工具，并在其中創(chuàng)建了空白、打開和關(guān)閉幾種狀態(tài)。隨后我使用動(dòng)畫工具和關(guān)鍵幀制作了GameObject.IsActive（其中關(guān)閉時(shí)=0，打開時(shí)=1）。接著，我添加了一個(gè)名為isHidden的波爾參數(shù)，并將開啟和關(guān)閉的過渡動(dòng)畫設(shè)為真（true），而其他過渡動(dòng)畫則設(shè)為假（false）。

圖13：Animator中的三種狀態(tài)

圖14（代碼）

隨后我按照教程中的示例創(chuàng)建了新腳本并將該腳本加入一個(gè)空白的游戲?qū)ο?，接著用ToggleMenu的方法將OnClick事件加入我創(chuàng)建好的按鈕中。經(jīng)過一番調(diào)整，我成功了，只需輕點(diǎn)按鈕，就會(huì)有一個(gè)面板彈出來。

第9天：制作UI并調(diào)整面板的動(dòng)畫

經(jīng)過一個(gè)星期的辛苦搭建，我主要的按鈕事件都能正常運(yùn)行了，不過看起來還不夠流暢，我還需要再對其動(dòng)畫進(jìn)行微調(diào)。經(jīng)過一系列測試，我為其增加了一個(gè)alpha過渡，這樣一來我就得到了非常完美的淡入和淡出效果。

第10-12天：優(yōu)化場景切換的流暢度

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

我嘗試了5種網(wǎng)友分享的腳本并試圖讓其兼容我的項(xiàng)目。在測試中，我還嘗試了加入?yún)f(xié)同程序（時(shí)間函數(shù)）和黑色的square UI，不過大多數(shù)的嘗試都以編譯錯(cuò)誤告終，我也找不到修復(fù)的辦法。

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

不過這只能算是一部分，我還需要另一個(gè)腳本來激活淡入淡出的特效，在這里我又卡住了。第12天，我一直笨手笨腳的忙著學(xué)習(xí)教程中的代碼，不過無論怎么看它都不太適合我的項(xiàng)目，編譯錯(cuò)誤的提示一個(gè)接著一個(gè)出現(xiàn)。

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

山重水復(fù)疑無路，柳暗花明又一村，我突然想到了Application.LoadLevel（即SceneManager.LoadScene）這個(gè)老朋友。我試著將教程腳本中的主要部分填入現(xiàn)有的按鈕管理器腳本（參見上文第4天），經(jīng)過一系列實(shí)驗(yàn)和調(diào)整后，我得到了一個(gè)修改后的新腳本，它可以運(yùn)行一個(gè)協(xié)同程序并通過click按鈕調(diào)出我的Fading腳本。

圖16（代碼）

此前click按鈕就已經(jīng)調(diào)試成功了，現(xiàn)在直接使用即可，如果遇到卡頓情況，你需要調(diào)整一下時(shí)間設(shè)置。終于成功了，隨后我只需將其應(yīng)用到其他場景中即可。時(shí)間還剩下兩天，勝利已經(jīng)在向我招手了。

第13天：沖刺階段和最后的驚喜

搞定了上面的部分后我感覺輕松多了，下面我需要完成車輛座艙的界面了。在這里，我為每輛車加入了3個(gè)按鈕和3個(gè)彈出式面板。不過在測試時(shí)我突然發(fā)現(xiàn)這3個(gè)按鈕居然開啟的是同一個(gè)面板，這可怎么辦！平復(fù)了一下郁悶的心情后，我想到了幾個(gè)解決方案。

我花了一早上時(shí)間來修改腳本和參數(shù)。我本想通過改變參數(shù)來解決開關(guān)問題，但卻突然想到了個(gè)簡單的解決方案。我只需把PopupManager添加進(jìn)面板并分配好彈出動(dòng)畫信息就行。于是，我為3個(gè)按鈕都創(chuàng)建了OnClick事件并對目標(biāo)面板進(jìn)行了設(shè)置。最后，這些按鈕終于能各司其職了，成功已經(jīng)近在眼前。

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

在測試頁面完成了所有項(xiàng)目的測試并確認(rèn)功能完好后，我將其擴(kuò)大到整個(gè)應(yīng)用并完成了最后的“打磨”。這個(gè)項(xiàng)目算是成功了，我還將原計(jì)劃提前了一天。雖說在這兩周內(nèi)被各種錯(cuò)誤折磨，但我學(xué)到了許多東西而且做出了成果。下一步，我會(huì)為該應(yīng)用加入聲音和視頻，此外其內(nèi)置車型也會(huì)不斷增加。

成品視頻：Vimeo

革命尚未成功，各位繼續(xù)努力吧！

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。