google-vr-app-unity-cardboard-2-1

编者按:国内关注VR的设计师不多,能持续关注并产出优质内容的设计师更是凤毛麟角,建议想跟上趋势的同学多关注腾讯高级交互设计师@C7210 。今天他的译文实战性很强,包括从Unity商店下载环境资源、在项目中使用Google VR Unity SDK提供的组件及第三方脚本等等。

欢迎关注译者(交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX)的微信公众号:Beforweb

这儿有他的访谈:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

@C7210 :时至今日,多少已经对VR世界有些神往了吧?作为设计师,是否已经有了上手的兴趣?大家都差不多的样子。最近,有几篇不错的文章给到我(英文原文作者)一些启示,包括:

经过简单的研究与学习,我发现即便不曾有过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项目:

sb201607301

我将会使用Forest Environment这套免费的模型来搭建环境,你也可以在Unity资源商店随便逛逛,选择自己更加喜欢的环境模型拿回来用。在资源页面中点击Open in Unity按钮,Unity会自动将其加载到Asset Store面板当中。点击面板上的Download按钮(需要注册并登录Unity帐户;Unity不允许用户直接通过网页下载资源):

sb201607302

注意:如无法下载,请尝试VPN。

下载完成之后,在Import Unity Package对话框中,确保所有资源都有被勾选,然后点击Import按钮:

sb201607303

在Project面板当中,按照下图所示的路径找到demoScene_free.unity文件,双击,然后我们下载到的环境模型便会被加载到Scene面板中:

sb201607304

点击顶部的Play按钮,在Game模式中查看一下目前的实际效果:

sb201607305

第2步:安装Google VR Unity SDK

在左侧的Hierarchy面板中,删除First Person Controller和Main Camera:

sb201607306

将之前下载的Google VR Unity SDK解压,得到“gvr-unity-sdk-master”文件夹。回到Unity,点击菜单栏中的Assets > Import Package > Custom Package,选择刚刚解压缩的文件夹中的GoogleVRForUnity.unitypackage,点击Open按钮。在接下来弹出的Import Unity Package对话框中,确保所有资源都有被勾选,然后点击Import按钮:

sb201607307

sb201607308

sb201607309

导入完成后,在Project面板的资源列表中找到Assets > GoogleVR > Legacy > Prefabs文件夹,将其中的GvrMain拖放到Scene面板中:

sb2016073010

sb2016073011

点击Play按钮,界面会自动切换到Game面板。按住alt或control键,同时移动鼠标,测试一下主视角的移动方式。如果测试时发现之前拖放进来的GvrMain在位置上不太合适(主视角漂浮在空中或是位于地面以下),你可以结束Play模式,回到Scene面板当中对其进行调整 – 在右侧检查器中调整“Position”的值,或是直接通过鼠标移动GvrMain对象均可。

sb2016073012

第3步:添加自动行走功能

将之前下载的自动行走脚本文件包解压,将其中的Autowalk.cs文件夹拖放到Project面板的Assets根目录下:

sb2016073013

sb2016073014

双击Autowalk文件,使其在MonoDevelop编辑器当中被打开。Command+F,搜索“CardboardHead”,并替换为“GvrHead”;搜索“Cardboard.SDK”,全部替换为“GvrViewer.Instance”,然后保存文件并关闭MonoDevelop。

sb2016073015

sb2016073016

回到Unity,点选主界面左侧Hierarchy面板中的“GvrMain”,然后在主界面右侧的检查器中点击Add Component按钮,在搜索框中输入“autowalk”,点选该文件:

sb2016073017

检查器当中会出现新的“Autowalk”选项区。勾选“Walk When Triggered”,将“Speed”设置成“1”(或是你觉得更加合适的数值):

sb2016073018

点击Play按钮,进入Game模式,你会发现在点击鼠标之后主视角会自动向前行进,再次点击则会停下。

第4步:打包app

注意:以下步骤仅针对安卓平台,因此译者并未执行到实际部署环节。iOS方面的流程大同小异,详见上周的「谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(一)」

点击菜单栏中的File > Build Settings,在弹出的Build Settings窗口中,选择Platforms列表里的“Android”,然后点击列表下方的Player Settings按钮:

sb2016073019

Unity主界面右侧的检查器当中会出现PlayerSettings面板。在顶部的Company Name字段里输入公司或组织机构名称。接下来,在“Settings for Android”部分当中,点击“Resolution and Presentation”使其展开,将“Default Orientation”设置为“Auto Rotation”,然后取消勾选“Allowed Orientations for Auto Rotation”下的前三个选项,只保留最后一个“Landscape Left”为选中态:

sb2016073020

仍然在“Settings for Android”当中,点击“Other Settings”使其展开,并找到Bundle Identifier字段,在这里为你的app输入一个合法的安装包名称,譬如“com.mycompany.cardboarddemo”,只要遵循“com.<公司或组织名称>.<app名称>”的形式即可:

sb2016073021

仍然在“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按钮:

sb2016073022

如果觉得需要,还可以在“Icon”及“Splash Image”当中添加相应的素材作为app icon和闪屏图片。最后在Build Settings窗口中点击Build按钮。Building期间,你可能需要选择Android SDK的根目录。解压之前下载好的Android SDK压缩包,选择这个文件夹即可。此外你可能还会被要求升级SDK,点击确认即可。Build完成后,你便可以在Android手机上安装app了,然后放到Cardboard里尽情体验吧。

sb2016073023

有时你可能会发现视角不会随着头部的转动而相应的运动,这时重启app即可;具体原因或许和SDK及Android系统的版本有关。

欢迎关注译者(交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX)的微信公众号:

这儿有他的访谈:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

beforwebqr

「优设六月最新的VR设计好文合集」

VR入行手册!
《VR快速入行手册!可能是现在最全面的VR知识学习指南》

实战教程:
《实战教程来了!一名UX设计师的VR设计初体验》

VR设计指南:
《教程来了!VR设计指南之基础概念与设计工具》

原文地址:hackernoon.com
译文地址:beforweb

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏