大家好，我是广州幻梦互动的半透明，最近由于有朋友需要学习制作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
{
/// <summary>
/// 记录要改变的汽车颜色
/// </summary>
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 {
/// <summary>
/// 汽车的材质链接
/// </summary>
public Material CarMat;
/// <summary>
/// 记录汽车当前的颜色值
/// </summary>
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
{
/// <summary>
/// 汽车控制器
/// </summary>
public CarController carController;
/// <summary>
/// 汽车颜色按钮列表
/// </summary>
public List<Button> CarColorButtons = new List<Button>();
void Start ()
{
Init();
}
/// <summary>
/// 初始化
/// </summary>
private void Init()
{
//获取列表里的按钮并指定按钮事件
foreach (Button button in CarColorButtons)
{
button.onClick.AddListener(() =>
{
//获取按钮的UICarColorButton组件
UICarColorButton colorButton = button.GetComponent<UICarColorButton>();
//设置汽车颜色
carController.ChangeCarColor(colorButton.CarColor);
});
}
//判断是否有颜色数据
if (CarColorButtons.Count > 0)
{
//设置汽车颜色为第一个按钮数据的颜色
carController.ChangeCarColor(CarColorButtons[0].GetComponent<UICarColorButton>().CarColor);
}
}
}
查看属性面板的GameController组件，在属性节点Car Controller处，将汽车物体拖动到这里，系统会自动将CarController脚本关联起来，此时我们就可以直接访问这个脚本，然后在属性节点 Car Color Buttons 的size处输入3（因为本案例只有3个颜色按钮），分别把3个按钮拖动到空的列表节点元素下进行绑定，完成效果如下图
建立游戏逻辑控制脚本
现在我们可以发布安卓包查看一下运行效果，效果如下图所示，如果没效果请检查一下是否有做对
运行效果
实现透视功能
该汽车Shader支持透明通道，我们可以利用Color的alpha值来实现透视效果，我们给CarController脚本增加一个能改变透明度的方法
/// <summary>
/// 改变透明度
/// </summary>
/// <param name="value"></param>
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
{
/// <summary>
/// 汽车控制器
/// </summary>
public CarController carController;
/// <summary>
/// 汽车颜色按钮列表
/// </summary>
public List<Button> CarColorButtons = new List<Button>();
/// <summary>
/// 控制条
/// </summary>
public Slider TransparentSlider;
void Start ()
{
Init();
}
/// <summary>
/// 初始化
/// </summary>
private void Init()
{
//获取列表里的按钮并指定按钮事件
foreach (Button button in CarColorButtons)
{
button.onClick.AddListener(() =>
{
//每次点击颜色按钮应先将透明值恢复为正常
TransparentSlider.value = 1;
//获取按钮的UICarColorButton组件
UICarColorButton colorButton = button.GetComponent<UICarColorButton>();
//设置汽车颜色
carController.ChangeCarColor(colorButton.CarColor);
});
}
//判断是否有颜色数据
if (CarColorButtons.Count > 0)
{
//设置汽车颜色为第一个按钮数据的颜色
carController.ChangeCarColor(CarColorButtons[0].GetComponent<UICarColorButton>().CarColor);
}
//滑动条事件
TransparentSlider.onValueChanged.AddListener(value =>
{
carController.ChangeTransparent(value);
});
}
}
最后我们将Slider组件拖动到GameController下进行绑定，如图
绑定Slider组件
现在我们可以发布安卓包查看一下最终运行效果，拖动滑动条，汽车也跟着透明起来了，如下图所示，如果没效果请检查一下是否有做对
最终效果
总结
此案例并不是十分复杂，主要是学习如何通过修改材质颜色和透明度达到对应效果，后期还可以加上手势控制汽车模型旋转放大，脱卡等功能完善项目。如果我有时间会继续完善功能开发。
最后放出源码包供大家使用
OSGIT下载地址
https://git.oschina.net/UnityLession/arcar.git
感谢大家看到最后，祝大家学业进步，有兴趣的同学可以加我QQ 409999619 一起多多交流。
网友评论