Vuforia Virtual Button(虚拟按钮)使用技巧

最近一直在摸索Vuforia的使用， Virtual Button算是一个比较容易吸引人眼球的功能，在经过一些测试后，我来总结下自己在探索过程中得到的一些经验。

1.如何新建一个Virtual Button工程

        导入Vuforia sdk 后把需要的预制体拖入场景中如下图

 选择好图集后新建一个脚本。如我新建了一个MyVBHandler.cs的脚本

这个脚本继承了IVirtualButtonEventHandler 这个接口 这个接口定义了

OnButtonPressed 和OnButtonReleased 两个方法。接下来最重要的

就是在Start中注册虚拟按钮事件。多的不说来看代码。

using UnityEngine;
using System.Collections;
using Vuforia;
using System;

public class MyVBHandler : MonoBehaviour, IVirtualButtonEventHandler{
    Material m1;
    public void OnButtonPressed(VirtualButtonAbstractBehaviour vb)
    {
        m1.color = Color.red;
        print("VBPressed    "+vb.VirtualButton.Area.leftTopX);
    }

    public void OnButtonReleased(VirtualButtonAbstractBehaviour vb)
    {
        m1.color = Color.white;
    }
   
    // Use this for initialization
    void Start () {
        m1 = transform.GetChild(0).GetComponent<MeshRenderer>().material;
        VirtualButtonBehaviour[] vbs = GetComponentsInChildren<VirtualButtonBehaviour>();
        for (int i = 0; i < vbs.Length; ++i)
        {
             vbs[i].RegisterEventHandler(this);//把ImageTarget下所有含有VirtualButtonBehaviour组件的物体注册过来（使用前面写的Pressed和Released方法处理）。
        }
       
    }

}

代码的主要功能是虚拟按钮按下Cube变红，松开变白。

2.确定按钮的位置和大小

这个问题可是难了好几天，先说下最值得注意的一点 按钮一定不要定义在识别图的边缘（如四个角这类的地方，我就把按钮放在四个角上造成了好多麻烦，至于到底有什么麻烦真是一言难尽啊，有兴趣的同学可以自己测试。大致可能遇到的问题就是一直触发按钮按下事件或者在虚拟按钮按下后不触发事件。还是忍不住说了出来）

下面来看下演示：

               在左上角放置一个比较大的虚拟按钮区域

             

      

        

     在几乎全部按住左上角时没有变颜色。 下面改变一下虚拟按钮的位置

    

      这次可以一根手指就可以精确的点到按钮了。

      经过测试虚拟按钮的位置应在如下图所示90%以内的范围。

         

       如何把虚拟按钮绘制到识别图上

             就像上面图中我在没有按钮提示的位置点了一下Cube变成了红色，这样看上去是很不友好的交互

             要准确的绘制按钮的位置无非就是 确定长方形按钮的   左上点和右下点   细心看完刚才程序的同学可能发现这样一行代码。

      

         print("VBPressed    "+vb.VirtualButton.Area.leftTopX);

            没错在  VirtualButtonAbstractBehaviour 这个类中有 虚拟按钮的位置相对与识别图的位置信息  Area的定义如下

 

          public abstract RectangleData Area { get; }

                    RectanguleData 定义如下：

    //
    // 摘要:
    //     This struct defines the 2D coordinates of a rectangle. The struct is internally
    //     used for setting Virtual Buttons or getting bounding boxes of letters.
    public struct RectangleData
    {
        public float leftTopX;
        public float leftTopY;
        public float rightBottomX;
        public float rightBottomY;
    }

      

       那下面我们来看下这些数据是如何产生的

      回过来看刚才这个图

    输出位置虚拟按钮左上角X坐标 为：VBPressed    -0.06303415

     大家也看到了 这个识别图是我改了一下官方例子中的图片

    它的大小为：

 识别图的坐标划分： 

    大致算一下 上面输出的 左上X 0.063     width的一半 0.247/2=0.1235       0.063/0.1235=0.51  感觉还是可以的。

    下面就要计算像素坐标了整张图是一个512*358大小的图片     （1-0.51）/2*512=125.4   //除以2是因为坐标原点在中心

    这样就知道了左上X的像素应该125左右。继续就可算出其他数值。

    图片像素坐标系如下：

   

   

    纯属个人理解如有异议请多多指教。  邮箱    3562134184@qq.com

    也欢迎正在研究Vuforia的朋友与我交流。