基于Unity的《AR十二生肖》的設(shè)計(jì)與實(shí)現(xiàn)

彭偉國 李鵬翔

摘要：為幫助幼兒從觸覺、視覺和聽覺多維度學(xué)習(xí)十二生肖知識，開發(fā)一款面向幼兒教育的《AR十二生肖》應(yīng)用程序。經(jīng)過項(xiàng)目策劃、生肖模型制作、AR識別圖制作、AR識圖交互設(shè)計(jì)與實(shí)現(xiàn)等環(huán)節(jié)，開發(fā)的這款A(yù)R應(yīng)用，幼兒可通過掃描識別圖，在真實(shí)空間中通過程序界面中的程序設(shè)置、重新識別、生肖聲音、生肖動(dòng)畫、屏幕截取等按鈕，以虛實(shí)結(jié)合的形式，學(xué)習(xí)十二生肖的圖文、聲音、動(dòng)畫等科普知識。

關(guān)鍵詞：增強(qiáng)現(xiàn)實(shí);十二生肖;科普應(yīng)用;AR識圖;Vuforia引擎

中圖分類號：TP37? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）02-0179-03

1 背景

中國傳統(tǒng)文化有十二生肖，關(guān)于十二生肖百科知識，許多人從幼兒時(shí)期都開始接觸和了解，這種了解多是不完整的。在幼兒教育中，十二生肖教育多是從書本、視頻、動(dòng)畫中學(xué)習(xí)，有些生肖動(dòng)物小孩子因沒有接觸真實(shí)動(dòng)物而沒有直觀印象，學(xué)生學(xué)習(xí)存在被動(dòng)學(xué)習(xí)且缺乏參與性交互性。

《AR十二生肖》結(jié)合AR技術(shù)突破固有的教育形式，充分將十二生肖的形態(tài)，以虛實(shí)結(jié)合的形式出現(xiàn)在小孩的視覺里，從而使小孩子能夠更直觀地了解和接觸十二生肖的模型、聲音以及相關(guān)傳統(tǒng)文化知識?！禔R十二生肖》融入了游戲元素。將AR技術(shù)以適宜教學(xué)內(nèi)容的方式應(yīng)用到游戲環(huán)節(jié)，通過擴(kuò)增虛擬信息到現(xiàn)實(shí)世界中，拓展了游戲的活動(dòng)形式[1]。

2 項(xiàng)目策劃

項(xiàng)目屬于AR科普類應(yīng)用。AR這種增強(qiáng)現(xiàn)實(shí)技術(shù)，學(xué)習(xí)者可以自然地與3D信息、對象和事件進(jìn)行交互。除了2D和3D對象之外，數(shù)字資產(chǎn)，例如音頻和視頻文件、文本信息、嗅覺或觸覺信息等也可以并入用戶對現(xiàn)實(shí)世界的感知中[2]。因此，《AR十二生肖》應(yīng)用程序可以全方位調(diào)動(dòng)學(xué)生的視覺、聽覺、觸覺等感知系統(tǒng)，可更好的學(xué)習(xí)生肖知識，尤其是在觸覺感知方面，相比其他生肖程序有獨(dú)特的交互體驗(yàn)。

用戶群體主要為兒童。學(xué)齡前兒童認(rèn)識事物更多靠感覺、知覺和表象[3]，兒童對視覺藝術(shù)作品的審美偏愛具有以下特點(diǎn)：兒童喜歡表現(xiàn)動(dòng)物的美術(shù)作品;兒童喜歡夸張和擬人風(fēng)格的美術(shù)作品;兒童喜歡色彩鮮艷和豐富的美術(shù)作品[4]，所以項(xiàng)目模型設(shè)計(jì)為偏卡通風(fēng)格的動(dòng)物模型，更符合小孩子的認(rèn)知特點(diǎn)。

用戶打開項(xiàng)目后，初始化界面有AR識圖按鈕、生肖查詢按鈕、新手幫助按鈕、退出按鈕。點(diǎn)擊AR識圖按鈕，程序跳轉(zhuǎn)進(jìn)入識圖主頁面，通過設(shè)備相機(jī)掃描生肖識別圖，識圖成功后，在識別圖周圍真實(shí)世界中生成生肖模型，顯示生肖介紹文字，用戶可通過在設(shè)備上放大縮小旋轉(zhuǎn)操作觀看生肖模型，點(diǎn)擊生肖叫聲按鈕還可以播放掃描對應(yīng)生肖模型的叫聲，點(diǎn)擊生肖動(dòng)畫按鈕，生肖模型會播放動(dòng)畫片段。用戶通過設(shè)置按鈕可以調(diào)整聲音大小，通過截屏按鈕截屏當(dāng)前內(nèi)容，用戶也可以和生肖模型合影。用戶還可以查詢對應(yīng)年份的生肖屬性。

3 項(xiàng)目實(shí)現(xiàn)技術(shù)

《AR十二生肖》項(xiàng)目使用Unity引擎開發(fā)，采用C#語言進(jìn)行腳本編寫，通過Json文件和Text文本完成程序的數(shù)據(jù)存儲。首先使用PhotoShop軟件制作UI按鈕和圖標(biāo);其次運(yùn)用Unity自帶的UI組件實(shí)現(xiàn)UI界面布局;然后使用Maya將調(diào)整好的生肖模型以FBX格式導(dǎo)入U(xiǎn)nity中，完成模型和UI界面的交互;最后，通過添加Vuforia引擎以此來實(shí)現(xiàn)圖片的識別和場景的設(shè)置，然后插入所需要的生肖聲音素材等文件進(jìn)行完善。

AR項(xiàng)目實(shí)現(xiàn)必須制作AR識別圖。AR識別圖制作需要Vuforia引擎，以下是用來生成識別圖的Unity包制作過程。

1）首先在https：//developer.vuforia.com/注冊賬號。

2）注冊登錄進(jìn)入Develop頁面，找到Target Manager鏈接，展開后點(diǎn)擊Add Database創(chuàng)建Database文件，輸入命名后選擇Device完成創(chuàng)建。

3）進(jìn)入Database目錄，點(diǎn)擊已經(jīng)命名的Database文件，然后點(diǎn)擊Add Target按鈕添加Target圖片，選擇默認(rèn)Type圖片類型，上傳準(zhǔn)備好的識別圖素材，然后設(shè)置圖片寬度，再給識別圖進(jìn)行命名，完成設(shè)置后點(diǎn)擊Add按鈕完成Target圖片添加。

4）等待網(wǎng)頁加載完畢，識別圖生成完畢，選擇生成的識別圖，并將其導(dǎo)入U(xiǎn)nity。

5） 在Vuforia網(wǎng)站中打開Downloads鏈接，選擇SDK欄目下的Unity選項(xiàng)，下載高通開發(fā)包，下載完成后導(dǎo)入U(xiǎn)nity軟件中。

6）在Vuforia網(wǎng)站中打開Develop鏈接，通過License Manager創(chuàng)建License Key（許可證密匙）項(xiàng)目，然后命名許可密鑰，按照后續(xù)提示完成授權(quán)碼管理，回到Develop頁面授權(quán)碼狀態(tài)。

7）在Unity刪除Main Camera，搜索AR Camera，將其拖曳到Hierarchy下面，在Hierarchy層級面板中增加ImageTarget組件，修改ImageTarget參數(shù)信息，將Data Set修改成需要的識別圖的Unity包。

8）修改AR Camera參數(shù)信息，將需要的數(shù)據(jù)進(jìn)行勾選，并將之前的授權(quán)碼輸入。

9）將與識別圖對應(yīng)的模型拖入到ImageTarget下面，完成AR制作。

高通Vuforia主要通過圖片上注冊的識別點(diǎn)來進(jìn)行識別，所以圖片識別程度與圖片顏色沒有關(guān)系。識別效果取決于圖片的復(fù)雜程度，圖片越復(fù)雜識別點(diǎn)越多就越容易識別。可以通過在Vuforia網(wǎng)頁點(diǎn)擊上傳完成的圖片，能夠查看識別點(diǎn)的多少以及評分，圖片內(nèi)黃色小叉就是識別點(diǎn)，選擇圖片時(shí)右邊的評分就是能夠識別的程度，四星五星多數(shù)都可以立刻識別，如果圖片評分過低無法識別，可以通過重新截取上傳嘗試或者添加文字圖案等增加識別點(diǎn)。

《AR十二生肖》共需要十二個(gè)Unity識別包，將制作好的十二個(gè)模型和生肖圖片分別按照AR識別圖制作步驟依次完成，Unity識別包制作完成后，搭建項(xiàng)目UI交互框架，編寫C#腳本，從而實(shí)現(xiàn)虛實(shí)結(jié)合的增強(qiáng)現(xiàn)實(shí)效果。

4 項(xiàng)目詳細(xì)設(shè)計(jì)

經(jīng)由項(xiàng)目策劃，本項(xiàng)目需要實(shí)現(xiàn)程序初始化、AR識圖（程序設(shè)置、重新識別、生肖聲音、生肖動(dòng)畫、屏幕截取等子功能）、新手幫助、生肖查詢、數(shù)據(jù)存儲等功能。在此，以AR識圖這一核心功能的設(shè)計(jì)與實(shí)現(xiàn)為例，介紹項(xiàng)目的開發(fā)過程。

AR識圖功能是程序調(diào)用相機(jī)后通過AR識別圖立體呈現(xiàn)出三維虛擬生肖模型，也是該項(xiàng)目中最重要的一個(gè)功能。首先在這個(gè)界面需要設(shè)備端允許相機(jī)的調(diào)用，通過相機(jī)來掃描AR識別圖。AR識圖功能正常運(yùn)行需要Vuforia引擎環(huán)境的支撐。

類圖是描述類、接口以及他們之間關(guān)系的圖，是一種靜態(tài)模型，顯示了系統(tǒng)中各個(gè)類的靜態(tài)結(jié)構(gòu)，類圖根據(jù)系統(tǒng)中的類以及各個(gè)類的關(guān)系描述系統(tǒng)的靜態(tài)視圖，可以用某種面向?qū)ο蟮恼Z言實(shí)現(xiàn)類圖中的類[5]。關(guān)于AR識圖類的設(shè)計(jì)首先創(chuàng)建UIManager類實(shí)現(xiàn)對該界面的控制，將AR識圖功能界面調(diào)用的腳本名稱也命名為UIManager。首先在腳本中添加Start （）函數(shù)、Update（）函數(shù)、hudongButtonClick（）函數(shù)、ResLoadSceneButtonClick（）函數(shù)、PlayMusicButtoClick（）函數(shù)、SetUpPanelButtonCilck（）函數(shù)等實(shí)現(xiàn)主要互動(dòng)功能，ResLoadSceneButtonClick（）函數(shù)通過代碼調(diào)用識別模型圖片進(jìn)行重新識別， ResLoadSceneButtonClick（）函數(shù)通過代碼調(diào)用識別模型圖片進(jìn)行重新識別，以上函數(shù)主要實(shí)現(xiàn)了AR識圖功能與模型互動(dòng)的菜單按鈕的具體功能調(diào)用。

然后通過添加MenuPanelUpdateUIButtonClick（）函數(shù)、Show UITextNUll（）函數(shù)、OpenStartSceneButtinCLick（）函數(shù)、TextUIShowZO（）等函數(shù)來實(shí)現(xiàn)部分界面UI顯示和文字顯示功能，通過函數(shù)共同編譯實(shí)現(xiàn)AR識圖功能的設(shè)計(jì)。AR識圖類圖如下圖1所示。

AR識圖功能的活動(dòng)流程為：用戶允許程序調(diào)用相機(jī)后，通過點(diǎn)擊AR識圖按鈕進(jìn)入AR識圖界面，掃描識別圖片后，出現(xiàn)生肖模型和生肖介紹，然后通過點(diǎn)擊隱藏設(shè)置按鈕展開互動(dòng)界面。分別通過程序設(shè)置、重新識別、生肖聲音、生肖動(dòng)畫、屏幕截取、隱藏按鈕、生肖介紹等子功能按鈕實(shí)現(xiàn)對生肖模型的互動(dòng)和操作體驗(yàn)。

1）程序設(shè)置功能設(shè)計(jì)

這一子功能主要是對程序聲音大小的調(diào)節(jié)和返回程序初始化界面，用戶在該界面調(diào)節(jié)音量進(jìn)度條按鈕實(shí)現(xiàn)聲音大小的控制。用戶可以通過返回按鈕返回程序初始化界面。

2）重新識別功能設(shè)計(jì)

重新識別就是用戶進(jìn)入程序以后進(jìn)入AR識圖界面打開隱藏界面點(diǎn)擊重新識別按鈕實(shí)現(xiàn)的交互，當(dāng)點(diǎn)擊重新識別按鈕后程序調(diào)用相機(jī)識別，重新對圖片進(jìn)行掃描，方便與在交互中的操作和圖片更換時(shí)的識別。程序設(shè)計(jì)時(shí)，通過設(shè)置按鈕以及代碼進(jìn)行調(diào)用實(shí)現(xiàn)。

3）生肖聲音功能設(shè)計(jì)

在項(xiàng)目準(zhǔn)備階段對十二生肖不同的叫聲進(jìn)行信息收集整理，經(jīng)過處理后導(dǎo)入U(xiǎn)nity建立單獨(dú)文件夾進(jìn)行存放處理，生肖聲音是用戶通過AR識圖后出現(xiàn)生肖模型，然后點(diǎn)擊隱藏界面的生肖聲音按鈕，程序播放與掃描AR生肖模型對應(yīng)的動(dòng)物叫聲。

4）生肖動(dòng)畫功能設(shè)計(jì)

生肖動(dòng)畫主要是用戶與AR掃描生肖模型的交互，將之前做好的簡單模型動(dòng)畫從模型中通過FBX格式保存后，在Unity打開后進(jìn)行調(diào)試，處理以后保存在項(xiàng)目中，通過代碼實(shí)現(xiàn)調(diào)用。用戶掃描識別出現(xiàn)AR生肖模型后，可以點(diǎn)擊生肖動(dòng)畫播放按鈕，AR生肖模型會出現(xiàn)對應(yīng)動(dòng)畫和用戶交互，有利于孩子們對生肖模型內(nèi)容的記憶加深。

5）屏幕截取功能設(shè)計(jì)

屏幕截取主要通過編寫腳本實(shí)現(xiàn)對用戶使用程序交互時(shí)調(diào)用的界面內(nèi)容進(jìn)行實(shí)時(shí)截取，用戶可以通過這個(gè)功能實(shí)現(xiàn)和模型合影拍照以及保存需求場景方便用戶留念查看內(nèi)容。

6）生肖介紹功能設(shè)計(jì)

在一個(gè)程序的實(shí)現(xiàn)中，關(guān)于對應(yīng)文本的存儲起著至關(guān)重要的作用，文本的存儲關(guān)乎程序運(yùn)行的文字資源等是否正常顯示，正常使用。這個(gè)程序主要通過運(yùn)用Json、Text文件等實(shí)現(xiàn)程序的文字讀取和存儲。

AR識圖功能的按鈕文字都是通過Text文件進(jìn)行存儲，極大地幫助了用戶直觀了解程序，減小程序儲存占用空間。

程序?qū)τ贏R十二生肖文字的介紹是采用Json格式進(jìn)行存儲，獨(dú)立于編程語言導(dǎo)入U(xiǎn)nity實(shí)現(xiàn)數(shù)據(jù)信息的存儲，里邊詳細(xì)介紹了項(xiàng)目需要的文字信息，方便了程序的調(diào)用。

5 項(xiàng)目詳細(xì)實(shí)現(xiàn)

在UIManager腳本文件中實(shí)現(xiàn)項(xiàng)目菜單，在程序運(yùn)行時(shí)通過菜單按鈕調(diào)用MenuPanelUpdateUIButtonClick（）函數(shù)完成菜單按鈕的展開與隱藏，當(dāng)界面掃描模型識別圖時(shí)，通過調(diào)用TextUIShowZO（）函數(shù)和TextUIShowNO（）完成實(shí)現(xiàn)，在函數(shù)里對stayte.text和UpText.text進(jìn)行賦值，完成生肖識別圖掃描時(shí)的顯示和關(guān)閉。如圖2所示，通過掃描兔子的AR識別圖，在真實(shí)空間中可出現(xiàn)兔子的虛擬模型，通過UI界面上的程序設(shè)置、重新識別、生肖聲音、屏幕截取、生肖動(dòng)畫等按鈕，學(xué)習(xí)AR十二生肖的圖文、聲音、動(dòng)畫等科普知識。

1）程序設(shè)置功能的實(shí)現(xiàn)

通過SetUpPanelSlider類和SetUpPanel類實(shí)現(xiàn)對程序設(shè)置子功能的調(diào)用。首先在Start（）函數(shù)中為SetUpPanel.blocksRaycasts賦值為false，當(dāng)點(diǎn)擊程序設(shè)置按鈕時(shí)調(diào)用SetUpPanelButtonCilck（）函數(shù)實(shí)現(xiàn)跳轉(zhuǎn)界面的轉(zhuǎn)換。當(dāng)左右移動(dòng)音量進(jìn)度條進(jìn)行播放時(shí)，通過調(diào)用SetAudioSliderClick（）函數(shù)完成音量聲音大小變化的實(shí)現(xiàn)。

2）重新識別功能的實(shí)現(xiàn)

在UIManager腳本中完成，通過編譯ResLoadSceneButtonClick（）函數(shù)完成對識別功能的重新加載，在函數(shù)中通過代碼編譯SceneManager實(shí)現(xiàn)對掃描識別圖片的重新識別。

3）生肖聲音功能的實(shí)現(xiàn)

首先進(jìn)行素材收集，然后使用剪輯軟件對聲音進(jìn)行處理剪輯，完成后保存文件夾，在建立好的Unity項(xiàng)目中Assets下面新建Resources將十二生肖音頻對應(yīng)導(dǎo)入處理。在UIManager中添加PlayMusicButtoClick（）函數(shù)，在函數(shù)里對生肖聲音播放進(jìn)行調(diào)用。

4）生肖動(dòng)畫功能的實(shí)現(xiàn)

生肖動(dòng)畫的制作首先通過Maya軟件打開之前綁定骨骼的模型，然后通過對創(chuàng)建好的骨骼，找到節(jié)點(diǎn)，通過添加設(shè)置動(dòng)畫關(guān)鍵幀，調(diào)節(jié)中心點(diǎn)位置，調(diào)節(jié)完成后在軟件內(nèi)檢測動(dòng)畫播放是否正常，動(dòng)畫循環(huán)通過對之前制作好的動(dòng)作循環(huán)復(fù)制即可，制作完成后通過導(dǎo)出保存文件。將保存好的動(dòng)畫文件導(dǎo)入U(xiǎn)nity，和十二生肖模型進(jìn)行關(guān)聯(lián)。在UIManager腳本中添加OpenStartSceneButtonCLick（）函數(shù)，在函數(shù)中添加SceneManager代碼，調(diào)用識別圖對應(yīng)的生肖動(dòng)畫。

5）屏幕截取功能的實(shí)現(xiàn)

屏幕截取主要通過編寫腳本實(shí)現(xiàn)對用戶使用程序交互時(shí)調(diào)用的界面內(nèi)容進(jìn)行實(shí)時(shí)截取，在UIManager腳本中通過GameShotButtonClick（）函數(shù)對UIShowText.text賦予命名，實(shí)現(xiàn)對實(shí)時(shí)界面進(jìn)行截取。

6 結(jié)束語

《AR十二生肖》是一款將十二生肖民俗文化運(yùn)用增強(qiáng)現(xiàn)實(shí)技術(shù)制作的科普應(yīng)用程序。項(xiàng)目實(shí)現(xiàn)了程序初始化、AR識圖、生肖查詢、新手幫助等功能，用戶通過AR識圖功能，可以學(xué)習(xí)AR十二生肖的圖文、聲音、動(dòng)畫等科普知識。

參考文獻(xiàn)：

[1] 陳向東，萬悅.增強(qiáng)現(xiàn)實(shí)教育游戲的開發(fā)與應(yīng)用——以“泡泡星球”為例[J].中國電化教育，2017（3）：24-30.

[2] 姚甜.AR技術(shù)在教育領(lǐng)域的應(yīng)用[J].無線互聯(lián)科技，2020（4）：158-159.

[3] 段文婷.學(xué)齡前兒童動(dòng)畫片理論研究與應(yīng)用[D].哈爾濱：哈爾濱工程大學(xué)，2013.

[4] 段向瓊.幼兒園 5-6 歲兒童動(dòng)畫片喜好現(xiàn)狀研究[D].西安：陜西師范大學(xué)，2008.

[5] 李強(qiáng)，陳旭.信用卡管理系統(tǒng)的UML建模研究[J].電腦知識與技術(shù)，2014，10（22）：5217-5219.

【通聯(lián)編輯：謝媛媛】