基于AR的体验游戏的设计与实现

基于AR的体验游戏的设计与实现

谭伽琪

沈阳师范大学管理学院，辽宁省 沈阳市 110000

摘要：本文介绍一款多元化移动增强现实应用——体验游戏的设计与实现，基于Unity引擎并借助ARFoundation、ARKit等增强现实工具进行开发，最终通过macOS平台编译工具Xcode发布运行于iOS平台。本应用采用了多模块化设计，主要划分为以下功能模块进行设计制作：AR空间涂画，AR面部表情特效，AR试戴，AR实物追踪，AR传送门。同时，综合使用Figma 、AdobeIllustrator、Cinema4D、Blender等工具进行iOS端UI界面设计、三维场景模型设计，使用Unity引擎和C#编程实现增强现实应用、界面交互和数字对象渲染，使用Xcode完成项目测试和在iOS平台的发布。

关键词：移动增强现实，虚拟交互体验，ARFoundation，ARKit

一、引言

增强现实（Augmented Reality，AR）是在虚拟现实（Virtual Reality，VR）技术的基础上发展起来的研究领域。通过在本项目设计和开发过程中的实践，更深入地了解和掌握AR技术的核心功能和应用方法，以及混合现实行业的发展趋势和技术难点，同时实现更具有创意和趣味性的增强现实体验。

本项目在设计和开发过程中的实践，旨在更深入地了解和掌握AR技术的核心功能和应用方法，以及混合现实行业的发展趋势和技术难点，同时实现更具有创意和趣味性的增强现实体验。

二、系统功能分析

基于当前的行业趋势，体验游戏的定位为一款集合了当前移动AR技术常见应用形式与一体的轻量级多元化体验应用程序，目标人群面向年轻群体和儿童，风格类型兼具娱乐性和趣味性。

用户启动体验游戏，首先进入开屏界面，点击界面下方“GoStarted”按钮进入功能菜单界面，系统会在功能菜单界面上层默认弹出一个面板，要求用户阅读使用前的注意事项。点击功能选择界面右上角“About”按钮，可以在弹窗中查看应用介绍，关闭弹窗后用户可以在界面中点击六个模块名称对应的按钮（“ARDoodle”、“ARExpression”、“ARTry-on”、“ARTracking”、“AR Portal”）分别进入相应场景进行操作。击各模块场景中，点击各界面左上角主页样式图标可返回功能选择菜单，点击界面右上角问号样式图标可在弹窗中查看当前模块功能说明。

三、系统功能设计

（一）系统总体功能设计

通过以上对体验游戏的需求与设计分析，对体验游戏项目整体操作流程做出如下设计。

系统总体设计如下图所示。

图1 体验游戏系统总体设计

（二）系统功能模块详细设计

（1）AR空间涂画功能模块设计

该模块（“AR Doodle”）将实现在真实世界中进行立体涂鸦的效果，用户按住屏幕一点或直接在屏幕上涂画并同时任意移动手机即可在真实三维空间中进行涂鸦。此外可以更改画笔颜色和笔迹材质，可以清除当前绘画内容并重新开始绘画。用户可以通过屏幕上的照相机按钮直接进行截图并保存至手机相册。

（2）AR表情特效功能模块设计

该模块（“AR Expression”）通过手机前置摄像头识别到人脸后即可将一款三维动物的头部模型附加到人脸上，并可以实时跟随脸部移动以及动态显示脸部五官表情。用户可以通过屏幕上的照相机按钮直接进行截图并保存至手机相册。

（3）AR虚拟试戴功能模块设计

该模块（“AR Try-on”）通过手机前置摄像头识别到人脸后会默认为目标人脸佩戴一副眼镜，用户可以通过屏幕下方五个按钮分别切换五款不同的眼睛进行虚拟试戴。用户可以通过屏幕上的照相机按钮直接进行截图并保存至手机相册。

（4）AR实物追踪功能模块设计

该模块（“ARTracking”）下分两个子模块，图像识别追踪和3D物体识别追踪。图像识别追踪模块中，用户扫描打印在A4上一幅画作后，可以在手机屏幕上看到在画原位“动起来了”；3D物体识别追踪模块中，用户可以在真实世界中通过手机扫描两个特定的物体，系统识别成功后会在对应物体上方显示出AR虚拟物体，此外还可以手动控制虚拟物体的显示和隐藏。

（5）AR传送门功能模块设计

该模块（“AR Portal”）中，用户可以在宽阔的真实环境中扫描水平的地面，屏幕中出现AR准星时，点击准星即可放置传送门，走进传送门可进入一个虚拟空间进行漫游，本模块制作了两个传送门虚拟世界空间，分别是一个音乐秀舞台场地和一个水下世界。

四、系统功能实现

（一）增强现实场景实现

本系统作为一款移动增强现实应用，系统包含的各功能模块的AR场景所依赖的Package均可以在PackageManager中找到，导入与项目Unity版本对应的Package版本即可。此外，在“AR表情特效功能模块中”，还需要依赖ARKitFaceTracking包。

（二）AR空间涂画功能实现

本模块需要实现的功能：点击屏幕，长按在空间中画画，画笔的位置随着手指长按的位置变化

；可以清除绘画内容，重新开始绘画；可以改变画笔的颜色、材质，使绘画的内容更加丰富多彩。实现方法：使用LineRender组件，来作为线条；在屏幕的点击位置的前方一定距离确定线段的位置；预留一个空物体，做为生成的线段的父级。这样只用销它的所有子物体即可清除所有线段；通过修改LineRender组件的材质，来改变画笔的颜色、材质。

(三）AR表情特效功能实现

实现AR面部表情特效功能的过程可概括为以下关键词：人脸检测、人脸姿态、人脸网格和BlendShapes。

使用AR Face Manager负责检测人脸，将其挂载在ARSessionOrigin上但其使用底层Provider提供的算法使用手机前置摄像头进行检测。AR Face Manager在检测到人脸时会使用人脸的姿态（位置与方向）实例化一个预制体，即Face Prefab属性，这个属性可以不设置，但如果设置后，在实例化预制体时，AR Face Manager会负责为该预制体挂载一个ARFace组件，ARFace组件包含了检测到的人脸的相关信息。

除了人脸姿态，ARFoundation还提供了每一个检测到的人脸网格，该网格可以覆盖检测到的人脸形状，此网格由底层SDK提供，包括顶点、索引、法向、纹理坐标等相关信息，ARKit人脸网格包含1220个顶点，通过操控网格上的坐标和特定区域的锚点就可以轻松的在人脸上附加一些特效。ARFoundation中，人脸网格信息由ARFace组件提供，而人脸网格的可视化则由ARFaceMeshVisualizer组件实现，该组件会根据ARFace提供的网格数据更新显示网格信息。

（四）AR虚拟试戴功能实现

将人脸模型Face.fbx和5个眼镜模型文件导入Unity，为眼镜模型创建并调节不同的材质效果并添加到模型上，如镜框、镜腿及镜片区域。设置好样式后将人脸模型和所有眼镜模型添加至场景中，首先在Face上添加AR Face组件，再将眼镜模型全部移动至人脸模型下方作为其子物体，依次调成各眼镜位置使其适合脸部位置。调整完成后将Face拖入Prefabs文件夹变为预制体，命名为FaceWithGlasses（如图2）。

图2 制作好的预制体

在场景中创建5个Button分别用来点击显示5个不同的眼睛模型，将按钮名称和眼镜模型命名一致，通过以下脚本实现人脸模型隐藏和点击按钮更换眼镜。

五、系统测试

体验游戏作为多元化多模块的移动增强现实应用，在开发过程中技术繁琐、功能分支较多，因此为保证本应用最终成果物的体验质量以及在启动后能够正常、流畅地在移动设备上运行，需要在最终发布之前对系统功能和体验进行充分的测试。本项目的具体测试工作从两方面开展，包括界面测试与功能测试。界面测试主要是检测应用内的按钮是否能够正常点击交互、UI层面是否有流畅友好的用户体验等，功能测试是检验各模块的模型和场景资源是否加载成功、AR效果是否清晰稳定等，对项目功能点进行逐一测试，包括AR空间涂画、AR表情特效、AR虚拟试戴、AR实物追踪、AR传送门，确保每一个功能点可以正确运行，用户使用中能够得到及时的反馈。为确保最终测试结果的准确性，本项目的每一个测试环节都进行了多次测试。

根据测试结果，在运行体验游戏项目时增强现实效果与界面显示方面都按照预期要求正常运行。

六、结论

本文介绍了多元化移动增强现实应用体验游戏的设计与实现过程，首先对本应用进行整体模块设计介绍，然后介绍了该项目开发过程中所使用的一些关键性技术，接着对本应用的系统需求与功能点进行分析与设计，最后介绍了本应用的具体实现过程以及系统运行的测试过程。

项目开发过程中遇到的一些问题和有待优化的功能如下：

（1）系统平面检测时可加入动态引导效果，以优化用户体验。

（2）在实物追踪模块，如加入真实环境光照估计，可为AR数字对象附加逼真的阴影效果。

参考文献

[1] 郭全中. 元宇宙的缘起、现状与未来[J]. 新闻爱好者,2022(1):26-31.

[2] 左德遥,高峰. 一种VR/AR红色文化虚拟仿真教育系统设计与实现[J]. 计算机时代,2022(2):66-68,79.

DOI:10.16644/j.cnki.cn33-1094/tp.2022.02.018.[3] 曹世峰. 基于湖北特色旅游文化的AR虚拟数字化产品设计研究[J]. 天工,2022(2):22-24.

[4] 殷志鹏,李茹馨. 基于移动端增强现实技术的用户体验设计 ——以文物展示类APP为例[J]. 卷宗,2021(6):358.

[5] 柏佳瑶,赵嘉栋,段锋,等. 一款基于增强现实技术的"再现长安城"旅游APP[J]. 电脑知识与技术,2019,15(9):194-196.

[6] 乔黎博. 融合AR的幼儿绘画教育游戏设计与实现[D]. 贵州:贵州大学,2017.

[7] 葛鑫. 从苹果给ARKit开发者22条建议中探究移动AR沉浸式UI设计[J]. 电声技术,2018,42(12):55-57.