[教程]手把手教你制作高通虚拟按钮

突然发觉距离上一篇博文已经好久的了，想写，但是不知道要写一些什么。今天趁着此时还没有关电脑，记录记录高通虚拟按钮(VirtualButton)那点事。当然，还是那句话，大神勿喷，有说的不对的地方，热烈欢迎拍砖，往死里拍.....


OK～废话不多说，直接进入正题。

当然，高通的识别图是怎么制作的，我在这里不过多的阐述，我相信网上的那些文章比我说的要详细得多。好了，也就是说看我这篇文章的人，若是对AR一点都不了解的话，我劝你还是就此打住了，还是先去找找基础文章看了然后再接着我这边继续看。那，说到这里，有没有读者心里在嘀咕：你到底这次想做一个什么样的效果呐!!!!  OK，That is good

question

。我就等着你这么想，因为我个人觉得只有你这么想了你才会很认真的看我下边将要叙说的事情.....

好了，这次是真正的进入话题了，有的读者可能会想你不会是直接将高通的virtualButton例子包导入进unity然后再发布出来的吧！！！那我想说，如果说是这样，那我花这个时间来记录这个事情，意义是有但是不是很大，为什么这么说呐，因为人人都会导入，人人都会发布，说一下就好了没必要大费周章去记录,我而这次主要是站在VB的例子上手把手的交一些初学者制作一个属于自己的虚拟按钮，哈哈，有没有一种很神秘的感觉

。

那好，相信看这篇文章的人大多数都是对虚拟按钮还没有概念，那我就先说说高通的那个虚拟按钮的例子大体是一个什么样的概念。若是有接触过高通这款插件的读者可能会懂制作识别图的例子，也就是说当我们的手机或者是ipad之类的产品对着我们识别图去照的时候会出现我们事先做好的模型或者是等等之类的东西，那么高通的这个虚拟按钮例子是在识别图上有一个或者多个按钮，当我去点击或者是触摸识别图上的按钮的时候，此时就会得到一个比如说改变模型的颜色或者是说怎么样，当然，高通的例子中是改变茶壶的颜色。对，那么，当然，其实在我现在看来，那些不应该称之为按钮，因为，你想想一个图片时怎么会有按钮，对吧，顶多是一些特殊的位置罢了，当然，这么定义它也显得不够贴切还是称之为按钮吧，那么到底是一张什么样子的识别图呐，别急，慢慢来我上一张图给大家先看看


这是例子中提供的识别图，其中的Red Blue Yellow Green称之为虚拟按钮，当识别到物体出现的时候，我们去触碰着几个按钮就会发现：茶壶会变为对应的颜色，看，有没有比单纯的识别出现物体来的高级，因为，这个例子体现了人和程序进行了互动，神奇吧！！！当然，这是我个人的理解


那么，我们这次要做的就是：自己制作一个虚拟按钮，当我触碰到了虚拟按钮的时候，识别到的物体更换一种材质，手指移开材质不变，记住是材质不变，比方说，第一次手指去触碰VB，物体变为红色，手指移开物体还是红色，不变为原来的颜色，第二次触碰虚拟按钮的时候物体材质才变回到原来的材质,不知道大家能否清楚这个效果，不过，我感觉应该会明白。。。

OK，俗话说，站在巨人的肩旁上你会看的更远。写代码也是一样，叫我直接打开unity，然后什么插件都不使用，我想我估计以这样的方式研究AR的话，研究个一年半载估计连AR是怎么都还搞不明白，所以说，我们第一步是干嘛，是载一个虚拟按钮例子包下来导入进unity，下载地址是:https://developer.vuforia.com/downloads/samples


OK,到这，那么就已经实现了例子包的下载，接着导入进Unity并且打开里边自带的一个场景Vuforia-VirtualButtons如图:


那，我这里强调的一点是红线中圈出来的部分 填写key,你若不填写这个的话，你可以尝试着不加key让后发布看看结果。当然，如何加key的话，我将在单独另外一篇文章来写，不然，感觉越写越长了，没有结尾了。


OK，那么我们第一步到此就完成了，下载并导入，那感兴趣的同学可以自行发布出来并且在真机上尝试，不过，值得注意的是：第一次在真机上打开的时候，会提示未联网，然后，你连上了网络，又会提示连接不上服务器，若没有遇到这样的问题也就算了，有遇到的话，不要慌，关掉，重新开启就可以了，至少我是这样的。嘿嘿！！！那么我们的重点不在于此，所以，我就接着我的所叙述，也就来到第二步了。

第二步，既然我们是制作一个属于我们自己的虚拟按钮，那么，肯定我们得新建一个场景，并且我们得加上ARCamera,然后呐，肯定要ImageTarget,还有呢，肯定是要virtualbutton，除此之外呐，当然还要有识别物体，那我这里选择的是一个cube。想想是不是这样子，，当然，你要是再问为什么需要ARCamera为什么需要ImageTarget那我就没辙了，毕竟，我只是这款插件的使用者而不是插件的开发者，对吧！！！ 如下图:


当然，ARCamera中的key也要添加进去.

  那么，VirtualButton预制物体是在哪里放着的呐，大家可以通过Project面板中的搜索栏进行搜索，那么细心的同学跟着我的步骤做可能会发现，不对呀，我的ImageTarget属性面板中根本没有ChageMaterial这个脚本的呀，你的ChangeMaterial脚本从何而来。没错，重点也就来了也就是我们的第三步:添加脚本，并且也添加上我们所需要的材质和贴图如图:


在脚本当中添加如下的代码:

using UnityEngine;
using System.Collections.Generic;
using Vuforia;
public class changeMaterial : MonoBehaviour,
IVirtualButtonEventHandler
{

public Material[] m_TeapotMaterials1;

private GameObject m1Teapot;

private int pressNum = 0;//记录点击按钮的次数

void Start()
{
// Register with the virtual buttons TrackableBehaviour
VirtualButtonBehaviour[] vbs = GetComponentsInChildren<VirtualButtonBehaviour>();
for (int i = 0; i < vbs.Length; ++i)
{
vbs[i].RegisterEventHandler(this);
}

m1Teapot = transform.FindChild("teapot").gameObject;
}

void Update()
{
switch(pressNum)
{
case 0:
m1Teapot.GetComponent<Renderer>().material = m_TeapotMaterials1[1];
break;
case 1:
m1Teapot.GetComponent<Renderer>().material = m_TeapotMaterials1[0];
break;
}
}

/// <summary>
/// 当点击或者触碰虚拟按钮的时候，该函数会被调用
/// </summary>
public void OnButtonPressed(VirtualButtonAbstractBehaviour vb)
{
Debug.Log("OnButtonPressed::" + vb.VirtualButtonName);

pressNum++;
if (pressNum >= 2) pressNum = 0;
}

}

 然后指定m_TeapotMaterials1数组0元素为default材质,数组1元素为red材质。当然，代码也比较简单，OK，到此，我们就完成了自己制作一个虚拟按钮。

发布可以看到，因为 我的识别图没有画出虚拟按钮来，所以，大体是在人物的眼睛处，当然，你在unity中将VB放在哪里，然后识别图中的虚拟按钮就是在哪里，比如，我这个例子中大体是在图中人物的眼睛处如图:

所以，当我手指触摸到该区域的时候，可以在ipad中发现cube的材质为red材质了，手指移开还是red材质，再一次触摸的时候，cube材质变为default材质

PS:若有不懂得地方，欢迎留言。另外转载请注明出处，我们下次见.....QQ:2306798290