基于Unity3D的初中英語(yǔ)單詞AR應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)

潘光洋

（廣東培正學(xué)院數(shù)據(jù)科學(xué)與計(jì)算機(jī)學(xué)院 廣東 廣州 510830）

0 引言

增強(qiáng)現(xiàn)實(shí)技術(shù)能夠?qū)⑻摂M事物與真實(shí)事物融合在一起，已應(yīng)用到多個(gè)領(lǐng)域，如娛樂(lè)、產(chǎn)品銷(xiāo)售、房地產(chǎn)、文化傳承、教育等。用戶(hù)戴上增強(qiáng)現(xiàn)實(shí)頭盔設(shè)備或具有攝像頭的手持設(shè)備，能夠沉浸體驗(yàn)虛實(shí)結(jié)合的場(chǎng)景和事物。各行業(yè)領(lǐng)頭企業(yè)紛紛進(jìn)入增強(qiáng)現(xiàn)實(shí)領(lǐng)域，促進(jìn)了增強(qiáng)現(xiàn)實(shí)設(shè)備的快速發(fā)展。增強(qiáng)現(xiàn)實(shí)設(shè)備包括頭戴式和手持式設(shè)備。其中頭戴式主要包括微軟的Hololens、Magic leap的Magic Leap One混合現(xiàn)實(shí)眼鏡、愛(ài)普生的BT-35E增強(qiáng)現(xiàn)實(shí)AR智能眼鏡等。手持式設(shè)備主要是各種帶攝像頭的設(shè)備，如手機(jī)、平板、觸摸屏等。開(kāi)發(fā)AR的SDK和插件快速地迭代，從底層的開(kāi)發(fā)語(yǔ)言WebGL、ARCore、Vuforia，到集成地開(kāi)發(fā)插件ARFoundation、EasyAR，使AR應(yīng)用的開(kāi)發(fā)更加簡(jiǎn)便而有效。為了探索在手機(jī)設(shè)備上能夠有效地開(kāi)發(fā)AR應(yīng)用，提出高效開(kāi)發(fā)流程方案，拓寬手機(jī)AR應(yīng)用領(lǐng)域，本文以農(nóng)村初中英語(yǔ)教育為例，以Unity3D游戲引擎為開(kāi)發(fā)平臺(tái)，以EasyAR為插件，描述了《英語(yǔ)單詞AR應(yīng)用》的開(kāi)發(fā)流程和關(guān)鍵技術(shù)，提出了AR識(shí)別圖制作的注意事項(xiàng)。本研究開(kāi)發(fā)AR應(yīng)用制作了符合友好體驗(yàn)的識(shí)別圖畫(huà)冊(cè)，通過(guò)手機(jī)能夠快速識(shí)別卡片，實(shí)現(xiàn)了單詞相對(duì)應(yīng)三維場(chǎng)景的展示，單詞與例句的發(fā)音，三維場(chǎng)景的移動(dòng)、縮放、旋轉(zhuǎn)，信息數(shù)據(jù)的顯示與隱藏。

1 研究背景

AR技術(shù)已相對(duì)成熟，并在教育領(lǐng)域中有所應(yīng)用。蔡蘇[1]所帶領(lǐng)的團(tuán)隊(duì)經(jīng)過(guò)一系列嘗試，撰寫(xiě)了一本基于增強(qiáng)現(xiàn)實(shí)技術(shù)用于教學(xué)演繹的書(shū)。周海洋[2]利用Unity3D和Vuforia的AR技術(shù)實(shí)現(xiàn)相關(guān)化學(xué)知識(shí)的AR立體展示。顧鳳梅等[3]使用Unity3D軟件及Easy AR作為AR引擎，以“英語(yǔ)單詞AR學(xué)習(xí)資源”為例進(jìn)行設(shè)計(jì)開(kāi)發(fā)，生成移動(dòng)設(shè)備應(yīng)用程序，在移動(dòng)設(shè)備上安裝運(yùn)行，掃描單詞識(shí)別圖，產(chǎn)生對(duì)應(yīng)含義的三維模型，模型可以被觸摸放大，給出中英文語(yǔ)音及其解釋?zhuān)峁┝鲿车膶W(xué)習(xí)體驗(yàn)。但是他們?cè)O(shè)計(jì)的識(shí)別卡片比較單調(diào)，只有文字卡片。

2 系統(tǒng)開(kāi)發(fā)流程

從需求分析到發(fā)布APK的AR應(yīng)用開(kāi)發(fā)流程如圖1所示。

圖1 系統(tǒng)開(kāi)發(fā)流程

在需求分析階段，完成開(kāi)發(fā)環(huán)境搭建、系統(tǒng)用戶(hù)功能需求分析、初中英語(yǔ)詞匯的收集和整理、例句的選擇、單詞與三維模型對(duì)應(yīng)關(guān)系分析等任務(wù)。在單詞識(shí)別圖設(shè)計(jì)階段，完成識(shí)別圖畫(huà)冊(cè)封面和界面布局的設(shè)計(jì)，制定色彩搭配圖和界面布局圖。在設(shè)計(jì)系統(tǒng)UI界面階段，完成手機(jī)端系統(tǒng)交互界面的設(shè)計(jì)，繪制界面圖標(biāo)，制訂元素布局規(guī)范。在創(chuàng)建3D模型階段，根據(jù)需求分析所得到的模型對(duì)應(yīng)關(guān)系，使用3Ds Max制作三維模型或場(chǎng)景，優(yōu)化面數(shù)，導(dǎo)出為FBX格式文件。在Unity3D開(kāi)發(fā)軟件階段，將所有的識(shí)別圖、三維模型、音頻等素材導(dǎo)入U(xiǎn)nity3D開(kāi)發(fā)平臺(tái)，添加AR識(shí)別圖組件，添加交互代碼，實(shí)現(xiàn)系統(tǒng)交互功能。在軟件功能測(cè)試階段，應(yīng)用用戶(hù)友好體驗(yàn)測(cè)試的方法，檢驗(yàn)功能可用性和界面的友好性。最終，從Unity3D導(dǎo)出APK格式的AR應(yīng)用。

3 系統(tǒng)設(shè)計(jì)

系統(tǒng)選用了上海牛津版本的七年級(jí)、八年級(jí)和九年級(jí)的英語(yǔ)教材作為單詞來(lái)源教材，按教材單元?jiǎng)澐謱W(xué)習(xí)單元，將單詞分為具象和抽象。對(duì)于具象的單詞，采用具體事物模型表示；對(duì)于抽象的單詞，采用場(chǎng)景或者動(dòng)畫(huà)表達(dá)。系統(tǒng)設(shè)計(jì)包括功能設(shè)計(jì)、識(shí)別圖設(shè)計(jì)和操作界面設(shè)計(jì)。

3.1 功能設(shè)計(jì)

根據(jù)對(duì)初中師生的問(wèn)卷調(diào)查分析結(jié)果，系統(tǒng)功能包括：系統(tǒng)能夠展示單詞對(duì)應(yīng)的模型，讓學(xué)生能夠快速背誦和記憶，能夠發(fā)出單詞的讀音；方便用戶(hù)查看3D模型；在沒(méi)有卡片時(shí)也能夠通過(guò)菜單進(jìn)入單詞三維展示界面。系統(tǒng)整體功能如圖 2所示。

圖2 系統(tǒng)功能結(jié)構(gòu)圖

3.2 識(shí)別圖設(shè)計(jì)

單詞卡片設(shè)計(jì)時(shí)需要考慮如何利用視覺(jué)元素有效地向讀者傳達(dá)內(nèi)容和信息。制作時(shí)考慮每個(gè)元素的視覺(jué)屬性和色彩構(gòu)成，仔細(xì)衡量每個(gè)細(xì)節(jié)，追求在有效傳遞信息的同時(shí)又能給使用者帶來(lái)舒適愉悅的感覺(jué)[4]。識(shí)別圖是卡片類(lèi)AR的重點(diǎn)。良好的識(shí)別圖，能夠提供友好的用戶(hù)體驗(yàn)。識(shí)別圖卡片制作需考慮識(shí)別圖中盡可能多的特征點(diǎn)。特征點(diǎn)的特點(diǎn)就是鋒利、尖、輪廓分明的細(xì)節(jié)圖像[5]。色彩搭配有助于實(shí)現(xiàn)更好的視覺(jué)效果，識(shí)別圖卡片的顏色搭配如圖3所示。

圖3 卡片識(shí)別圖顏色搭配圖

識(shí)別圖卡片采用偏動(dòng)畫(huà)的手繪效果，卡片中包括單詞平面圖、英語(yǔ)單詞、例句、翻譯、另外添加一些勵(lì)志小圖標(biāo)，整個(gè)畫(huà)面豐富，布局合理，提高識(shí)別度。以racing英文單詞的識(shí)別圖設(shè)計(jì)為例，設(shè)計(jì)圖布局詳細(xì)說(shuō)明如圖4所示。

圖4 識(shí)別圖布局詳細(xì)說(shuō)明

將所有卡片識(shí)別圖通過(guò)左上角的圓孔進(jìn)行裝訂形成畫(huà)冊(cè)，畫(huà)冊(cè)封面如圖5左邊所示，所有卡片的效果如圖5右邊所示。畫(huà)冊(cè)需要印刷為彩色的卡片，從而讓AR效果更加友好。

圖5 畫(huà)冊(cè)封面（左邊）和卡片識(shí)別圖效果（右邊）

在識(shí)別圖卡片的制作時(shí)需要注意以下幾點(diǎn)：（1）單詞平面圖片的格式建議為jpg。單詞卡片應(yīng)當(dāng)擁有合適的紋理。意味著紋理應(yīng)當(dāng)具有豐富的細(xì)節(jié)，且不是遵循某種重復(fù)性的模式。紋理細(xì)節(jié)缺乏或反復(fù)重復(fù)的物體不利于檢測(cè)和跟蹤。（2）卡片上的物體內(nèi)容本身應(yīng)當(dāng)盡可能地充滿(mǎn)整個(gè)畫(huà)面，有利于掃描檢測(cè)。（3）卡片圖片不能過(guò)于狹長(zhǎng)，其短邊的長(zhǎng)度至少應(yīng)該達(dá)到長(zhǎng)邊長(zhǎng)度的20%，長(zhǎng)度過(guò)長(zhǎng)掃描不全，自動(dòng)生成Target數(shù)據(jù)時(shí)計(jì)算時(shí)間增多且容易導(dǎo)致因文件過(guò)大而帶來(lái)操作卡頓、閃退的麻煩。長(zhǎng)度過(guò)短不能夠保證能有足夠多的特征點(diǎn)并且細(xì)節(jié)過(guò)于模糊，影響檢測(cè)結(jié)果。（4）單詞卡片圖像的尺寸大小合適。（5）盡量不要使用透明通道，卡片圖像如果帶有透明通道，系統(tǒng)會(huì)默認(rèn)按照白色背景的方式進(jìn)行處理，會(huì)造成圖像細(xì)節(jié)的隱藏或是混淆，如非本意，盡量避免。（6）實(shí)物卡片大小應(yīng)該合適，手掌大小最為合適。

3.3 操作界面設(shè)計(jì)

操作界面設(shè)計(jì)與識(shí)別圖設(shè)計(jì)不同，操作界面設(shè)計(jì)是系統(tǒng)在手機(jī)端上的界面設(shè)計(jì)，主要是用于操作手機(jī)觀看的效果和交互的界面。根據(jù)用戶(hù)需求調(diào)查分析結(jié)果顯示系統(tǒng)89%的用戶(hù)更喜歡系統(tǒng)UI界面風(fēng)格可愛(ài)、現(xiàn)代。為了能夠滿(mǎn)足脫卡，設(shè)置了APP的首頁(yè)界面和操作界面，如圖6所示。

圖6 首頁(yè)界面（左邊）和操作界面（右邊）

在操作界面上，用戶(hù)只需要將手機(jī)攝像頭對(duì)準(zhǔn)識(shí)別圖即可加載三維模型，并展示相應(yīng)的單詞內(nèi)容。用戶(hù)點(diǎn)擊“語(yǔ)音播放按鈕”即可播放一次單詞和例句的發(fā)音。

4 系統(tǒng)實(shí)現(xiàn)

Unity3D游戲引擎擁有良好的跨平臺(tái)性，實(shí)現(xiàn)Windows、Android、MAC等多個(gè)平臺(tái)的交互，具有低成本、高效率、易上手等優(yōu)點(diǎn)[6]。EasyAR插件支持多種硬件平臺(tái)，官方提供了各種API接口的應(yīng)用案例，并提供了不同開(kāi)發(fā)環(huán)境下的SDK包，如基于Unity3D平臺(tái)的SDK包。與Vuforia和ARTool Kit相比，EasyAR具有高效、易用、簡(jiǎn)單的優(yōu)點(diǎn)，使普通用戶(hù)更容易上手[7]。Unity3D發(fā)布APK需要Android SDK的支持，采用Android Studio進(jìn)行Android SDK管理。

4.1 系統(tǒng)開(kāi)發(fā)環(huán)境配置

系統(tǒng)開(kāi)發(fā)主要使用兩個(gè)開(kāi)發(fā)包：（1）Android SDK軟件開(kāi)發(fā)工具包，為開(kāi)發(fā)者提供Android庫(kù)文件以及其他開(kāi)發(fā)所用到的工具。（2）Java開(kāi)發(fā)工具包（JDK)，為系統(tǒng)開(kāi)發(fā)提供Java工具和創(chuàng)建Java開(kāi)發(fā)環(huán)境。安裝Android Studio集成開(kāi)發(fā)環(huán)境管理Android SDK，安裝Java SE完成JDK環(huán)境的配置。

系統(tǒng)使用EasyAR SDK開(kāi)發(fā)AR應(yīng)用，需要配置EasyAR SDK。進(jìn)入EasyAR的官網(wǎng)easyar.cn下載對(duì)應(yīng)的Unity插件包。EasyAR從版本4開(kāi)始，過(guò)去被大家熟知的EasyAR SDK將被賦予一個(gè)新的名字：EasyAR Sense。EasyAR Sense是一個(gè)獨(dú)立的SDK，提供感知真實(shí)世界的能力。EasyAR Sense Unity Plugin提供EasyAR Sense功能在Unity中的封裝。EasyAR SDK的配置需要完成如下兩個(gè)步驟：（1）在官網(wǎng)中注冊(cè)賬號(hào)，在“sense授權(quán)管理”中新建應(yīng)用授權(quán)，并填寫(xiě)“應(yīng)用名稱(chēng)”和“Package Name”。（2）在Unity3D的項(xiàng)目中導(dǎo)入所下載的EasyAR Sense Unity Plugin，選擇“EasyAR”|“change license Key”菜單，在“Setting”面板上粘貼第一步申請(qǐng)的授權(quán)碼。“Package Name”的命名規(guī)則是“com.”+“公司名稱(chēng)”+“應(yīng)用名稱(chēng)”，如“com.yl.easyEnglish”，所有名稱(chēng)都需要使用英文字符描述。

4.2 三維模型的制作

三維模型的制作使用3Ds Max完成。三維模型制作過(guò)程是：?jiǎn)卧~類(lèi)型劃分，三維模型的粗模制作；UV貼圖展開(kāi)并烘焙；優(yōu)化三維模型，降低面數(shù)；最后，導(dǎo)出FBX格式的三維模型文件。三維模型導(dǎo)出的FBX格式的文件名設(shè)置為“單詞+_model”，如gift_model.fbx。

4.3 交互功能模塊實(shí)現(xiàn)

在AR應(yīng)用中，用戶(hù)使用觸摸屏和攝像頭與系統(tǒng)交互，交互操作包括攝像頭掃描、點(diǎn)擊、縮放和旋轉(zhuǎn)手勢(shì)。攝像頭掃描使用EasyAR SDK的自帶功能，用戶(hù)讓手機(jī)對(duì)著識(shí)別圖即可。用戶(hù)可以用手指點(diǎn)擊屏幕，通過(guò)不同的手勢(shì)來(lái)控制三維模型，與模型進(jìn)行交互[8]。縮放：通過(guò)改變兩個(gè)手指在屏幕上的距離實(shí)現(xiàn)模型的縮小放大效果，兩個(gè)手指之間距離變大，則放大模型；反之則縮小模型。旋轉(zhuǎn)：通過(guò)一個(gè)手指在手機(jī)屏幕上朝不同方向滑動(dòng)，模型可以360°旋轉(zhuǎn)。當(dāng)手指向某一方向滑動(dòng)，模型也會(huì)隨之旋轉(zhuǎn)。

4.4 發(fā)音模塊實(shí)現(xiàn)

Unity 3D支持多種音頻格式，主要包括 aiff、wav、mp3、ogg四種。其中，aiff、wav 格式比較適合聲音較長(zhǎng)的文件存儲(chǔ)，而mp3、ogg格式比較適合聲音較短的文件存儲(chǔ)。英語(yǔ)單詞和例句的語(yǔ)音屬于比較長(zhǎng)的錄音。本系統(tǒng)的單詞和例句發(fā)音采用文字轉(zhuǎn)化為語(yǔ)音的技術(shù)，導(dǎo)出為wav格式。音頻文件的名稱(chēng)規(guī)范為：“單詞名稱(chēng)_audio”，如gift_audio.wav。wav格式編碼簡(jiǎn)單以及無(wú)損耗存儲(chǔ)，單詞、例句聲音的清晰程度不會(huì)受到影響。

發(fā)音模塊的實(shí)現(xiàn)使用Unity3D中默認(rèn)的UI按鈕觸發(fā)Audio Source組件的Play函數(shù)完成。在UI按鈕的“On Click()”事件中選擇“AudioSource.Play”和含有對(duì)應(yīng)音頻的Audio Source組件即可。

4.5 文本信息顯示與隱藏

用戶(hù)掃描識(shí)別圖之后，系統(tǒng)界面會(huì)顯示單詞、例句文本和發(fā)音按鈕。為了能夠更好地查看三維模型，加深對(duì)單詞與三維模型的關(guān)聯(lián)，用戶(hù)可以切換文本信息的顯示和隱藏。利用Unity3D中的UI按鈕組件的onClick 函數(shù)響應(yīng)用戶(hù)點(diǎn)擊事件以及SetActive 函數(shù)的布爾參數(shù)控制系統(tǒng)文本信息的顯示或隱藏。在C#的代碼里設(shè)置一個(gè)isClick布爾類(lèi)型的變量，用于存儲(chǔ)信息顯示與否的狀態(tài)。功能實(shí)現(xiàn)邏輯：當(dāng)用戶(hù)點(diǎn)擊一次按鈕，則顯示三維模型相應(yīng)單詞和例句，再次點(diǎn)擊按鈕則單詞和例句消失。

4.6 系統(tǒng)測(cè)試和發(fā)布

系統(tǒng)采用功能測(cè)試，直接在Unity3D開(kāi)發(fā)平臺(tái)上進(jìn)行功能測(cè)試。識(shí)別圖ImageTarget、三維模型內(nèi)容和音頻等內(nèi)容整合后，在帶有攝像機(jī)的電腦上進(jìn)行開(kāi)發(fā)測(cè)試。Android Studio開(kāi)發(fā)環(huán)境將手機(jī)模擬器內(nèi)嵌到開(kāi)發(fā)平臺(tái)中，所以能夠直接通過(guò)Android Studio創(chuàng)建虛擬終端完成系統(tǒng)調(diào)試。

在Unity3D開(kāi)發(fā)環(huán)境下，選擇“build settings” |“player settings”菜單，在Player setting對(duì)話框中設(shè)置軟件包安裝的屬性。此處的Package Name必須與EasyAR的授權(quán)碼中的“Package Name”保持一致。發(fā)布APK之后，將APK上傳到草料二維碼網(wǎng)站，使用手機(jī)掃碼能夠快速地下載AR應(yīng)用。最終AR應(yīng)用界面如圖7所示。

圖7 系統(tǒng)運(yùn)行效果界面

5 總結(jié)

EasyEnglish AR應(yīng)用嚴(yán)格按照需求分析、系統(tǒng)設(shè)計(jì)、系統(tǒng)實(shí)現(xiàn)和測(cè)試的開(kāi)發(fā)流程執(zhí)行，制作了識(shí)別度高、界面美觀的識(shí)別圖畫(huà)冊(cè)，設(shè)計(jì)了系統(tǒng)的UI交互界面，系統(tǒng)操作和交互流暢，單詞語(yǔ)音發(fā)音標(biāo)準(zhǔn)，系統(tǒng)使用體驗(yàn)友好。本研究應(yīng)用EasyAR插件快速地開(kāi)發(fā)了EasyEnglish AR應(yīng)用，提出了制作識(shí)別度高的識(shí)別圖注意事項(xiàng)，為AR應(yīng)用領(lǐng)域提供實(shí)現(xiàn)的有效方案，促進(jìn)AR應(yīng)用開(kāi)發(fā)的發(fā)展。