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

彭偉國 李鵬翔

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

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

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

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

1 背景

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

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

2 項目策劃

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

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

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

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

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

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

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

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

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

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

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

6）在Vuforia網(wǎng)站中打開Develop鏈接，通過License Manager創(chuàng)建License Key（許可證密匙）項目，然后命名許可密鑰，按照后續(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ù)進行勾選，并將之前的授權(quán)碼輸入。

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

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

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

4 項目詳細設(shè)計

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

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

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

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

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

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

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

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

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

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

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

4）生肖動畫功能設(shè)計

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

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

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

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

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

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

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

5 項目詳細實現(xiàn)

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

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

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

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

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

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

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

4）生肖動畫功能的實現(xiàn)

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

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

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

6 結(jié)束語

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

參考文獻：

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

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

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

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

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

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