0
| 本文作者： 大壮旅 | 2016-07-08 11:39 |
【编者按】本文作者Tessa Chung， AOL Alpha的产品设计师。本文是关于作者在14天内打造一个VR应用Demo的经历，原文发表在Medium。
在AOL Alpha工作时，我们经常会尝试许多新诞生的平台，作为近些年来最火热的概念，虚拟现实（VR）自然成了开发者的重点。最近我也涉足了该领域并完成了一项艰巨的任务，整个过程极其考验我的耐心，但最终我收获颇多。
这项艰巨的任务就是独立打造一款VR应用Demo，但时间却只有短短两周。这款应用基于AOL的汽车博客且需兼容谷歌Cardboard。此外，它还需要具备VR应用基本的功能，以便用户戴上Cardboard后能置身在自己心仪车辆的座舱中。
如果你是位经验丰富的游戏设计师，这项任务简直小菜一碟。不过作为一名移动应用设计师，VR对我来说完全是全新的领域，在Unity3D引擎和脚本设计上，我更是属于菜鸟级别。
由于VR仍处于初级阶段，因此设计和开发中的困难无法避免。为了更快的上手，我专门花时间浏览了许多利用Unity3D引擎开发VR应用的案例。不看不知道，一看吓一跳，VR开发领域现在简直就是狂野的西部，这里没有规则，没有组织，各种相关信息更是少得可怜。在整个开发过程中，我就像是在污染的湖中钓鱼，鱼饵下去不少，但多数时候钓上来的都是垃圾。
不过，经过我的努力，最终这款应用还是在14天之期内顺利完成了。下面，我就给大家讲述一下我的“心路历程”，分享一些开发过程中积累的技巧和解决方案。
首先，我们坐下来开了个简单的小会。会上定了大概的方向，将应用做的足够简洁是主要指导方针。我们需要完成主页、主菜单和360度座舱的设计并加入一些交互界面。
图1：应用的主要部分
首先，我们需要在天空盒（skybox）中加入一张车辆座舱的全景图片。主菜单看起来要像汽车的陈列画廊，在这里你可以利用自己的技术玩点小创意。这个主菜单可以做成列表、网格和面板等造型。由于主菜单对整个应用具有绝对的支配力，所以我得安排好图片呈现的方式。
为了帮助开发者快速上手，Unity最近发布了一系列免费的VR设计范例，开发者可以通过这些示例快速在Oculus平台上制作出自己的动画、点击方式、模型的形状和网格。这样，VR应用所需的曲面UI背景就不是问题了。由于我的应用需要兼容谷歌Cardboard，在这里我耍了点小聪明，将这些免费素材转换成了Cardboard兼容版。
素材在手，天下我有，此前的担忧全都消失不见了。因此我开始在应用的视觉效果上下功夫，用手上现有的素材和工具测试了一系列设计方案。当然，由于时间有限，容易执行的方案最终脱颖而出。在该方案中，一系列扁平和弧形面板成了汽车缩略图的最好呈现方式。
图2（上）：弧形面板 图3（下）：扁平面板
为此，我设计了三种图片呈现方案：
1. 扁平面板的方案：主要以Cardboard的演示为基础。
2. 弧形面板的方案：主要以Oculus Unity的演示为基础。
3. 弧形面板的方案：主要以Cardboard的演示为基础。此方案需要将Unity的Oculus平台演示转换成Cardboard兼容的素材。虽然工程量变大了，但绝对值得一试。
我决定先攻克最难的部分，于是第三种方案成了首选。不过，上手后我发现，将Unity的素材转换成Cardboard专用实在是太令人煎熬了，它们有时很难一一对应，你需要逐个进行细微的调整。
此外，将Unity的脚本引入新平台的过程实在让人抓狂，原始素材中总有些脚本环环相扣，要完成卷帙浩繁的修改工作实在是要人命，各种错误频出更是让人想砸键盘。整个过程中，“编辑器错误”的提示成了家常便饭。
图4：令人抓狂的“编辑器错误”提示
想要在Unity中制作弧形图片和文本，你就要依赖3D网格和模型。不幸的是，官方演示中的网格比例与我手中的汽车图片不搭，所以，如果我还想继续使用，就需要重新对其进行设计。
我花了一整个下午研究这些奇奇怪怪的FBX文档，但最终由于时间限制，我放弃了这个方案，确实有点可惜。此外，这里面的脚本联系紧密，牵一发而动全身，我根本没时间从头到尾彻底完成转换。如果此前我有一定的建模经验，这部分工作做起来想必会顺畅许多。
图5（动图）：在Cinema 4D中修改FBX模型
1号方案刚开始有些难对付，不过后来我将Unity的UI按钮伪装成了图片素材。我将这些UI按钮并列在相机前，让它们互相之间保持30度的倾角（Y轴），这样它们就能“包裹”住相机。随后，整个主菜单的制作就简单了许多，借助Unity系统的特性，UI按钮获得了特别的视觉元素。UI按钮确实是个好东西，后面制作click事件时，我也用到了它。
图6：1号方案的早期俯视图
眼看第二天就要结束了，我必须在方案1和方案3中做出选择。方案3耗费了我大量的精力，如果放弃还感觉挺可惜的，但如果采用该方案后期可能会遇到更多麻烦。相反，方案1在开发难度上有天然的优势。最终，为了加快进度，我选择了使用扁平面板的方案1。
定好了设计方案后就需要具体实施了。在这一步中，我们重点要搞定场景与场景之间的切换。由于脚本设计对我来说是未知领域，所以各种困难完全是意料之中。
起初，我的大部分精力都投入到了click事件的制作中。我发现如果将屏幕与click事件联系起来并利用Unity Animator制作一些过渡效果，就能顺畅的完成场景切换。
最后，我可以用菜单管理器做收尾，这样一来，屏幕和各个事件就可以紧密联系起来了。虽然看起来有些复杂，但确实挺符合逻辑的。
在前几天的工作中，各种艰难险阻是主旋律，但不知为何突然间我运气就变好了。在谷歌上进行了一番搜索后，我居然发现了能轻松搞定场景切换的神器——LoadScene。只要简单的几行代码，我就能轻松用click按钮控制场景切换了，这可比我之前想象的要简单多了。
图7 图8（代码）
在开发过程中我使用了Unity 5.3，该版本中包含名为SceneManagement的工具，利用它我们可以在运行时控制场景，所以别忘了将“using UnityEngine.SceneManagement”的代码加入脚本中。另外，由于Unity平台迭代速度较快，你经常会发现此前积累的知识过时了，在这里SceneManager.LoadScene就替代了原有的Application.LoadLevel。
我在每页中创建了一个空白的游戏对象，随后将我的场景切换脚本（即按钮管理器）加入其中。随后在每张汽车图片中，我简单的加入了一个OnClick事件并选择了ButtonManager.LoadScene的切换方式，最后为它设定场景切换的具体对象。搞定后，就可以点击汽车图片浏览车辆座舱了。
图9：具体操作方式
下一步，我开始专注打造座舱内的场景。为了提升真实感，我连车辆瞬时油耗和性能表现等数据都加了进去，不过我可不想让这些琐碎的数据分散了用户的注意力，在VR世界中，阅读过多文本简直让人抓狂。因此，我专门将这些琐碎的信息谨慎的压缩进一些交互元素中去。随后，我就要开始安排座舱中交互按钮的位置了，点击这些按钮，用户就可以看到弹出式的信息面板。
这一步执行起来就简单多了，弹出式面板算是最基本的功能了，想必刚入门的菜鸟也能搞定。不过在完成前，你还是要先拿出测试版并对其进行针对性的测试和修改。
图10：座舱中的按钮和弹出式面板
在这一部分，我花了三天时间来处理文本信息的外观。在这里我用到了Unity的Animator工具，通过它我可以为面板设定开启或关闭的转台，随后我又用脚本为其添加了新按钮，以便能更好的控制面板开启或关闭的动画。在制作过程中，我发现这一步设计起来并不是那么简单，由于移动部件过多，制作过程很容易出错。
为了保证整个过程完美无缺，我测试了六七种教程上的方法，但无论是点击还是悬浮，想要的效果都没能实现。不过在第七天，我偶尔在论坛上看到了一个名为“在click按钮上开启和隐藏画布”的帖子，下面一个回复让我茅塞顿开。
图11
什么？不需要代码？我这漫长的三天都白走了吗？于是我用EventTrigger改造了自己的测试按钮，最后面板开启和关闭的动作居然顺利实现了。
不过，几分钟之后我就被泼了凉水，因为这动画做的实在是太渣了。打开和关闭面板的动作还说得过去，但整个动作让人看的尴尬症都犯了，跟我心中预想的丝般顺滑根本不沾边。所以我还得再给它加个动画。
图12（动图）：简单却不和谐的弹出面板
第八天到了，开发的第三阶段马上就要结束。我整理了下思绪并重新将精力集中在脚本和动画上。昨晚思考了很久后，我发现背景这张全景照片应该是操作选择位。如果一个按钮可以控制面板开启和关闭两个动作，那么操作选择位就应该负责查看面板的状态。
虽然这一想法比较粗糙，但在其指导下我发现了一个新教程，它与我的思路基本吻合，该教程名为“滑动菜单”，不过由于该教程与我使用的Unity平台版本不同，我还花了不少时间适应。
我又打开了Animator工具，并在其中创建了空白、打开和关闭几种状态。随后我使用动画工具和关键帧制作了GameObject.IsActive（其中关闭时=0，打开时=1）。接着，我添加了一个名为isHidden的波尔参数，并将开启和关闭的过渡动画设为真（true），而其他过渡动画则设为假（false）。
图13：Animator中的三种状态
图14（代码）
随后我按照教程中的示例创建了新脚本并将该脚本加入一个空白的游戏对象，接着用ToggleMenu的方法将OnClick事件加入我创建好的按钮中。经过一番调整，我成功了，只需轻点按钮，就会有一个面板弹出来。
经过一个星期的辛苦搭建，我主要的按钮事件都能正常运行了，不过看起来还不够流畅，我还需要再对其动画进行微调。经过一系列测试，我为其增加了一个alpha过渡，这样一来我就得到了非常完美的淡入和淡出效果。
由于时间还比较充裕，我决定再次检视场景切换功能，不过场景过渡还是会有些卡，因此优化流畅度成了主要任务。由于这部分不涉及动画，所以我无法使用按钮和面板制作中的老方法。在寻找新方法的过程中，我将解决方案缩减成了两种，一种是画面逐渐变黑，另一种则是利用CrossFadeAlpha和CrossFadeColor两种方法来解决。
我尝试了5种网友分享的脚本并试图让其兼容我的项目。在测试中，我还尝试了加入协同程序（时间函数）和黑色的square UI，不过大多数的尝试都以编译错误告终，我也找不到修复的办法。
失败后我又重新开始找教程并再次回到了淡入淡出效果的老路上。跟着教程，我制作了名为Fading的全新脚本并逐字将其拷贝下来，接下来我按着教程一路前行并最终取得的成功。
不过这只能算是一部分，我还需要另一个脚本来激活淡入淡出的特效，在这里我又卡住了。第12天，我一直笨手笨脚的忙着学习教程中的代码，不过无论怎么看它都不太适合我的项目，编译错误的提示一个接着一个出现。
图15（代码）：教程中激活淡入淡出特效的脚本
山重水复疑无路，柳暗花明又一村，我突然想到了Application.LoadLevel（即SceneManager.LoadScene）这个老朋友。我试着将教程脚本中的主要部分填入现有的按钮管理器脚本（参见上文第4天），经过一系列实验和调整后，我得到了一个修改后的新脚本，它可以运行一个协同程序并通过click按钮调出我的Fading脚本。
图16（代码）
此前click按钮就已经调试成功了，现在直接使用即可，如果遇到卡顿情况，你需要调整一下时间设置。终于成功了，随后我只需将其应用到其他场景中即可。时间还剩下两天，胜利已经在向我招手了。
搞定了上面的部分后我感觉轻松多了，下面我需要完成车辆座舱的界面了。在这里，我为每辆车加入了3个按钮和3个弹出式面板。不过在测试时我突然发现这3个按钮居然开启的是同一个面板，这可怎么办！平复了一下郁闷的心情后，我想到了几个解决方案。
我花了一早上时间来修改脚本和参数。我本想通过改变参数来解决开关问题，但却突然想到了个简单的解决方案。我只需把PopupManager添加进面板并分配好弹出动画信息就行。于是，我为3个按钮都创建了OnClick事件并对目标面板进行了设置。最后，这些按钮终于能各司其职了，成功已经近在眼前。
图17：面板的检查照片（左），按钮（右）
在测试页面完成了所有项目的测试并确认功能完好后，我将其扩大到整个应用并完成了最后的“打磨”。这个项目算是成功了，我还将原计划提前了一天。虽说在这两周内被各种错误折磨，但我学到了许多东西而且做出了成果。下一步，我会为该应用加入声音和视频，此外其内置车型也会不断增加。
成品视频：Vimeo
革命尚未成功，各位继续努力吧！
雷峰网原创文章，未经授权禁止转载。详情见转载须知。
