Vuforia实践开发案例之AR汽车

---

大家好，我是广州幻梦互动的半透明，最近由于有朋友需要学习制作AR项目，在此我分享一下一些有用的制作经验，写得不好还请轻轻地喷。

原创文章，请勿转载。感谢！！

---

本案例适合人群

必须会Unity3D引擎基础，对C#脚本编程有一定经验

---

目的

1 学习Vuforia的一些基本只是和操作
2 学习如何改变材质的颜色和透明度

---

开发平台

unity5.6.0f3

---

使用插件

本案列使用前还必须导入以下这些插件
CarPaintShadersAsset
一款汽车材质插件，里面含有汽车模型和汽车Shader
Vuforia
使用vuforia-unity-6-2-10版本，稳定性十分高，但是不免费，免费版本有水印

---

项目最终效果

项目最终效果

---

创建新应用

如果你是第一次创建AR项目，可以先到Vuforia官网注册账号后，点击Develop进入开发者中心，创建一个新应用，应用名为ARCar，如下图

创建新应用

创建识别图

然后点击TargetManager创建一个新的识别图,图片你可以选择一张适合的汽车图片，当你上传完成后，如下图

创建识别图

在识别图面板这里，有个Rating属性，当出现5个星星的时候，就证明这张图片能被识别的程度越高，反之星星数越低的图片，识别程度也越低，大家上传的时候注意一下。关于如何制作识别图可以参考这篇文章。
最后我们点击Download Database(All)按钮下载Unity Editor包保存为ARCar.unitypacakge.

下载Unity Editor包

---

项目制作

打开Unity引擎并创建一个新项目，命名为ARCar，先在playersetting把项目切换为安卓平台，然后将vuforia-unity-6-2-10.unitypackage、ARCar.unitypacakge、Car Paint Shaders Asset.unitypackage 导入到项目里，经过一轮认真的导入后，如下图：

项目图

导入完成后，我们在Project面板处右键建立项目的文件夹，命名为ARCar，再ARCar下面再新建Scenes，Scripts文件夹，这样目的是可以方便管理，不会和其他插件文件搞到一起而找不到位置，项目文件夹如下图

Paste_Image.png

场景制作

在Scenes文件夹右键，新建一个Scene命名为ARCarScene，双击进入该场景，将里面的默认MainCamera和Directional Light物体删掉，打开Vuforia文件夹，在Prefabs文件夹里我们可以看到里面有一个ARCamera组件和ImageTarget组件，分别将两个组件拖到场景里面，如下图

场景制作

点击ARCamera物体，我们在属性面板处可以看到一个open vufoira configuration 的按钮，点击后我们会看到一个vuforia的配置表，在App License Key处填入我们注册App的时候那串License Key ，如下图

填写License Key

然后我们在配置表里找到Data Set 这个选项，开启我们ARCar的数据集，这一步非常重要，很多新手都会忘记开启数据集，导致扫描后不会出现任何物体，开启效果如图

开启Data Set

好了，最后一步我们选中场景中的ImageTarget物体，然后看属性面板，将DataSet选择我们自己的数据集后，配置就完成了，如下图

设置ImageTarget数据

设置汽车模型

在CarPaintShadersAsset文件夹里，找到Prefabs文件夹，再找到Modle文件夹，将里面的Car组件拖到ImageTarget节点下，将Car调整到合适的大小，本项目设置Scale为 (0.0015, 0.0015, 0.0015)，如下图

设置汽车模型

由于我们直接用了插件，Car组件有一些脚本，请大家手动删除吧，当然也可以不删。然后选中车身，目前的Shader是不支持透明材质的，我们选中它这个材质后，选择Beffio/Car Paint Transparent材质并更换，这个材质支持改变颜色和透明值， 更改后如下图

设置汽车材质

为了方便管理，我们可以将这个汽车材质拖动到我们项目下的Materials文件夹内并命名为CarBodyMat

CarBodyMat

到这里我们可以发布一个安卓包出来查看一下效果，我这里用PC来发布一下截图吧，恩好的，看起来是挺高大尚的一架汽车

AR汽车效果

实现AR换颜色功能

换颜色一般是通过控制shader里面的属性来控制，我们可以选中CarBodyMat材质看看它的一些Editor属性面板

Paste_Image.png

在这里由于只用到改变颜色，其他的属性节点就不讲述功能了，我们可以看到有个叫Base Color的属性，通过改变这个属性的颜色值，发现车子的颜色也是可以改变的，那么我们应该怎样通过UI来控制这个属性改变呢？

首先我们需要通过UI来控制颜色改变，在Hierarchy面板右键新建一个UI Button组件，并命名为RedButton，文本输入红色，红色按钮背景颜色值为 RGB = 197,33,33，之后改变汽车的颜色也是用这个颜色值，放在按钮里用于提示用户将要改变的颜色，调整后如下图

建立红色按钮

按照上面的方法，我们可以做多几种颜色变化，绿色RGB = 11,221,100 ,橙色RGB =255,121,0 。当然你可以增加更多的颜色，这个看项目需要来弄，调整后效果如下图

创建颜色按钮

然后我们点击上层的Canvas物体，在属性面板里修改一下Canvas Scaler的值，这个Resoulution的值可以设计为自己的设计稿的大小，因为是横屏设计，那最好Match方式用高度比来控制，如下图

Canvas Scaler

脚本编写

建立按钮数据脚本
新建一个脚本，命名为UICarColorButton.cs, 双击打开复制以下代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UICarColorButton : MonoBehaviour
{
    /// 

    /// 记录要改变的汽车颜色
    /// 
    public Color CarColor = Color.white;
}

此时我们可以将脚本拖动到按钮处，然后我们看属性面板会发现Car Color的属性值出现在编辑器里，调整好颜色值为 RGB = 197,33,33，如图

UICarColorButton

一个简单的按钮组件就完成了，接着按照上面的方法将脚本再拖动给其他的颜色按钮即可。

建立汽车控制脚本
在我们项目的Scripts文件夹里右键新建一个CarController.cs脚本，拖动到我们的汽车物体上，双击输入以下代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CarController : MonoBehaviour {

    /// 

    /// 汽车的材质链接
    /// 
    public Material CarMat;

    /// 

    /// 记录汽车当前的颜色值
    /// 
    private Color _carColor;

    public void ChangeCarColor(Color color)
    {
        _carColor = color;
        CarMat.SetColor("_BaseColor", _carColor);
    }
}

接着我们将CarBodyMat材质拖动到GameController的CarMat节点处，如下图：

建立汽车控制脚本

建立游戏逻辑控制脚本
接着在场景中新建一个GameObject，命名为GameController，再在我们项目的Scripts文件夹里右键新建一个GameController.cs脚本，拖到GameController物体上，这个脚本的作用是控制整个游戏逻辑，双击GameController.cs脚本输入以下代码，代码作用请看代码注释。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //如果我们要用unity的UI包,记得引入这个命名空间

public class GameController : MonoBehaviour
{
    /// 

    /// 汽车控制器
    /// 
    public CarController carController;

    /// 

    /// 汽车颜色按钮列表
    /// 
    public List CarColorButtons = new List();

    void Start ()
    {
        Init();
    }

    /// 

    /// 初始化
    /// 
    private void Init()
    {
        //获取列表里的按钮并指定按钮事件
        foreach (Button button in CarColorButtons)
        {
            button.onClick.AddListener(() =>
            {
                //获取按钮的UICarColorButton组件
                UICarColorButton colorButton = button.GetComponent();
                //设置汽车颜色
                carController.ChangeCarColor(colorButton.CarColor);
            });
        }

        //判断是否有颜色数据
        if (CarColorButtons.Count > 0) 
        {
            //设置汽车颜色为第一个按钮数据的颜色
            carController.ChangeCarColor(CarColorButtons[0].GetComponent().CarColor);
        }
    }
}

查看属性面板的GameController组件，在属性节点Car Controller处，将汽车物体拖动到这里，系统会自动将CarController脚本关联起来，此时我们就可以直接访问这个脚本，然后在属性节点 Car Color Buttons 的size处输入3（因为本案例只有3个颜色按钮），分别把3个按钮拖动到空的列表节点元素下进行绑定，完成效果如下图

建立游戏逻辑控制脚本

现在我们可以发布安卓包查看一下运行效果，效果如下图所示，如果没效果请检查一下是否有做对

运行效果

实现透视功能

该汽车Shader支持透明通道，我们可以利用Color的alpha值来实现透视效果，我们给CarController脚本增加一个能改变透明度的方法

    /// 

    /// 改变透明度
    /// 
    /// 
    public void ChangeTransparent(float value)
    {
        //通过材质颜色的alpha属性
        _carColor.a = value;
        CarMat.SetColor("_BaseColor", _carColor);
    }

然后在Canvas物体右键新建一个UI Slider 滑动条组件，设置好组件的大小和位置，效果如下图

创建滑动条

双击GameController脚本修改脚本如下(没法在code下编辑文字格式，按照新增的代码对照一下)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //如果我们要用unity的UI包,记得引入这个命名空间

public class GameController : MonoBehaviour
{
    /// 

    /// 汽车控制器
    /// 
    public CarController carController;

    /// 

    /// 汽车颜色按钮列表
    /// 
    public List CarColorButtons = new List();

    /// 

    /// 控制条
    /// 
    public Slider TransparentSlider;

    void Start ()
    {
        Init();
    }

    /// 

    /// 初始化
    /// 
    private void Init()
    {
        //获取列表里的按钮并指定按钮事件
        foreach (Button button in CarColorButtons)
        {
            button.onClick.AddListener(() =>
            {
                //每次点击颜色按钮应先将透明值恢复为正常
                TransparentSlider.value = 1;
                //获取按钮的UICarColorButton组件
                UICarColorButton colorButton = button.GetComponent();
                //设置汽车颜色
                carController.ChangeCarColor(colorButton.CarColor);
            });
        }

        //判断是否有颜色数据
        if (CarColorButtons.Count > 0) 
        {
            //设置汽车颜色为第一个按钮数据的颜色
            carController.ChangeCarColor(CarColorButtons[0].GetComponent().CarColor);
        }
        
        //滑动条事件
        TransparentSlider.onValueChanged.AddListener(value =>
        {
            carController.ChangeTransparent(value);
        });

    }
}

最后我们将Slider组件拖动到GameController下进行绑定，如图

绑定Slider组件

现在我们可以发布安卓包查看一下最终运行效果，拖动滑动条，汽车也跟着透明起来了，如下图所示，如果没效果请检查一下是否有做对

最终效果

---

总结

此案例并不是十分复杂，主要是学习如何通过修改材质颜色和透明度达到对应效果，后期还可以加上手势控制汽车模型旋转放大，脱卡等功能完善项目。如果我有时间会继续完善功能开发。

最后放出源码包供大家使用
OSGIT下载地址
https://git.oschina.net/UnityLession/arcar.git

感谢大家看到最后，祝大家学业进步，有兴趣的同学可以加我QQ 409999619 一起多多交流。

---