实例亲授：教你如何创建AR应用

我们曾经介绍过许多AR应用中的最新典型案例和教育类应用，他们利用Vuforia与现实进行交互，创造出更加新奇的体验。本文作者是一位刚刚接触AR开发的年轻开发者，他将教你如何在现实世界和虚拟世界中加入虚拟按钮，形成交互。

译文如下：

在这个教程中，我们会再我的前一篇关于虚拟现实（augmented）的教程基础上再增加一些很酷的玩意。对我来说：增强现实（AR）本身已经非常棒了，但是这次，我们会在现实世界和虚拟世界中加更多的交互。我们通过添加虚拟按钮来实现这个功能，也就是说只需要简单的在AR世界中添加一个按钮，我们就能在真实世界中点击他。这真真是酷毙了！

图：最终效果

因为我们是基于上一篇教程，所以我们会使用同样的技术Vuforia。这个技术让我们能够简单的达到这个效果。我们这就开始吧！

这里有一段小视频演示（youtube视频）我们通过这片教程可以创造的效果。不得不说：这简直太酷了。虽然我必须承认，并不是所有的情况下都能像这样工作良好，不过对于简单的按钮，看起来工作的不错。让我们来看看怎样创建一个像这样的程序。

准备工作

为了能让你的应用程序像这样工作，你需要具备下面几项条件：

• 任意一个可以运行的AR应用程序，比如示例程序
• C#的基本支持，这个是Unity使用的语言，我们将用他来实现我们的虚拟按钮
• 另一个用于render（呈现）的3D模型，这样我们才能在几个不同的模型间切换，我会使用铁拳游戏中的几个模型。

当你一切准备就绪，就让我们进行接下来的步骤。

导入模型

就像前一个教程讲的那样，你可以这样导入你的模型：

• 右键单击Project（项目Tab页）中的Assets文件夹
• 选择“Reveal in Finder”(在Window上也有可能是“Reveal in Explorer”）
• 打开Assets文件夹
• 创建一个名叫Models新的文件夹（或者可以取别的合乎逻辑的名字）
• 把模型（包括所有的纹理（Texture）等等）放入到这个文件夹中
• 返回Unity

Unity会检测到你对Assets文件夹所做的改动，并会使用最新的信息更新自己的显示。现在把你的模型拖入到增强显示场景中，放在前一个模型的上面。确保他在层次结构（Hierarchy）中被的放置在正确的ImageTarget下面。我也拷贝了上一个模型一样的Transform属性，所以他们的大小应该相同（只是旋转角度不同），最终你会得到类似下面的效果。

现在看起来稍微有点怪，不用担心，使用我们的虚拟按钮，我们能够确保显示和隐藏正确的模型，让他们互相不会重叠。

现在花时间看一眼model的名称，待会可能会用到他们。在分级窗口（Hierarchy）里可以找到他们，在我的项目里他们分别是：jin1u和yosi1u

添加虚拟按钮

现在我们需要在场景中加入虚拟按钮，在你的Project窗口中，打开Assets/Qualcomm Augmented Reality/Prefabs-folder.这里面能看到VirtualButton;把他拖动到你的场景中，在Hierarchy（分级窗口）里位于你的ImageTarget之下。本质上讲，当我们查看ImageTarget的时候，虚拟按钮不能被看到，也就是处于不可见（invisible）状态。在Unity中透明物体的默认颜色是蓝色，所以当你在场景中添加虚拟按钮时，也应该同样是蓝色的。

虚拟按钮的形状默认是矩形的，你可以将他变形（Transform）到你的点击区需要的样子和位置。只用确定按钮区域足够覆盖ImageTarget上的一些特征区域；如果探测到这些特征区域被挡住，Vuforia就会认为按钮被点击。下面是我的代码效果。

编写按钮脚本

按钮现在还什么也不能做，我们需要为他添加响应代码。这就需要为他创建一段脚本：

• 右键单击Project中Assets文件夹
• 选择“Reveal in Finder”(在Windows中也可能是“Reveal in Explore”）
• 打开Assets文件夹
• 创建一个叫做script的文件夹（或者其他合理的名字）

在文件夹中，创建一个新的空文件，叫做TekkenVirtualButtonEventHandler.cs（或者其他什么你觉得合适的名称），代码的框架如下：

using UnityEngine;

public class TekkenVirtualButtonEventHandler : MonoBehaviour, IVirtualButtonEventHandler
{
    /// <summary>
    /// Called when the scene is loaded
    /// </summary>
    void Start() { }
 
    /// <summary>
    /// Called when the virtual button has just been pressed:
    /// </summary>
    public void OnButtonPressed(VirtualButtonAbstractBehaviour vb) { }
 
    /// <summary>
    /// Called when the virtual button has just been released:
    /// </summary>
    public void OnButtonReleased(VirtualButtonAbstractBehaviour vb) { }
}

该类中最重要的就是IVirtualButtonEventHandler接口，这个接口保证类实现OnButtonPressed 和 OnButtonReleased两个方法。在这个教程里，我们不会实现OnButtonRelease方法，因为我们暂时用不到他，不过因为接口的原因，类里面必须要有这个方法。这个脚本待会就回附加到ImageTarget上。

首先，我们需要把Button注册为一个活动事件，我们会把下面的代码放到Start方法里（代码里加了注释）

// Search for all Children from this ImageTarget with type VirtualButtonBehaviour
VirtualButtonBehaviour[] vbs = GetComponentsInChildren<VirtualButtonBehaviour>();
for (int i = 0; i < vbs.Length; ++i) {
    // Register with the virtual buttons TrackableBehaviour
    vbs[i].RegisterEventHandler(this);
}

接下来要做的，就是在场景中找到和存储模型（代码中的GameObject）。第一步我们要为类创建两个私有字段

private GameObject _modelJin;
private GameObject _modelYoshimitsu;

接着在Start方法里对这两个变量进行赋值，在Unity中你可以用Hieraychy下Model的名字来找到gameObject；

_modelJin = transform.FindChild("jin1u").gameObject;
_modelYoshimitsu = transform.FindChild("yosi1u").gameObject;

在程序开始的时候，我们希望Jin不显示，所以要先把他藏起来。这就是开始方法的最后一行需要做的事情:

_modelJin.SetActive(false);

现在我们开始搞定OnButtonPressed方法！可以看出这个方法的第一个也是唯一一个参数就是被点击的按钮。利用这个参数，可以显示和隐藏模型，这里我们要用到开始设定的按钮名称，实现如下

switch(vb.VirtualButtonName) {
    case "btnYoshimitsu":
        _modelJin.SetActive(false);
        _modelYoshimitsu.SetActive(true);
            break;
    case "btnJin":
        _modelJin.SetActive(true);
        _modelYoshimitsu.SetActive(false);
            break;
    default:
        throw new UnityException("Button not supported: " + vb.VirtualButtonName);
            break;
}

也许你想整理一下我的代码，没有关系，我只希望你能理解我的思路。记得保存你的代码。这个类的完整实现可以在这里找到。

附加脚本到ImageTarget

现在回到Unity，程序会自动找到你创建的script文件夹以及你创建的TekkenVirtualButtonEventHandler 。只需把脚本拖拽到Hierarchy里的ImageTarget上方，关联就会自动建立，你能通过选择Inspector中的ImageTarget来验证关联是否正确；如果关联正确建立，就能够看到按钮事件处理器被附加在了按钮上。

这个方法太有用了吧！现在编译你的解决方案，并在你的移动设备上运行（如何运行参考我的上一篇教程）。现在你应该准备好了吧，祝你好运！

小结

截止目前为止，我们已经为虚拟按钮准备好了可以工作的点击区，由于他们不可见，你也许想要加入下面的东西：

• 把你的ImageTarget换成已打印按钮（这样就能在真实世界里看见他）或者
• 在VirtualButton上添加多个Pane（这样就能在增强现实世界里看到他）

我使用第二个方法，所以我不需要再次打印ImageTarget，但是这样做不好的一面是，你的手在AR世界显示在按钮的下面，除此之外一切正常。

转载原文地址：http://www.kuqin.com/shuoit/20140910/342057.html

英文原文地址：http://www.marcofolio.net/other/virtual_buttons_in_augmented_reality_with_vuforia.html