0
| 本文作者： 大壯旅 | 2016-07-08 11:39 |
【編者按】本文作者Tessa Chung， AOL Alpha的產(chǎn)品設計師。本文是關于作者在14天內(nèi)打造一個VR應用Demo的經(jīng)歷，原文發(fā)表在Medium。
在AOL Alpha工作時，我們經(jīng)常會嘗試許多新誕生的平臺，作為近些年來最火熱的概念，虛擬現(xiàn)實（VR）自然成了開發(fā)者的重點。最近我也涉足了該領域并完成了一項艱巨的任務，整個過程極其考驗我的耐心，但最終我收獲頗多。
這項艱巨的任務就是獨立打造一款VR應用Demo，但時間卻只有短短兩周。這款應用基于AOL的汽車博客且需兼容谷歌Cardboard。此外，它還需要具備VR應用基本的功能，以便用戶戴上Cardboard后能置身在自己心儀車輛的座艙中。
如果你是位經(jīng)驗豐富的游戲設計師，這項任務簡直小菜一碟。不過作為一名移動應用設計師，VR對我來說完全是全新的領域，在Unity3D引擎和腳本設計上，我更是屬于菜鳥級別。
由于VR仍處于初級階段，因此設計和開發(fā)中的困難無法避免。為了更快的上手，我專門花時間瀏覽了許多利用Unity3D引擎開發(fā)VR應用的案例。不看不知道，一看嚇一跳，VR開發(fā)領域現(xiàn)在簡直就是狂野的西部，這里沒有規(guī)則，沒有組織，各種相關信息更是少得可憐。在整個開發(fā)過程中，我就像是在污染的湖中釣魚，魚餌下去不少，但多數(shù)時候釣上來的都是垃圾。
不過，經(jīng)過我的努力，最終這款應用還是在14天之期內(nèi)順利完成了。下面，我就給大家講述一下我的“心路歷程”，分享一些開發(fā)過程中積累的技巧和解決方案。
首先，我們坐下來開了個簡單的小會。會上定了大概的方向，將應用做的足夠簡潔是主要指導方針。我們需要完成主頁、主菜單和360度座艙的設計并加入一些交互界面。
圖1：應用的主要部分
首先，我們需要在天空盒（skybox）中加入一張車輛座艙的全景圖片。主菜單看起來要像汽車的陳列畫廊，在這里你可以利用自己的技術玩點小創(chuàng)意。這個主菜單可以做成列表、網(wǎng)格和面板等造型。由于主菜單對整個應用具有絕對的支配力，所以我得安排好圖片呈現(xiàn)的方式。
為了幫助開發(fā)者快速上手，Unity最近發(fā)布了一系列免費的VR設計范例，開發(fā)者可以通過這些示例快速在Oculus平臺上制作出自己的動畫、點擊方式、模型的形狀和網(wǎng)格。這樣，VR應用所需的曲面UI背景就不是問題了。由于我的應用需要兼容谷歌Cardboard，在這里我耍了點小聰明，將這些免費素材轉換成了Cardboard兼容版。
素材在手，天下我有，此前的擔憂全都消失不見了。因此我開始在應用的視覺效果上下功夫，用手上現(xiàn)有的素材和工具測試了一系列設計方案。當然，由于時間有限，容易執(zhí)行的方案最終脫穎而出。在該方案中，一系列扁平和弧形面板成了汽車縮略圖的最好呈現(xiàn)方式。
圖2（上）：弧形面板 圖3（下）：扁平面板
為此，我設計了三種圖片呈現(xiàn)方案：
1. 扁平面板的方案：主要以Cardboard的演示為基礎。
2. 弧形面板的方案：主要以Oculus Unity的演示為基礎。
3. 弧形面板的方案：主要以Cardboard的演示為基礎。此方案需要將Unity的Oculus平臺演示轉換成Cardboard兼容的素材。雖然工程量變大了，但絕對值得一試。
我決定先攻克最難的部分，于是第三種方案成了首選。不過，上手后我發(fā)現(xiàn)，將Unity的素材轉換成Cardboard專用實在是太令人煎熬了，它們有時很難一一對應，你需要逐個進行細微的調整。
此外，將Unity的腳本引入新平臺的過程實在讓人抓狂，原始素材中總有些腳本環(huán)環(huán)相扣，要完成卷帙浩繁的修改工作實在是要人命，各種錯誤頻出更是讓人想砸鍵盤。整個過程中，“編輯器錯誤”的提示成了家常便飯。
圖4：令人抓狂的“編輯器錯誤”提示
想要在Unity中制作弧形圖片和文本，你就要依賴3D網(wǎng)格和模型。不幸的是，官方演示中的網(wǎng)格比例與我手中的汽車圖片不搭，所以，如果我還想繼續(xù)使用，就需要重新對其進行設計。
我花了一整個下午研究這些奇奇怪怪的FBX文檔，但最終由于時間限制，我放棄了這個方案，確實有點可惜。此外，這里面的腳本聯(lián)系緊密，牽一發(fā)而動全身，我根本沒時間從頭到尾徹底完成轉換。如果此前我有一定的建模經(jīng)驗，這部分工作做起來想必會順暢許多。
圖5（動圖）：在Cinema 4D中修改FBX模型
1號方案剛開始有些難對付，不過后來我將Unity的UI按鈕偽裝成了圖片素材。我將這些UI按鈕并列在相機前，讓它們互相之間保持30度的傾角（Y軸），這樣它們就能“包裹”住相機。隨后，整個主菜單的制作就簡單了許多，借助Unity系統(tǒng)的特性，UI按鈕獲得了特別的視覺元素。UI按鈕確實是個好東西，后面制作click事件時，我也用到了它。
圖6：1號方案的早期俯視圖
眼看第二天就要結束了，我必須在方案1和方案3中做出選擇。方案3耗費了我大量的精力，如果放棄還感覺挺可惜的，但如果采用該方案后期可能會遇到更多麻煩。相反，方案1在開發(fā)難度上有天然的優(yōu)勢。最終，為了加快進度，我選擇了使用扁平面板的方案1。
定好了設計方案后就需要具體實施了。在這一步中，我們重點要搞定場景與場景之間的切換。由于腳本設計對我來說是未知領域，所以各種困難完全是意料之中。
起初，我的大部分精力都投入到了click事件的制作中。我發(fā)現(xiàn)如果將屏幕與click事件聯(lián)系起來并利用Unity Animator制作一些過渡效果，就能順暢的完成場景切換。
最后，我可以用菜單管理器做收尾，這樣一來，屏幕和各個事件就可以緊密聯(lián)系起來了。雖然看起來有些復雜，但確實挺符合邏輯的。
在前幾天的工作中，各種艱難險阻是主旋律，但不知為何突然間我運氣就變好了。在谷歌上進行了一番搜索后，我居然發(fā)現(xiàn)了能輕松搞定場景切換的神器——LoadScene。只要簡單的幾行代碼，我就能輕松用click按鈕控制場景切換了，這可比我之前想象的要簡單多了。
圖7 圖8（代碼）
在開發(fā)過程中我使用了Unity 5.3，該版本中包含名為SceneManagement的工具，利用它我們可以在運行時控制場景，所以別忘了將“using UnityEngine.SceneManagement”的代碼加入腳本中。另外，由于Unity平臺迭代速度較快，你經(jīng)常會發(fā)現(xiàn)此前積累的知識過時了，在這里SceneManager.LoadScene就替代了原有的Application.LoadLevel。
我在每頁中創(chuàng)建了一個空白的游戲對象，隨后將我的場景切換腳本（即按鈕管理器）加入其中。隨后在每張汽車圖片中，我簡單的加入了一個OnClick事件并選擇了ButtonManager.LoadScene的切換方式，最后為它設定場景切換的具體對象。搞定后，就可以點擊汽車圖片瀏覽車輛座艙了。
圖9：具體操作方式
下一步，我開始專注打造座艙內(nèi)的場景。為了提升真實感，我連車輛瞬時油耗和性能表現(xiàn)等數(shù)據(jù)都加了進去，不過我可不想讓這些瑣碎的數(shù)據(jù)分散了用戶的注意力，在VR世界中，閱讀過多文本簡直讓人抓狂。因此，我專門將這些瑣碎的信息謹慎的壓縮進一些交互元素中去。隨后，我就要開始安排座艙中交互按鈕的位置了，點擊這些按鈕，用戶就可以看到彈出式的信息面板。
這一步執(zhí)行起來就簡單多了，彈出式面板算是最基本的功能了，想必剛入門的菜鳥也能搞定。不過在完成前，你還是要先拿出測試版并對其進行針對性的測試和修改。
圖10：座艙中的按鈕和彈出式面板
在這一部分，我花了三天時間來處理文本信息的外觀。在這里我用到了Unity的Animator工具，通過它我可以為面板設定開啟或關閉的轉臺，隨后我又用腳本為其添加了新按鈕，以便能更好的控制面板開啟或關閉的動畫。在制作過程中，我發(fā)現(xiàn)這一步設計起來并不是那么簡單，由于移動部件過多，制作過程很容易出錯。
為了保證整個過程完美無缺，我測試了六七種教程上的方法，但無論是點擊還是懸浮，想要的效果都沒能實現(xiàn)。不過在第七天，我偶爾在論壇上看到了一個名為“在click按鈕上開啟和隱藏畫布”的帖子，下面一個回復讓我茅塞頓開。
圖11
什么？不需要代碼？我這漫長的三天都白走了嗎？于是我用EventTrigger改造了自己的測試按鈕，最后面板開啟和關閉的動作居然順利實現(xiàn)了。
不過，幾分鐘之后我就被潑了涼水，因為這動畫做的實在是太渣了。打開和關閉面板的動作還說得過去，但整個動作讓人看的尷尬癥都犯了，跟我心中預想的絲般順滑根本不沾邊。所以我還得再給它加個動畫。
圖12（動圖）：簡單卻不和諧的彈出面板
第八天到了，開發(fā)的第三階段馬上就要結束。我整理了下思緒并重新將精力集中在腳本和動畫上。昨晚思考了很久后，我發(fā)現(xiàn)背景這張全景照片應該是操作選擇位。如果一個按鈕可以控制面板開啟和關閉兩個動作，那么操作選擇位就應該負責查看面板的狀態(tài)。
雖然這一想法比較粗糙，但在其指導下我發(fā)現(xiàn)了一個新教程，它與我的思路基本吻合，該教程名為“滑動菜單”，不過由于該教程與我使用的Unity平臺版本不同，我還花了不少時間適應。
我又打開了Animator工具，并在其中創(chuàng)建了空白、打開和關閉幾種狀態(tài)。隨后我使用動畫工具和關鍵幀制作了GameObject.IsActive（其中關閉時=0，打開時=1）。接著，我添加了一個名為isHidden的波爾參數(shù)，并將開啟和關閉的過渡動畫設為真（true），而其他過渡動畫則設為假（false）。
圖13：Animator中的三種狀態(tài)
圖14（代碼）
隨后我按照教程中的示例創(chuàng)建了新腳本并將該腳本加入一個空白的游戲對象，接著用ToggleMenu的方法將OnClick事件加入我創(chuàng)建好的按鈕中。經(jīng)過一番調整，我成功了，只需輕點按鈕，就會有一個面板彈出來。
經(jīng)過一個星期的辛苦搭建，我主要的按鈕事件都能正常運行了，不過看起來還不夠流暢，我還需要再對其動畫進行微調。經(jīng)過一系列測試，我為其增加了一個alpha過渡，這樣一來我就得到了非常完美的淡入和淡出效果。
由于時間還比較充裕，我決定再次檢視場景切換功能，不過場景過渡還是會有些卡，因此優(yōu)化流暢度成了主要任務。由于這部分不涉及動畫，所以我無法使用按鈕和面板制作中的老方法。在尋找新方法的過程中，我將解決方案縮減成了兩種，一種是畫面逐漸變黑，另一種則是利用CrossFadeAlpha和CrossFadeColor兩種方法來解決。
我嘗試了5種網(wǎng)友分享的腳本并試圖讓其兼容我的項目。在測試中，我還嘗試了加入?yún)f(xié)同程序（時間函數(shù)）和黑色的square UI，不過大多數(shù)的嘗試都以編譯錯誤告終，我也找不到修復的辦法。
失敗后我又重新開始找教程并再次回到了淡入淡出效果的老路上。跟著教程，我制作了名為Fading的全新腳本并逐字將其拷貝下來，接下來我按著教程一路前行并最終取得的成功。
不過這只能算是一部分，我還需要另一個腳本來激活淡入淡出的特效，在這里我又卡住了。第12天，我一直笨手笨腳的忙著學習教程中的代碼，不過無論怎么看它都不太適合我的項目，編譯錯誤的提示一個接著一個出現(xiàn)。
圖15（代碼）：教程中激活淡入淡出特效的腳本
山重水復疑無路，柳暗花明又一村，我突然想到了Application.LoadLevel（即SceneManager.LoadScene）這個老朋友。我試著將教程腳本中的主要部分填入現(xiàn)有的按鈕管理器腳本（參見上文第4天），經(jīng)過一系列實驗和調整后，我得到了一個修改后的新腳本，它可以運行一個協(xié)同程序并通過click按鈕調出我的Fading腳本。
圖16（代碼）
此前click按鈕就已經(jīng)調試成功了，現(xiàn)在直接使用即可，如果遇到卡頓情況，你需要調整一下時間設置。終于成功了，隨后我只需將其應用到其他場景中即可。時間還剩下兩天，勝利已經(jīng)在向我招手了。
搞定了上面的部分后我感覺輕松多了，下面我需要完成車輛座艙的界面了。在這里，我為每輛車加入了3個按鈕和3個彈出式面板。不過在測試時我突然發(fā)現(xiàn)這3個按鈕居然開啟的是同一個面板，這可怎么辦！平復了一下郁悶的心情后，我想到了幾個解決方案。
我花了一早上時間來修改腳本和參數(shù)。我本想通過改變參數(shù)來解決開關問題，但卻突然想到了個簡單的解決方案。我只需把PopupManager添加進面板并分配好彈出動畫信息就行。于是，我為3個按鈕都創(chuàng)建了OnClick事件并對目標面板進行了設置。最后，這些按鈕終于能各司其職了，成功已經(jīng)近在眼前。
圖17：面板的檢查照片（左），按鈕（右）
在測試頁面完成了所有項目的測試并確認功能完好后，我將其擴大到整個應用并完成了最后的“打磨”。這個項目算是成功了，我還將原計劃提前了一天。雖說在這兩周內(nèi)被各種錯誤折磨，但我學到了許多東西而且做出了成果。下一步，我會為該應用加入聲音和視頻，此外其內(nèi)置車型也會不斷增加。
成品視頻：Vimeo
革命尚未成功，各位繼續(xù)努力吧！
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權禁止轉載。詳情見轉載須知。
