用Vuforia创建AR游戏

[剪切下有3D GIF]

增强现实（AR）突然成为一个非常流行的术语。 借助Vuforia，开发人员可以轻松地用数字内容补充现实世界。

尽管ARKit和ARCore的发布有助于增强现实技术的普及，但已经存在其他平台和SDK。 Vuforia就是其中之一。 最近，Unity 与Vuforia达成了合作伙伴关系协议，并将该AR平台集成到Unity游戏引擎中。

在本教程中，我将使用与Unity引擎集成的Vuforia SDK创建AR游戏。 在此过程中，我将讨论以下关键组件：

• 从增强现实相机设置数据传输
• 图像跟踪-它是什么以及如何工作
• 将数字内容附加到物理对象
• 创建根据相机看到的内容触发的自定义交互

注意：有关Vuforia的本教程假定您已经了解Unity中的开发基础。 如果您不熟悉Unity，请查看出色的Unity入门教程。

Unity中AR游戏的开发

市场上有许多AR设备，但是AR应用程序的主要目标是iOS和Android等平台的移动空间。 在这里，Unity和Vuforia的组合很方便-在跨平台开发中。 另一个优点是可以在编辑器中测试该应用程序。 为此，您只需要一个摄像头！

开始之前，请下载最新版本的Unity并安装Vuforia Augmented Reality支持组件。 如果使用Unity Hub ，则可以将此组件添加到已经安装的Unity版本中。

开始工作

现在您已经有了Unity，Vuforia和网络摄像头，您需要下载一个示例项目（ 从此处 ）。

下载后，解压缩文件并在Unity中打开“ 如何使用Vuforia Starter制作AR游戏”项目。 项目加载后，从Scenes文件夹中打开Starter场景，然后查看Hierarchy窗口：


在查看了项目的组成之后，单击编辑器中的“ 播放”按钮以在我们的披萨游戏中填写订单。


太好了，我们可以玩披萨，但是我们真正的挑战是将其变成AR游戏。

注意：本教程的UI资产已从shareicon.net下载。

。

认识Vuforia厨师

为此，我们需要使虚拟比萨饼出现在我们在现实世界中拥有的跟踪器图像上。 将馅料添加到订单中后，您可以实际“提供”比萨饼，将其移出相机的视野范围之外...

但是，一切都有时间。 首先，您需要用AR Camera替换Main Camera 。 从场景中删除主摄像机 ，然后在“ 层次结构”中 单击鼠标右键 。

然后添加Vuforia-> AR Camera 。 这将弹出此窗口：


单击“ 导入”，然后等待Vuforia软件包被导入到项目中，并且将添加许多文件。


您可以忽略“ 编辑器”和“ 流资产”文件夹中的新文件。 这些只是模板； 我们需要的文件包含在项目中。

Vuforia文件夹包含我们将使用的Vuforia平台使用的所有预制件和脚本。

还值得一提的是Resources文件夹中的VuforiaConfiguration文件。 添加此文件是因为开发Vuforia应用程序需要许可证。 但是，如果愿意，您可以获取Vuforia开发人员门户的免费开发人员许可证。

注意：如果您的项目没有应用程序许可证密钥，则可以在自述文件中找到它。 将行复制到VuforiaConfiguration文件的检查器字段中。

现在我们已经有了AR相机，只需要做一件事-打开增强现实！

转到编辑->项目设置->播放器 。 向下滚动到“ XR设置”选项，并确保选中“支持Vuforia增强现实”复选框。

点击“ 播放”编辑器，向自己问好！


注意：如果单击播放，并且出现“ Vuforia初始化失败”屏幕，请尝试重新启动Unity。 这是仅在某些系统上出现的随机错误。

模式识别简介

当然，欣赏自己很棒，但是我们不是要去做比萨游戏吗？

默认情况下，Vuforia与“ 图像识别”一起使用 。 图像识别（也称为“跟踪器识别”或“图像跟踪”）是一个过程，在该过程中，相机识别出预定义的图像并知道如何处理该图像，例如在其顶部渲染一些内容。 当跟踪图像以某种方式与内容匹配时，此方法效果最佳。例如，用于建筑物渲染的平面图在建筑物的图像顶部可以很好地工作。

工作原理：选择高质量的图像进行跟踪非常重要。 使用Vuforia时，您可以将选定的图像上载到开发人员的门户以检查其跟踪质量，这必须在开始开发之前完成。 开发人员门户网站为图像分配了等级，但更重要的是，显示了其“特征点”。 为了使跟踪器更好，这些特征点（特征点）应密集分布在图像上，并且其中不应有任何重复的图案。 在运行时，相机搜索这些特征点以计算其相对于图像的位置。

对于本教程，图像和跟踪数据库已经配置。 披萨的图像位于您先前下载的Materials文件夹中。 理想情况下，将其打印出来。 或者，您可以在某些数字设备上将其打开，然后将其“显示”到相机上。 这是Vuforia Tracker数据库中图像的外观：


如您所见，特征点分布均匀。 也是披萨，很方便！

将图像目标添加到场景

是时候做魔术了！ 我们将使虚拟比萨饼出现在比萨饼的顶部。 再次使用层次结构中的创建菜单，然后选择Vuforia->图像 。

现在，我们在场景中有了一个Image Target GameObject 。 在检查器中查看此目标，您将看到几个组件。 最重要的是图像目标行为和默认可跟踪事件处理程序 。 稍后，我们将更详细地研究第二个，但是现在，请确保“ 图像目标行为”下拉列表的选项配置如下：

• 数据库设置为RW_ItsaPizza
  
• 图像目标设置为PizzaClipArt

还记得之前添加到我要求忽略的项目中的文件吗？ 找到了！ Vuforia正在添加几个Image Target示例数据库，以便我们可以开始开发并将其用作示例，例如我们正在使用的已添加到材料中的示例数据库。

注意： Pizza跟踪器是数据库中唯一的图像目标。 但是，一个数据库中可以有数百个图像。 此外，一个应用程序中可以有多个数据库。

既然我们已经在场景中配置了AR摄像机和图像跟踪器 ，我们就拥有了增强现实工作所需的一切！ 在编辑器中，单击“ 播放”按钮，然后将打印的图像放置在相机前面。


我们有披萨！

将游戏对象作为子对象附加到跟踪器

披萨很小，但是牢牢地固定在跟踪器图像上。 您还可以注意到，如果删除了跟踪的图像，则比萨饼将一直悬在空中。

事实是，虽然网络摄像头可以看到图像跟踪器 ，但Vuforia能够更新AR摄像机在场景中的位置。 如果您希望实际操作，请配置Unity编辑器，以便同时显示“ 游戏”和“ 场景”窗口，然后选择“ AR摄像机”并单击“播放”。


相机工作时如何使披萨正常工作？ 在层次结构中选择ImageTarget 。 您将看到它在每个轴上的比例为10 。 这由“ 图像目标行为”组件控制。 在高级部分，您可以看到Width参数的值为10 。 它是在将图像上传到Vuforia Developer网站时设置的。

提示：您不明白为什么在本教程中将Image Target设置为宽度10？ 如果尺寸对于应用而言不是重要因素，则将其设置为10可以为相机提供增加的跟踪可能性，同时在AR相机的近平面和远平面之间保持内容的良好位置。 但是，有时增强现实必须具有一定的规模。 在这种情况下，您需要设置图像跟踪器的大小，以使其与上传到开发人员门户时的物理尺寸匹配。

现在，在“ 层次结构 ”中选择GameObject Pizza 。 将其拖到ImageTarget使其成为子对象。 比例将变为(X: 0.1, Y: 0.1, Z: 0.1) 。 将其返回到值(X: 1, Y: 1, Z: 1) ，然后将位置沿Y轴最多移动0.01 。 因此， Pizza将符合ImageTarget的要求 。


再次按Play（播放） ，您将看到披萨在图像的顶部，并且当图像从框架中消失时也消失了。

探索DefaultTrackableEventHandler

此行为来自ImageTarget的DefaultTrackableEventHandler 。 打开脚本并查看它。

该脚本的注释很好，但是值得注意以下方面：

• Start函数将此脚本注册为TrackableBehaviour的事件处理程序 （在本例中为ImageTargetBehaviour ）。
• OnDestroy删除此链接。
• OnTrackableStateChanged是最重要的功能。 她的代码说明了跟踪状态更改时应发生的情况。
• 从OnTrackableStateChanged调用OnTrackingFound和OnTrackingLost 。 在DefaultTrackableEventHandler中，它们切换任何子级的Renderer ， Collider和Canvas组件。

当相机检测到图像时，它不再只是移动AR相机 ；而是 她还命令GameObject Pizza打开其所有Renderer组件，当图像从相机中消失后，他再次命令将其关闭。


现在摘要此信息。

创建自己的跟踪动作

现在该对这些信息做些事情了！

从ImageTarget移除DefaultTrackableEventHandler组件。 然后添加PizzaTrackableEventHandler ，可以在Scripts文件夹中找到它。 然后打开PizzaTrackableEventHandler 。 这是DefaultTrackableEventHandler的副本，但是OnTrackingFound和OnTrackingLost中的代码已删除- 您必须解决此问题！

在几乎每个AR应用程序中，启用和禁用Renderer组件都很方便，因此让我们找回该代码。 如果遇到问题，可以从DefaultTrackableEventHandler复制它，也可以在下面的扰流板下找到它。


我们准备将这个项目变成增强现实中的游戏！

查看用户界面，找到播放器需要按下以完成其披萨的按钮。


如您所见，当按下按钮时， GameManager.CompleteOrder()调用Event GameManager.CompleteOrder() 。 您可以确保他“下达”比萨饼来完成订单（而不是强迫玩家按下按钮）（他将跟踪器移出了摄像机的视野）。

在PizzaTrackableEventHandler的开始处，添加一个UnityEvent以在Image失去跟踪时调用。

 using Vuforia; using UnityEngine; using UnityEngine.Events; public class PizzaTrackableEventHandler : MonoBehaviour, ITrackableEventHandler { public UnityEvent OnTrackingLostEvent; ... 

现在，让我们在OnTrackingLost方法中调用事件：

 protected virtual void OnTrackingLost() { var rendererComponents = GetComponentsInChildren<Renderer>(true); // Enable rendering: foreach (var component in rendererComponents) { component.enabled = false; } //Trigger our event OnTrackingLostEvent.Invoke(); } 

这使PizzaTrackableEventHandler更加灵活，因为现在我们可以设置丢失跟踪时任何动作的执行。 保存PizzaTrackableEventHandler ，返回到Unity Editor并等待编译完成。 当它结束时，当跟踪披萨跟踪器丢失时， GameManager.CompleteOrder()调用GameManager.CompleteOrder() 。 最后，在用户界面中禁用或删除CompleteOrderButton 。


保存场景，单击“ 播放并提供比萨饼”！

接下来要去哪里

恭喜，您已完成本教程！

可以从此处下载示例项目。

有关在Unity中使用Vuforia开发的更多信息，请参见Vuforia开发人员库或Unity教程 。

不要忘记在Vuforia门户上为自己设置一个开发人员帐户。 您也可以尝试在此处上传几个不同的跟踪器，以检查其跟踪方式。

有关更多详细信息，请阅读有关虚拟按钮的信息 。 Vuforia网站上有示例材料。 检查您是否可以创建这些虚拟按钮来替换比萨游戏中的UI。

提出增强现实游戏的新想法。 也许这是纸牌格斗游戏，其中的生物直接从纸牌上跳下来？ 塔防怎么样，您在哪里使用手机控制战斗直升机？