谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(二) - 优设-UISDC

谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(二)

2016/07/31 7034评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/google-vr-app-unity-cardboard-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

UI sketch 转场动效 界面设计 平面设计 设计师 交互设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 动效设计 设计趋势 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里