基于Unity的《AR十二生肖》的设计与实现

彭伟国 李鹏翔

摘要：为帮助幼儿从触觉、视觉和听觉多维度学习十二生肖知识，开发一款面向幼儿教育的《AR十二生肖》应用程序。经过项目策划、生肖模型制作、AR识别图制作、AR识图交互设计与实现等环节，开发的这款AR应用，幼儿可通过扫描识别图，在真实空间中通过程序界面中的程序设置、重新识别、生肖声音、生肖动画、屏幕截取等按钮，以虚实结合的形式，学习十二生肖的图文、声音、动画等科普知识。

关键词：增强现实;十二生肖;科普应用;AR识图;Vuforia引擎

中图分类号：TP37      文献标识码：A

文章编号：1009-3044（2021）02-0179-03

1 背景

中国传统文化有十二生肖，关于十二生肖百科知识，许多人从幼儿时期都开始接触和了解，这种了解多是不完整的。在幼儿教育中，十二生肖教育多是從书本、视频、动画中学习，有些生肖动物小孩子因没有接触真实动物而没有直观印象，学生学习存在被动学习且缺乏参与性交互性。

《AR十二生肖》结合AR技术突破固有的教育形式，充分将十二生肖的形态，以虚实结合的形式出现在小孩的视觉里，从而使小孩子能够更直观地了解和接触十二生肖的模型、声音以及相关传统文化知识。《AR十二生肖》融入了游戏元素。将AR技术以适宜教学内容的方式应用到游戏环节，通过扩增虚拟信息到现实世界中，拓展了游戏的活动形式[1]。

2 项目策划

项目属于AR科普类应用。AR这种增强现实技术，学习者可以自然地与3D信息、对象和事件进行交互。除了2D和3D对象之外，数字资产，例如音频和视频文件、文本信息、嗅觉或触觉信息等也可以并入用户对现实世界的感知中[2]。因此，《AR十二生肖》应用程序可以全方位调动学生的视觉、听觉、触觉等感知系统，可更好的学习生肖知识，尤其是在触觉感知方面，相比其他生肖程序有独特的交互体验。

用户群体主要为儿童。学龄前儿童认识事物更多靠感觉、知觉和表象[3]，儿童对视觉艺术作品的审美偏爱具有以下特点：儿童喜欢表现动物的美术作品;儿童喜欢夸张和拟人风格的美术作品;儿童喜欢色彩鲜艳和丰富的美术作品[4]，所以项目模型设计为偏卡通风格的动物模型，更符合小孩子的认知特点。

用户打开项目后，初始化界面有AR识图按钮、生肖查询按钮、新手帮助按钮、退出按钮。点击AR识图按钮，程序跳转进入识图主页面，通过设备相机扫描生肖识别图，识图成功后，在识别图周围真实世界中生成生肖模型，显示生肖介绍文字，用户可通过在设备上放大缩小旋转操作观看生肖模型，点击生肖叫声按钮还可以播放扫描对应生肖模型的叫声，点击生肖动画按钮，生肖模型会播放动画片段。用户通过设置按钮可以调整声音大小，通过截屏按钮截屏当前内容，用户也可以和生肖模型合影。用户还可以查询对应年份的生肖属性。

3 项目实现技术

《AR十二生肖》项目使用Unity引擎开发，采用C#语言进行脚本编写，通过Json文件和Text文本完成程序的数据存储。首先使用PhotoShop软件制作UI按钮和图标;其次运用Unity自带的UI组件实现UI界面布局;然后使用Maya将调整好的生肖模型以FBX格式导入Unity中，完成模型和UI界面的交互;最后，通过添加Vuforia引擎以此来实现图片的识别和场景的设置，然后插入所需要的生肖声音素材等文件进行完善。

AR项目实现必须制作AR识别图。AR识别图制作需要Vuforia引擎，以下是用来生成识别图的Unity包制作过程。

1）首先在https：//developer.vuforia.com/注册账号。

2）注册登录进入Develop页面，找到Target Manager链接，展开后点击Add Database创建Database文件，输入命名后选择Device完成创建。

3）进入Database目录，点击已经命名的Database文件，然后点击Add Target按钮添加Target图片，选择默认Type图片类型，上传准备好的识别图素材，然后设置图片宽度，再给识别图进行命名，完成设置后点击Add按钮完成Target图片添加。

4）等待网页加载完毕，识别图生成完毕，选择生成的识别图，并将其导入Unity。

5） 在Vuforia网站中打开Downloads链接，选择SDK栏目下的Unity选项，下载高通开发包，下载完成后导入Unity软件中。

6）在Vuforia网站中打开Develop链接，通过License Manager创建License Key（许可证密匙）项目，然后命名许可密钥，按照后续提示完成授权码管理，回到Develop页面授权码状态。

7）在Unity删除Main Camera，搜索AR Camera，将其拖曳到Hierarchy下面，在Hierarchy层级面板中增加ImageTarget组件，修改ImageTarget参数信息，将Data Set修改成需要的识别图的Unity包。

8）修改AR Camera参数信息，将需要的数据进行勾选，并将之前的授权码输入。

9）将与识别图对应的模型拖入到ImageTarget下面，完成AR制作。

高通Vuforia主要通过图片上注册的识别点来进行识别，所以图片识别程度与图片颜色没有关系。识别效果取决于图片的复杂程度，图片越复杂识别点越多就越容易识别。可以通过在Vuforia网页点击上传完成的图片，能够查看识别点的多少以及评分，图片内黄色小叉就是识别点，选择图片时右边的评分就是能够识别的程度，四星五星多数都可以立刻识别，如果图片评分过低无法识别，可以通过重新截取上传尝试或者添加文字图案等增加识别点。

《AR十二生肖》共需要十二个Unity识别包，将制作好的十二个模型和生肖图片分别按照AR识别图制作步骤依次完成，Unity识别包制作完成后，搭建项目UI交互框架，编写C#脚本，从而实现虚实结合的增强现实效果。

4 项目详细设计

经由项目策划，本项目需要实现程序初始化、AR识图（程序设置、重新识别、生肖声音、生肖动画、屏幕截取等子功能）、新手帮助、生肖查询、数据存储等功能。在此，以AR识图这一核心功能的设计与实现为例，介绍项目的开发过程。

AR识图功能是程序调用相机后通过AR识别图立体呈现出三维虚拟生肖模型，也是该项目中最重要的一个功能。首先在这个界面需要设备端允许相机的调用，通过相机来扫描AR识别图。AR识图功能正常运行需要Vuforia引擎环境的支撑。

类图是描述类、接口以及他们之间关系的图，是一种静态模型，显示了系统中各个类的静态结构，类图根据系统中的类以及各个类的关系描述系统的静态视图，可以用某种面向对象的语言实现类图中的类[5]。关于AR识图类的设计首先创建UIManager类实现对该界面的控制，将AR识图功能界面调用的脚本名称也命名为UIManager。首先在脚本中添加Start （）函数、Update（）函数、hudongButtonClick（）函数、ResLoadSceneButtonClick（）函数、PlayMusicButtoClick（）函数、SetUpPanelButtonCilck（）函数等实现主要互动功能，ResLoadSceneButtonClick（）函数通过代码调用识别模型图片进行重新识别， ResLoadSceneButtonClick（）函数通过代码调用识别模型图片进行重新识别，以上函数主要实现了AR识图功能与模型互动的菜单按钮的具体功能调用。

然后通过添加MenuPanelUpdateUIButtonClick（）函数、Show UITextNUll（）函数、OpenStartSceneButtinCLick（）函数、TextUIShowZO（）等函数来实现部分界面UI显示和文字显示功能，通过函数共同编译实现AR识图功能的设计。AR识图类图如下图1所示。

AR识图功能的活动流程为：用户允许程序调用相机后，通过点击AR识图按钮进入AR识图界面，扫描识别图片后，出现生肖模型和生肖介绍，然后通过点击隐藏设置按钮展开互动界面。分别通过程序设置、重新识别、生肖声音、生肖动画、屏幕截取、隐藏按钮、生肖介绍等子功能按钮实现对生肖模型的互动和操作体验。

1）程序设置功能设计

这一子功能主要是对程序声音大小的调节和返回程序初始化界面，用户在该界面调节音量进度条按钮实现声音大小的控制。用户可以通过返回按钮返回程序初始化界面。

2）重新识别功能设计

重新识别就是用户进入程序以后进入AR识图界面打开隐藏界面点击重新识别按钮实现的交互，当点击重新识别按钮后程序调用相机识别，重新对图片进行扫描，方便与在交互中的操作和图片更换时的识别。程序设计时，通过设置按钮以及代码进行调用实现。

3）生肖声音功能设计

在项目准备阶段对十二生肖不同的叫声进行信息收集整理，经过处理后导入Unity建立单独文件夹进行存放处理，生肖声音是用户通过AR识图后出现生肖模型，然后点击隐藏界面的生肖声音按钮，程序播放与扫描AR生肖模型对应的动物叫声。

4）生肖动画功能设计

生肖动画主要是用户与AR扫描生肖模型的交互，将之前做好的简单模型动画从模型中通过FBX格式保存后，在Unity打开后进行调试，处理以后保存在项目中，通过代码实现调用。用户扫描识别出现AR生肖模型后，可以点击生肖动画播放按钮，AR生肖模型会出现对应动画和用户交互，有利于孩子们对生肖模型内容的记忆加深。

5）屏幕截取功能设计

屏幕截取主要通过编写脚本实现对用户使用程序交互时调用的界面内容进行实时截取，用户可以通过这个功能实现和模型合影拍照以及保存需求场景方便用户留念查看内容。

6）生肖介绍功能设计

在一个程序的实现中，关于对应文本的存储起着至关重要的作用，文本的存储关乎程序运行的文字资源等是否正常显示，正常使用。这个程序主要通过运用Json、Text文件等实现程序的文字读取和存储。

AR识图功能的按钮文字都是通过Text文件进行存储，极大地帮助了用户直观了解程序，减小程序储存占用空间。

程序对于AR十二生肖文字的介绍是采用Json格式进行存储，独立于编程语言导入Unity实现数据信息的存储，里边详细介绍了项目需要的文字信息，方便了程序的调用。

5 项目详细实现

在UIManager腳本文件中实现项目菜单，在程序运行时通过菜单按钮调用MenuPanelUpdateUIButtonClick（）函数完成菜单按钮的展开与隐藏，当界面扫描模型识别图时，通过调用TextUIShowZO（）函数和TextUIShowNO（）完成实现，在函数里对stayte.text和UpText.text进行赋值，完成生肖识别图扫描时的显示和关闭。如图2所示，通过扫描兔子的AR识别图，在真实空间中可出现兔子的虚拟模型，通过UI界面上的程序设置、重新识别、生肖声音、屏幕截取、生肖动画等按钮，学习AR十二生肖的图文、声音、动画等科普知识。

1）程序设置功能的实现

通过SetUpPanelSlider类和SetUpPanel类实现对程序设置子功能的调用。首先在Start（）函数中为SetUpPanel.blocksRaycasts赋值为false，当点击程序设置按钮时调用SetUpPanelButtonCilck（）函数实现跳转界面的转换。当左右移动音量进度条进行播放时，通过调用SetAudioSliderClick（）函数完成音量声音大小变化的实现。

2）重新识别功能的实现

在UIManager脚本中完成，通过编译ResLoadSceneButtonClick（）函数完成对识别功能的重新加载，在函数中通过代码编译SceneManager实现对扫描识别图片的重新识别。

3）生肖声音功能的实现

首先进行素材收集，然后使用剪辑软件对声音进行处理剪辑，完成后保存文件夹，在建立好的Unity项目中Assets下面新建Resources将十二生肖音频对应导入处理。在UIManager中添加PlayMusicButtoClick（）函数，在函数里对生肖声音播放进行调用。

4）生肖动画功能的实现

生肖动画的制作首先通过Maya软件打开之前绑定骨骼的模型，然后通过对创建好的骨骼，找到节点，通过添加设置动画关键帧，调节中心点位置，调节完成后在软件内检测动画播放是否正常，动画循环通过对之前制作好的动作循环复制即可，制作完成后通过导出保存文件。将保存好的动画文件导入Unity，和十二生肖模型进行关联。在UIManager脚本中添加OpenStartSceneButtonCLick（）函数，在函数中添加SceneManager代码，调用识别图对应的生肖动画。

5）屏幕截取功能的实现

屏幕截取主要通过编写脚本实现对用户使用程序交互时调用的界面内容进行实时截取，在UIManager脚本中通过GameShotButtonClick（）函数对UIShowText.text赋予命名，实现对实时界面进行截取。

6 结束语

《AR十二生肖》是一款将十二生肖民俗文化运用增强现实技术制作的科普应用程序。项目实现了程序初始化、AR识图、生肖查询、新手帮助等功能，用户通过AR识图功能，可以学习AR十二生肖的图文、声音、动画等科普知识。

参考文献：

[1] 陈向东，万悦.增强现实教育游戏的开发与应用——以“泡泡星球”为例[J].中国电化教育，2017（3）：24-30.

[2] 姚甜.AR技术在教育领域的应用[J].無线互联科技，2020（4）：158-159.

[3] 段文婷.学龄前儿童动画片理论研究与应用[D].哈尔滨：哈尔滨工程大学，2013.

[4] 段向琼.幼儿园 5-6 岁儿童动画片喜好现状研究[D].西安：陕西师范大学，2008.

[5] 李强，陈旭.信用卡管理系统的UML建模研究[J].电脑知识与技术，2014，10（22）：5217-5219.

【通联编辑：谢媛媛】