基于Unity的《AR十二生肖》的设计与实现
多媒体技术及其应用
本栏目责任编辑：唐一东
基于Unity 的《AR 十二生肖》的设计与实现
彭伟国，翔
（平顶山学院计算机学院（软件学院），河南平顶山467000）
摘要：为帮助幼儿从触觉、视觉和听觉多维度学习十二生肖知识，开发一款面向幼儿教育的《AR 十二生肖》应用程序。经
过项目策划、生肖模型制作、AR 识别图制作、AR 识图交互设计与实现等环节，开发的这款AR 应用，幼儿可通过扫描识别图，在真实空间中通过程序界面中的程序设置、重新识别、生肖声音、生肖动画、屏幕截取等按钮，以虚实结合的形式，学习十二生肖的图文、声音、动画等科普知识。关键词：增强现实；十二生肖；科普应用；AR 识图；Vuforia 引擎中图分类号：TP37
文献标识码：A
文章编号：1009-3044(2021)02-0179-03
开放科学（资源服务）标识码（OSID ）：
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）首先在developer.vuforia/注册账号。2）注册登录进入Develop 页面，到Target Manager 链接，展开后点击Add Database 创建Database 文件，输入命名后选择Device 完成创建。
3）进入Database 目录，点击已经命名的Database 文件，然后点击Add Target 按钮添加Target 图片，选择默认Type 图片类型，上传准备好的识别图素材，然后设置图片宽度，再给识别图进行命名，完成设置后点击Add 按钮完成Target 图片添加。
4）等待网页加载完毕，识别图生成完毕，选择生成的识别图，并将其导入Unity 。
5）在Vuforia 网站中打开Downloads 链接，选择SDK 栏目下
收稿日期：2020-09-28作者简介：彭伟国（1983—），男，河南宜阳人，讲师，硕士，主要研究方向为数字媒体技术应用；翔（1998—），男，河南许昌人，学
士，研究方向为软件工程（游戏开发工程师）。
179
本栏目责任编辑：唐一东
多媒体技术及其应用Computer Knowledge and Technology 电脑知识与技术第17卷第2期(2021年1月)
的Unity 选项，下载高通开发包，下载完成后导入Unity 软件中。
6）在Vuforia 网站中打开Develop 链接，通过License Manag⁃er 创建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 识图类的设计首先创建UI⁃Manager 类实现对该界面的控制，将AR 识图功能界面调用的脚本名称也命名为UIManager 。首先在脚本中添加Start ()函数、Update()函数、hudongButtonClick()函数、ResLoadSceneButton⁃Click()函数、PlayMusicButtoClick()函数、SetUpPanelButtonCilck()函数等实现主要互动功能，ResLoadSceneButtonClick()函数通过代码调用识别模型图片进行重新识别，ResLoadSceneButton⁃Click()函数通过代码调用识别模型图片进行重新识别，以上函数主要实现了AR 识图功能与模型互动的菜单按钮的具体功能调用。
然后通过添加MenuPanelUpdateUIButtonClick()函数、Show UITextNUll()函数、OpenStartSceneButtinCLick()函数、TextU⁃IShowZO()等函数来实现部分界面UI 显示和文字显示功能，通过函数共同编译实现AR 识图功能的设计。AR 识图类图如下图1
多媒体设计与制作
所示。
图1AR 识图类图
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 实现数据信息
的存储，里边详细介绍了项目需要的文字信息，方便了程序的调用。
180
多媒体技术及其应用
本栏目责任编辑：唐一东Computer Knowledge and Technology 电脑知识与技术离合器片
第17卷第2期(2021年1月)
5项目详细实现
在UIManager 脚本文件中实现项目菜单，在程序运行时通过菜单按钮调用MenuPanelUpdateUIButtonClick()函数完成菜单按钮的展开与隐藏，当界面扫描模型识别图时，通过调用Tex⁃tUIShowZO()函数和TextUIShowNO()完成实现，在函数里对stay⁃te.text 和 进行赋值，完成生肖识别图扫描时的显示和关闭。如图2所示，通过扫描兔子的AR 识别图，在真实空间中可出现兔子的虚拟模型，通过UI 界面上的程序设置、重新识别、生肖声音、屏幕截取、生肖动画等按钮，学习AR 十二生肖的图文、声音、
动画等科普知识。
图2十二生肖兔子识别效果图
1）程序设置功能的实现
通过SetUpPanelSlider 类和SetUpPanel 类实现对程序设置子功能的调用。首先在Start()函数中为SetUpPanel.blocksRay⁃casts 赋值为false ，当点击程序设置按钮时调用SetUpPanelButt⁃onCilck()函数实现跳转界面的转换。当左右移动音量进度条进行播放时，通过调用SetAudioSliderClick()函数完成音量声音大小变化的实现。
2）重新识别功能的实现
在UIManager 脚本中完成，通过编译ResLoadSceneButton⁃Click()函数完成对识别功能的重新加载，
11月适合去国外哪里旅游在函数中通过代码编译SceneManager 实现对扫描识别图片的重新识别。
3）生肖声音功能的实现首先进行素材收集，然后使用剪辑软件对声音进行处理剪辑，完成后保存文件夹，在建立好的Unity 项目中Assets 下面新建Resources 将十二生肖音频对应导入处理。在UIManager 中添加PlayMusicButtoClick()函数，在函数里对生肖声音播放进行
调用。
4）生肖动画功能的实现
生肖动画的制作首先通过Maya 软件打开之前绑定骨骼的模型，然后通过对创建好的骨骼，到节点，通过添加设置动画关键帧，调节中心点位置，调节完成后在软件内检测动画播放是否正常，动画循环通过对之前制作好的动作循环复制即可，制作完成后通过导出保存文件。将保存好的动画文件导入Unity ，和十二生肖模型进行关联。在UIManager 脚本中添加OpenStartSceneButtonCLick()函数，在函数中添加SceneManager 代码，调用识别图对应的生肖动画。
5）屏幕截取功能的实现
屏幕截取主要通过编写脚本实现对用户使用程序交互时调用的界面内容进行实时截取，在UIManager 脚本中通过GameShotButtonClick()函数对 赋予命名，实现对实时界面进行截取。
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.
【通联编辑：谢媛媛】
（上接第178页）
体大小的1.3~1.6倍，小于1倍或大于2倍会影响正常的阅读；段间距需大于行间距，这样文字信息才能区分开成为单独的段落。元素的关联性越大，间距就越小；无关联的元素不要太靠近，否则容易让学习者产生误解。3.4留白，透气简洁
留白是我国国画技法中的精髓，书法中也经常强调“计白当黑”，也是版式设计中的一种独特的视觉语言。留白中的“白”，并不是等同于“白”，而是留出“空间”，即通过对版面空间的合理疏密分配，使画面具有层次性和呼吸感，让主体信息得到有效突出。留白以“无”平衡整体，起到缓冲与隔离的作用，能促使版面产生美感和魅力。
多媒体课件版式设计作为教学信息的视觉传达手段，不但要向学生传递教学内容，营造学习氛围，创设情景，还要留出一定的空间，使学生在观看课件时能进行思考与想象，而这种氛围、空间则可以通过留白来实现。比如，课件页面无论教学内容是多是少，要有固定的留白区域，即上、下、左、右四个边距。如果图文塞满了整张幻灯片，不留空隙，则学生观看时容易产
生紧张情绪，无法认真仔细地看下去，甚至失去学习兴趣；如果
毫无目的的留白，课件界面也将显得空荡荡的，降低了作品的质量。
留白的空间可以引导视线，吸引学习者的注意力，以增强课件的易读性；留白可以简化设计，提高品位，留白的多少给人的印象不同：留白少，界面中图片文字多，给人的感觉是拥挤的、充满信息的；留白多，给人的感觉是舒适的、简洁的感觉。在多媒体课件版面设计时有目的、有意识地留白，充分发挥留白的作用，体现其内在价值，才能实现教学内容层次分明，为学习者创造一个较为轻松、愉快的学习氛围。国内化妆品品牌大全
版式设计是多媒体课件界面设计的基础，在实际设计中版式设计的运用也是千差万别的，有时可能依然很难把握到要点。在掌握版式设计的原则与策略基础上，科学分析教学内容，并从优秀课件案例、海报、杂志等作品上获取创作灵感，多加尝试与反思，才能够制作完成一部优秀的多媒体课件。
参考文献：
[1]韩旭，周俊，李媛.版式设计[M].北京：兵器工业出版社,2013：1
【通联编辑：唐一东】
181

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。