APP下载

基于Unity3D的初中英语单词AR应用设计与实现

2022-12-21潘光洋

信息记录材料 2022年10期
关键词:例句卡片界面

潘光洋

(广东培正学院数据科学与计算机学院 广东 广州 510830)

0 引言

增强现实技术能够将虚拟事物与真实事物融合在一起,已应用到多个领域,如娱乐、产品销售、房地产、文化传承、教育等。用户戴上增强现实头盔设备或具有摄像头的手持设备,能够沉浸体验虚实结合的场景和事物。各行业领头企业纷纷进入增强现实领域,促进了增强现实设备的快速发展。增强现实设备包括头戴式和手持式设备。其中头戴式主要包括微软的Hololens、Magic leap的Magic Leap One混合现实眼镜、爱普生的BT-35E增强现实AR智能眼镜等。手持式设备主要是各种带摄像头的设备,如手机、平板、触摸屏等。开发AR的SDK和插件快速地迭代,从底层的开发语言WebGL、ARCore、Vuforia,到集成地开发插件ARFoundation、EasyAR,使AR应用的开发更加简便而有效。为了探索在手机设备上能够有效地开发AR应用,提出高效开发流程方案,拓宽手机AR应用领域,本文以农村初中英语教育为例,以Unity3D游戏引擎为开发平台,以EasyAR为插件,描述了《英语单词AR应用》的开发流程和关键技术,提出了AR识别图制作的注意事项。本研究开发AR应用制作了符合友好体验的识别图画册,通过手机能够快速识别卡片,实现了单词相对应三维场景的展示,单词与例句的发音,三维场景的移动、缩放、旋转,信息数据的显示与隐藏。

1 研究背景

AR技术已相对成熟,并在教育领域中有所应用。蔡苏[1]所带领的团队经过一系列尝试,撰写了一本基于增强现实技术用于教学演绎的书。周海洋[2]利用Unity3D和Vuforia的AR技术实现相关化学知识的AR立体展示。顾凤梅等[3]使用Unity3D软件及Easy AR作为AR引擎,以“英语单词AR学习资源”为例进行设计开发,生成移动设备应用程序,在移动设备上安装运行,扫描单词识别图,产生对应含义的三维模型,模型可以被触摸放大,给出中英文语音及其解释,提供流畅的学习体验。但是他们设计的识别卡片比较单调,只有文字卡片。

2 系统开发流程

从需求分析到发布APK的AR应用开发流程如图1所示。

图1 系统开发流程

在需求分析阶段,完成开发环境搭建、系统用户功能需求分析、初中英语词汇的收集和整理、例句的选择、单词与三维模型对应关系分析等任务。在单词识别图设计阶段,完成识别图画册封面和界面布局的设计,制定色彩搭配图和界面布局图。在设计系统UI界面阶段,完成手机端系统交互界面的设计,绘制界面图标,制订元素布局规范。在创建3D模型阶段,根据需求分析所得到的模型对应关系,使用3Ds Max制作三维模型或场景,优化面数,导出为FBX格式文件。在Unity3D开发软件阶段,将所有的识别图、三维模型、音频等素材导入Unity3D开发平台,添加AR识别图组件,添加交互代码,实现系统交互功能。在软件功能测试阶段,应用用户友好体验测试的方法,检验功能可用性和界面的友好性。最终,从Unity3D导出APK格式的AR应用。

3 系统设计

系统选用了上海牛津版本的七年级、八年级和九年级的英语教材作为单词来源教材,按教材单元划分学习单元,将单词分为具象和抽象。对于具象的单词,采用具体事物模型表示;对于抽象的单词,采用场景或者动画表达。系统设计包括功能设计、识别图设计和操作界面设计。

3.1 功能设计

根据对初中师生的问卷调查分析结果,系统功能包括:系统能够展示单词对应的模型,让学生能够快速背诵和记忆,能够发出单词的读音;方便用户查看3D模型;在没有卡片时也能够通过菜单进入单词三维展示界面。系统整体功能如图 2所示。

图2 系统功能结构图

3.2 识别图设计

单词卡片设计时需要考虑如何利用视觉元素有效地向读者传达内容和信息。制作时考虑每个元素的视觉属性和色彩构成,仔细衡量每个细节,追求在有效传递信息的同时又能给使用者带来舒适愉悦的感觉[4]。识别图是卡片类AR的重点。良好的识别图,能够提供友好的用户体验。识别图卡片制作需考虑识别图中尽可能多的特征点。特征点的特点就是锋利、尖、轮廓分明的细节图像[5]。色彩搭配有助于实现更好的视觉效果,识别图卡片的颜色搭配如图3所示。

图3 卡片识别图颜色搭配图

识别图卡片采用偏动画的手绘效果,卡片中包括单词平面图、英语单词、例句、翻译、另外添加一些励志小图标,整个画面丰富,布局合理,提高识别度。以racing英文单词的识别图设计为例,设计图布局详细说明如图4所示。

图4 识别图布局详细说明

将所有卡片识别图通过左上角的圆孔进行装订形成画册,画册封面如图5左边所示,所有卡片的效果如图5右边所示。画册需要印刷为彩色的卡片,从而让AR效果更加友好。

图5 画册封面(左边)和卡片识别图效果(右边)

在识别图卡片的制作时需要注意以下几点:(1)单词平面图片的格式建议为jpg。单词卡片应当拥有合适的纹理。意味着纹理应当具有丰富的细节,且不是遵循某种重复性的模式。纹理细节缺乏或反复重复的物体不利于检测和跟踪。(2)卡片上的物体内容本身应当尽可能地充满整个画面,有利于扫描检测。(3)卡片图片不能过于狭长,其短边的长度至少应该达到长边长度的20%,长度过长扫描不全,自动生成Target数据时计算时间增多且容易导致因文件过大而带来操作卡顿、闪退的麻烦。长度过短不能够保证能有足够多的特征点并且细节过于模糊,影响检测结果。(4)单词卡片图像的尺寸大小合适。(5)尽量不要使用透明通道,卡片图像如果带有透明通道,系统会默认按照白色背景的方式进行处理,会造成图像细节的隐藏或是混淆,如非本意,尽量避免。(6)实物卡片大小应该合适,手掌大小最为合适。

3.3 操作界面设计

操作界面设计与识别图设计不同,操作界面设计是系统在手机端上的界面设计,主要是用于操作手机观看的效果和交互的界面。根据用户需求调查分析结果显示系统89%的用户更喜欢系统UI界面风格可爱、现代。为了能够满足脱卡,设置了APP的首页界面和操作界面,如图6所示。

图6 首页界面(左边)和操作界面(右边)

在操作界面上,用户只需要将手机摄像头对准识别图即可加载三维模型,并展示相应的单词内容。用户点击“语音播放按钮”即可播放一次单词和例句的发音。

4 系统实现

Unity3D游戏引擎拥有良好的跨平台性,实现Windows、Android、MAC等多个平台的交互,具有低成本、高效率、易上手等优点[6]。EasyAR插件支持多种硬件平台,官方提供了各种API接口的应用案例,并提供了不同开发环境下的SDK包,如基于Unity3D平台的SDK包。与Vuforia和ARTool Kit相比,EasyAR具有高效、易用、简单的优点,使普通用户更容易上手[7]。Unity3D发布APK需要Android SDK的支持,采用Android Studio进行Android SDK管理。

4.1 系统开发环境配置

系统开发主要使用两个开发包:(1)Android SDK软件开发工具包,为开发者提供Android库文件以及其他开发所用到的工具。(2)Java开发工具包(JDK),为系统开发提供Java工具和创建Java开发环境。安装Android Studio集成开发环境管理Android SDK,安装Java SE完成JDK环境的配置。

系统使用EasyAR SDK开发AR应用,需要配置EasyAR SDK。进入EasyAR的官网easyar.cn下载对应的Unity插件包。EasyAR从版本4开始,过去被大家熟知的EasyAR SDK将被赋予一个新的名字:EasyAR Sense。EasyAR Sense是一个独立的SDK,提供感知真实世界的能力。EasyAR Sense Unity Plugin提供EasyAR Sense功能在Unity中的封装。EasyAR SDK的配置需要完成如下两个步骤:(1)在官网中注册账号,在“sense授权管理”中新建应用授权,并填写“应用名称”和“Package Name”。(2)在Unity3D的项目中导入所下载的EasyAR Sense Unity Plugin,选择“EasyAR”|“change license Key”菜单,在“Setting”面板上粘贴第一步申请的授权码。“Package Name”的命名规则是“com.”+“公司名称”+“应用名称”,如“com.yl.easyEnglish”,所有名称都需要使用英文字符描述。

4.2 三维模型的制作

三维模型的制作使用3Ds Max完成。三维模型制作过程是:单词类型划分,三维模型的粗模制作;UV贴图展开并烘焙;优化三维模型,降低面数;最后,导出FBX格式的三维模型文件。三维模型导出的FBX格式的文件名设置为“单词+_model”,如gift_model.fbx。

4.3 交互功能模块实现

在AR应用中,用户使用触摸屏和摄像头与系统交互,交互操作包括摄像头扫描、点击、缩放和旋转手势。摄像头扫描使用EasyAR SDK的自带功能,用户让手机对着识别图即可。用户可以用手指点击屏幕,通过不同的手势来控制三维模型,与模型进行交互[8]。缩放:通过改变两个手指在屏幕上的距离实现模型的缩小放大效果,两个手指之间距离变大,则放大模型;反之则缩小模型。旋转:通过一个手指在手机屏幕上朝不同方向滑动,模型可以360°旋转。当手指向某一方向滑动,模型也会随之旋转。

4.4 发音模块实现

Unity 3D支持多种音频格式,主要包括 aiff、wav、mp3、ogg四种。其中,aiff、wav 格式比较适合声音较长的文件存储,而mp3、ogg格式比较适合声音较短的文件存储。英语单词和例句的语音属于比较长的录音。本系统的单词和例句发音采用文字转化为语音的技术,导出为wav格式。音频文件的名称规范为:“单词名称_audio”,如gift_audio.wav。wav格式编码简单以及无损耗存储,单词、例句声音的清晰程度不会受到影响。

发音模块的实现使用Unity3D中默认的UI按钮触发Audio Source组件的Play函数完成。在UI按钮的“On Click()”事件中选择“AudioSource.Play”和含有对应音频的Audio Source组件即可。

4.5 文本信息显示与隐藏

用户扫描识别图之后,系统界面会显示单词、例句文本和发音按钮。为了能够更好地查看三维模型,加深对单词与三维模型的关联,用户可以切换文本信息的显示和隐藏。利用Unity3D中的UI按钮组件的onClick 函数响应用户点击事件以及SetActive 函数的布尔参数控制系统文本信息的显示或隐藏。在C#的代码里设置一个isClick布尔类型的变量,用于存储信息显示与否的状态。功能实现逻辑:当用户点击一次按钮,则显示三维模型相应单词和例句,再次点击按钮则单词和例句消失。

4.6 系统测试和发布

系统采用功能测试,直接在Unity3D开发平台上进行功能测试。识别图ImageTarget、三维模型内容和音频等内容整合后,在带有摄像机的电脑上进行开发测试。Android Studio开发环境将手机模拟器内嵌到开发平台中,所以能够直接通过Android Studio创建虚拟终端完成系统调试。

在Unity3D开发环境下,选择“build settings” |“player settings”菜单,在Player setting对话框中设置软件包安装的属性。此处的Package Name必须与EasyAR的授权码中的“Package Name”保持一致。发布APK之后,将APK上传到草料二维码网站,使用手机扫码能够快速地下载AR应用。最终AR应用界面如图7所示。

图7 系统运行效果界面

5 总结

EasyEnglish AR应用严格按照需求分析、系统设计、系统实现和测试的开发流程执行,制作了识别度高、界面美观的识别图画册,设计了系统的UI交互界面,系统操作和交互流畅,单词语音发音标准,系统使用体验友好。本研究应用EasyAR插件快速地开发了EasyEnglish AR应用,提出了制作识别度高的识别图注意事项,为AR应用领域提供实现的有效方案,促进AR应用开发的发展。

猜你喜欢

例句卡片界面
摆卡片
倒过来的卡片
国企党委前置研究的“四个界面”
一张卡片
基于FANUC PICTURE的虚拟轴坐标显示界面开发方法研究
英声细语
人机交互界面发展趋势研究
好词好句
卡片
好词好句