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左右。繼續就可算出其他數值。

    圖片像素座標系如下：

   

   

    純屬個人理解如有異議請多多指教。  郵箱    [email protected]

    也歡迎正在研究Vuforia的朋友與我交流。