Unity For Android Cardboard App ( 1 )：基础入门

作者： ericzwhuang

前言

目前Google官方推出的VR设备有DayDream（2016年推出）和Cardboard（2014年推出）两种。

• Daydream是消费级VR解决方案，提供了手持遥控设备Controller，提高渲染效率，优化延迟。
• Cardboard是体验级VR解决方案，属于入门级VR设备的首选，物美价廉。

本文针对的VR设备是Cardboard，Google为Cardboard提供的VR SDK主要有四种，分别是Android，iOS，Unity和Unreal。本文主要阐述的是如何在Unity环境下开发VR场景，实现视线与物体的简单交互。

软件准备

工欲善其事，必先利其器，首先介绍开发过程中需要用到的软件环境和开发工具

• Unity Editor 编辑图形界面的利器，所见即所得，使用的是Unity 5.4.2f2个人版
• Visual Studio 微软出品的C#开发编辑器，使用的是Visual Studio 2015个人版
• VR SDK 使用的是Google VR为Unity提供的SDK ，下载得到GoogleVRForUnity.unitypackage文件
• Android SDK Android开发必备环境，推荐和Android Studio配套下载
• JDK JAVA开发必备环境，需要配置环境变量
• Cardboard 最便宜的VR体验设备盒子，可以网购或自行组装

开发流程

本文将通过以下步骤来完成开发过程，使用清晰直观的图片辅助说明

• 导入资源，构建双目视图
• 添加交互物体
• 代码编写
• 建立物体、代码、事件之间关联关系
• Android平台打包

导入资源，构建双目视图

新建项目之后，从Assets -> Import Package中引入之前下载完成的 unitypackage 包，Project中的Assets文件夹下会添加两个文件夹GoogleVR 和 Plugins，包含Google为VR提供的一系列模板文件。

[1510559266465_8325_1510559334821.png]

目前在Cardboard上展示的视图一般都是双目视图，又称分屏视图，左右眼看见的图片内容略有不同，图像相互叠加形成立体效果。将Assets->GoogleVR->Prefabs->GvrViewerMain.prefab移到结构列表中，选中GvrViewerMain ，在Inpsector中设置Screen Size值为Nexus 5 ，Viewer Type值为Cardboard May 2015。

[1510559297993_281_1510559366287.jpg]

此时在Scene视图中看不出有什么变化，点击运行之后可以看出已经有双目效果

[1510559311788_5272_1510559380082.png]

Windows下按住Alt+移动鼠标，可以转动视角，目前还没有添加任何物体，VR中需要和视野范围内的物体进行交互，这就引出了一个问题：如何确定当前看到的是哪个物体。你也许会说是当前视野的视线聚焦的位置，事实也的确如此，如何将他标记出来呢？

为了有更好的用户体验，Google早就为我们提供了良好的呈现方式，称之为Gaze(注视、凝视)。

将Assets->GoogleVR->Prefabs->UI->GvrReticlePointer.prefab 移到Main Camera结构下。注意这里Main Camera 和GvrReticlePointer是上下层级关系，不是并列关系。

[1510559349803_1796_1510559418104.png]

添加交互物体

选中Main Camera，在Inspector中的底部选择Add Component ，添加GvrPointerPhysicsRaycaster

[1510559375048_6361_1510559443369.jpg]

这个组件可以让camera与物体进行互动，Raycaster是光线发射的意思，好比摄像头发出的光，如果照射到物体，物体就会做出反应。添加之后如图所示

[1510559407507_9605_1510559476084.png]

此时运行项目，就可以看见左右屏幕中间（不是正中间）都会有个白色的点，也就是上面提到的注视的点。移动方向和位置，项目会以第一人称的视角去观察。

[1510559432589_1750_1510559500868.png]

项目只需要实现一个最简单的例子：视线聚焦到物体的时候物体变色，视线移开时物体恢复原状。首先我们创建一个球体Sphere，在Hierarchy的空白处鼠标右键点击->3D Object->Sphere，视图中会出现一个球体，位置默认是原点坐标(0，0，0)，需要将Sphere移到camera的可见范围内，在Scene模式下可以点击camera查看摄像头的视角和范围，也可以在Game模式观察是否可以看到物体，Game模式下的所见内容就是camera的视野内容。点击Sphere可以看见Inspector中的相关属性，主要有位置、旋转角度和规模等。

[1510559457679_4493_1510559525951.jpg]

代码编写

接下来需要编写代码来实现交互效果了，在Unity中一般使用C#或JavaScript来编写，Unity默认是使用MonoDevelop编辑器，但是一般编写C#是用Visual Studio编辑器，这里我采用的就是Visual Studio来编写C#。

在Assets下创建Script文件夹，主要存放代码文件。

[1510559475044_282_1510559543324.png]

在Script文件夹中鼠标右击创建代码文件，Create->C# Script，命名为GazeToSphere，主要的代码如下所示：

using UnityEngine;
using System.Collections;

public class GazeToSphere : MonoBehaviour {

    // Use this for initialization
    void Start ()
    {
        ChangeColor(false);
    }

    // Update is called once per frame
    void Update ()
    {

    }

    public void GazeEnter()
    {
        ChangeColor(true);
    }

    public void GazeExit()
    {
        ChangeColor(false);
    }

    public void ChangeColor(bool gaze)
    {
        GetComponent<Renderer>().material.color = gazedAt ? Color.black : Color.white;
    }

}

MonoBehaviour是每个脚本的基类，Javascript脚本自动继承MonoBehaviour ，使用C#时,需要显式继承MonoBehaviour，其中Start() ，Update()等方法是可以重写的。

下面对各个方法进行解释：

• Start() 物体初始化方法，可重写。
• Update() 物体刷新的方法，可重写。频率是每帧刷新，帧数可以由fps参数得知，如果fps是60，则表示每秒刷新60次，两次update之间的时间间隔是1/60s。
• GazeEnter() 自定义的方法，表示视线进入物体。
• GazeExit() 自定义的方法，表示视线离开物体。
• isGazed() 自定义的方法，表示对当前渲染的物体进行变色处理。

Visual Studio默认不会自动保存文件，所以编写完代码之后记住要手动保存文件，否则在后面关联过程会出现问题。目前实现的功能是视线进入球体，球体变成黑色，视线离开物体，球体变成白色。

建立物体、代码、事件之间关联关系

下一步是将物体、代码、事件之间关联起来，选中Sphere，在Inspector中点击Add Component ，搜索创建的C#文件的名字GazeToSphere，添加相关部件。

[1510559543564_2412_1510559611989.jpg]

首先建立视线与物体之间的关联关系，需要添加事件系统，在Hierarchy的空白处鼠标右键点击->UI->Event System ，选中Event System 之后，在Inspector中点击Add Component 按钮，然后在输入框中搜索GvrPointertInputModule ，添加对应模块。

[1510559697371_6145_1510559765762.jpg]

接下来就要将之前写的GazeToSphere 和这个module关联在一起，再回到Sphere 上，继续添加component，搜索Event Trigger并添加。

[1510559720721_2438_1510559789018.jpg]

然后要添加触发的事件类型，点击Add New Event Type ，选择添加Pointer Enter ，表示进入事件，然后点击+ 按钮，

[1510559744146_9803_1510559812414.png]

在None(Object) 中点击右侧的小圆圈，

[1510559759988_7400_1510559828323.png]

会弹出框中选择当前的Sphere 对象，

[1510559775349_5525_1510559843628.png]

然后点击No Function 这一栏，在下拉框中选择GazeToSphere->GazeEnter ，这里需要注意之前提到的要主动保存文件，否则在这里无法索引到GazeToSphere的GazeEnter方法。

[1510559789655_3040_1510559857911.png]

上面的操作主要实现的内容就是当视线进入球体时，会触发GazeEnter方法，而GazeEnter 方法执行的就是将球体的颜色变成黑色。因此还需要添加离开事件，按照同样的方法，再添加一个Event Type ，这次选择添加Pointer Exit ，表示离开事件，关联的是GazeToSphere的GazeExit 方法，结果如图所示。

[1510559802580_4388_1510559870850.png]

在pc上测试的效果如图所示，焦点在球体外的时候，球体显示白色。

[1510559815981_7656_1510559884248.png]

当焦点进入球体时，焦点会从白点变成一个圆圈，表示Gaze状态变化，球体变成黑色。

[1510559830985_4153_1510559899247.png]

Android平台打包

将项目保存成.scene 类型文件，然后点击File->Build Settings ，选择Android平台，首次移植到Android时会显示如下图片。

[1510559845840_3085_1510559914274.png]

点击Open Download Page ，会自动下载一个UnitySetup-Android-Support-for-Editor 文件，点击安装，会提示先关闭Unity编辑器，安装完成之后再次打开Unity编辑器。目前还只是在PC端上测试，下面需要打包成可以在Android系统上运行的apk文件。这里需要配置SDK和JDK的路径，点击Edit->Preferences->External Tools ，勾选默认使用VS打开C#文件，配置SDK和JDK路径，NDK路径可以先暂时不用配置。

[1510559858594_4097_1510559926977.png]

点击File->Build Settings ，点击Add Open Scenes ，选中保存的项目，在平台中选择Android，点击底部的Player Settings

[1510559872141_1617_1510559940426.jpg]

在这些位置需要编辑包名，主要是公司名称和产品名称，注意不能有数字。

[1510559886485_1324_1510559954821.jpg]

在Resolution and Presentation 中勾选Landscape Left 或者Landscape Right，因为Cardboard 中默认手机是横向放置，所以默认选择横屏，一般习惯是Left。

[1510559901754_574_1510559970031.png]

然后点击Build And Run ，选择安装包的位置，等待手机运行即可（当然手机要通过usb连着电脑了，而且只能连一台手机，因为没有可以选择安装在哪一台手机上的过程），第一次编译过程会比较慢，之前一直是在Windows平台编译，这次转换平台，很多资源需要重新转换。接下来就把手机放在Cardboard中，感受一下VR的效果吧。