谷歌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