Skip to main content
AR论坛
 首页 » 资源教程

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

2016年09月09日 19:04:193350

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

实例亲授:教你如何创建AR应用 资源教程 第1张

译文如下:

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

实例亲授:教你如何创建AR应用 资源教程 第2张

图:最终效果

因为我们是基于上一篇教程,所以我们会使用同样的技术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属性,所以他们的大小应该相同(只是旋转角度不同),最终你会得到类似下面的效果。

实例亲授:教你如何创建AR应用 资源教程 第3张

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

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

添加虚拟按钮

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

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

实例亲授:教你如何创建AR应用 资源教程 第4张

编写按钮脚本

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

  • 右键单击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世界显示在按钮的下面,除此之外一切正常。

关于ImageTarget更多高级的例子,我推荐阅读《在Unity中使用虚拟按钮的官方教程》。

他在如何在运行时创建和删除虚拟按钮给出更多的细节,以及如何把按钮和其他的游戏对象(game object)相连。

大家觉得怎么样?在我看来,一旦你熟悉了相关操作,使用Vuforia向增强现实(Augmented Reality)中添加虚拟按钮就变得非常简单。最终的成果也很有趣!当然你肯定知道,除了简单的显示和隐藏模型,你也可以让他们动起来,旋转,变化纹理。

评论列表暂无评论
发表评论