基于Unity的《AR十二生肖》的設計與實現

彭偉國 李鵬翔

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

關鍵詞：增強現實;十二生肖;科普應用;AR識圖;Vuforia引擎

中圖分類號：TP37? ? ? 文獻標識碼：A

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

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）首先在https：//developer.vuforia.com/注冊賬號。

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

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

4）等待網頁加載完畢，識別圖生成完畢，選擇生成的識別圖，并將其導入Unity。

5） 在Vuforia網站中打開Downloads鏈接，選擇SDK欄目下的Unity選項，下載高通開發包，下載完成后導入Unity軟件中。

6）在Vuforia網站中打開Develop鏈接，通過License Manager創建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識圖類的設計首先創建UIManager類實現對該界面的控制，將AR識圖功能界面調用的腳本名稱也命名為UIManager。首先在腳本中添加Start （）函數、Update（）函數、hudongButtonClick（）函數、ResLoadSceneButtonClick（）函數、PlayMusicButtoClick（）函數、SetUpPanelButtonCilck（）函數等實現主要互動功能，ResLoadSceneButtonClick（）函數通過代碼調用識別模型圖片進行重新識別， ResLoadSceneButtonClick（）函數通過代碼調用識別模型圖片進行重新識別，以上函數主要實現了AR識圖功能與模型互動的菜單按鈕的具體功能調用。

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

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實現數據信息的存儲，里邊詳細介紹了項目需要的文字信息，方便了程序的調用。

5 項目詳細實現

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

1）程序設置功能的實現

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

2）重新識別功能的實現

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

3）生肖聲音功能的實現

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

4）生肖動畫功能的實現

生肖動畫的制作首先通過Maya軟件打開之前綁定骨骼的模型，然后通過對創建好的骨骼，找到節點，通過添加設置動畫關鍵幀，調節中心點位置，調節完成后在軟件內檢測動畫播放是否正常，動畫循環通過對之前制作好的動作循環復制即可，制作完成后通過導出保存文件。將保存好的動畫文件導入Unity，和十二生肖模型進行關聯。在UIManager腳本中添加OpenStartSceneButtonCLick（）函數，在函數中添加SceneManager代碼，調用識別圖對應的生肖動畫。

5）屏幕截取功能的實現

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

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.

【通聯編輯：謝媛媛】