記錄完整項目的制作，借鑒了大佬@被代碼折磨的狗子 “unity創建《找不同》游戲 圖片編輯器”一文。
（建議通過目錄閱讀本文哦~）
項目演示：
幼兒英語教輔
幼兒英語繪本教學游戲整體架構
游戲開發中設計的整體框架
游戲的總體功能框架如下圖所示。
????????主要先進入字母選擇界面，選擇一個需要學習的字母，然后進入到對應字母的選擇模塊界面，學生們先通過其中的視頻了解一些單詞和故事情節，然后老師帶領學生體驗各個游戲模塊，自主決定教學順序。
?????????以字母a為例，視頻中介紹了小螞蟻（ant）Andy喜歡藝術（art），在畫布上畫蘋果（apple），在畫布上畫宇航員（astronaut），在畫布上畫自己（Andy?ant）的故事情節。找不同、畫畫、測試、迷宮、唱歌的游戲就圍繞這個主題展開。如下圖所示，就是字母a的紙質繪本。
? 目的：通過Unity3D引擎、C#腳本編程、游戲化設計，制作出更加有趣、有及時反饋的教學游戲和承載繪本內容、視頻的平臺。
幼兒英語繪本教學游戲的具體設計與實現
選擇字母界面導航的設計與實現
選擇字母界面與總體功能設計
實現的是通過不同的按鈕點擊進入不同的界面，界面如下圖所示。
通過Grid?Layout?Group組件實現每一行按鈕的與左右、上下的間距（Space）設置和按鈕的大小（Cell?Size）設置，然后通過通過Scroll?Rect組件去控制所有按鈕的所在區域，從而實現了規整的布局，如下圖所示。
選擇進入功能實現
實現的功能是通過UI素材放在Unity3D資源目錄（Resource）下，動態生成各個按鈕的圖片，點擊按鈕后進入各自字母主題的界面。
新建CustomsPassData類存儲每個按鈕的圖片，按鈕圖片如下圖所示，通過ScriptableObject類來數據的永久儲存，創建DataConfig，如下圖所示，在Unity3D的主界面進行賦值的操作。
通過設計對應的數據類型來存儲圖片和相關數據（區域位置、大小以及模式參數等），代碼設計如下圖所示。
同時設計按鈕的腳本CustomsPassItem類中的InitData（）函數用于生成按鈕的數據（包括如何跳轉、代表哪個字母），代碼設計如下圖所示。
在SelectCustomsPassPanel（選擇字母腳本）中調用CustomsPassItem類的InitData（）函數，同時應用創建的DataConfig中存儲的數據（在Unity3D平臺的開發界面進行賦值）、這樣就實現了自動獲取按鈕圖片和字母內容，動態生成排列好的按鈕，當按鈕按下時就調用OnClick（）函數，進入下一個界面（選擇模塊界面），代碼設計如下圖所示。
選擇模塊界面導航的設計與實現
選擇模塊界面和總體功能設計
主要有5個游戲模塊（點擊進入不同的游戲）、視頻模塊（觀看預設的教學故事）和一個標題（顯示當前學習的字母和主題），界面設計如下圖所示。
也是通過Grid?Layout?Group組件實現的規整分布，如下圖所示。
各種游戲進入按鈕功能的實現
實現的功能是當點擊按鈕時，執行類似于顯示界面、打開音樂、獲取對應內容的程序。主要是通過為每一個按鈕綁定一個事件監聽來實現的，如下圖所示。
同時在每個監聽事件里執行類似于顯示界面、打開音樂、獲取對應內容的程序，代碼設計如下圖所示。
視頻播放器內容更新和播放功能實現
實現的功能有可以根據所選字母主題動態更新視頻內容，然后實現了基礎的視頻放大縮小、播放、暫停、從頭觀看的功能。動態更新視頻內容的功能實現主要是設計類似于文章前面提到的dataconfig，設計一個存儲視頻封面、視頻播放內容等元素的類（videoandbookData），代碼設計如下圖所示。
新建videoandbookData類存儲每個按鈕的圖片，通過ScriptableObject類來數據的永久儲存，創建videoandbookDataconfig，在Unity3D平臺的開發界面中填入數據，如下圖所示。
同時選擇字母界面的各個字母按鈕上了掛載監聽事件（掛載了CustomsPassItem腳本,使用onClick（）函數進行監聽），當按鈕被按下時，就會根據按鈕的下標來生成對應的播放器內容，代碼設計如下圖所示。
再通過InitvideoandbookData（）函數，動態修改播放的視頻和視頻封面等元素，代碼設計如下圖所示。
而播放、暫停、從頭開始播放的功能，是通過videoPlayer腳本中設計的PlayOnClick()、pause()、finishOnClick()函數去實現的。代碼設計如圖所示。
最大化/最小化功能設計是通過設計image_Controller腳本，調用DG.Tweening動畫插件去實現放大縮小的界面效果，核心代碼如圖所示。
最后在界面中給四個界面中的按鈕（GameObject父物體下的4個子物體）設置按下的監聽事件，就能實現相應的功能。
找不同界面導航的設計與實現
找不同界面和總體功能設計
設計了兩張模式，類似于對比兩張圖的不同點或尋找一張圖片中不同的元素，通過鼠標點擊，可以選擇，同時設計了倒計時的機制，讓該過程更具趣味性，界面設計如圖所示。
找不同界面可視化編輯器設計
實現的功能如下：
①在對比兩張圖片不同處的游戲機制中，可以選擇添加節點，增加需要找出的不同數量，解決了數量不同也可以整體設計的效果。同時對每一個不同點（Element）可以設置它在畫布中的X、Y坐標和長度與寬度，如下圖所示。
②針對在一張圖片中找不同的游戲機制中，也是可以添加節點和設置節點的坐標和大小，如下圖所示。
找不同（find?difference）界面比較復雜，有對比兩張圖片找出不同（同時不同處的數量也有區別）的模式，也有在一張圖片里找出相同或者不同的元素（一個或者多個）的模式，因此需要設計一個整體的架構，能做到可視化實現每個字母對應找不同界面的資源快速替換，同時規定它的游戲機制。
設計CustomsPassDataConfigEditer腳本，設計可視化編譯器，核心界面設計代碼如下圖所示：
CustomsPassDataConfigEditer核心代碼
?編輯器界面設計代碼
同時在數據初始化時，設計兩行代碼，第一行代碼實現了對原本資源中數據讀取，同時在數據初始化時調用SelectCustomsPassData（）函數，如下圖程序所示。
SelectCustomsPassData（）函數設計如下圖所示，主要是修改當前選擇的關卡，并獲取數據進行展示，主要是針對每一個字母對應的圖片和模式進行修改和調整，其中在代碼的最后調用了CreateAreaItem( )函數，通過CreateAreaItem( )函數進行具體數據的修改，例如每一個找不同節點的X、Y坐標和長度與寬度。
同時在之前提到的DataConfig類中，選擇MainPattern模式，可以決定它的游戲機制是在一張圖片中找不同還是兩張圖片對比找不同，如下圖所示。
找不同游戲機制的具體實現
實現的主要功能，當選擇對位置時，就會顯示出對應的紅框，把不同處框出來，如果尋找錯誤，就會有錯誤的提示，在規定時間內找到要求數量的不同點才算勝利。
核心代碼設計如下圖所示，主要是通過InitData()函數生成找不同的點位，同時在按鈕上掛載ByClicking()監聽事件，判斷是否找對了，然后通過FindAreaItem()函數，在兩個圖片上生成紅色的框框。
?InitData（）和ByClicking（）代碼設計
?FindAreaItem（）代碼設計
畫畫界面導航的設計與實現
畫畫界面和總體功能設計
界面主要分為選色區和繪畫區，可以在選色區選擇畫筆的顏色，然后可以填充到某個封閉的白色區域，自己DIY一個卡通角色，界面如下圖所示。
主要是在選區色塊（Color）上設置監聽事件，當按下時就調用腳本去轉化畫筆（Brush）的顏色，游戲對象屬性如下圖所示。
繪畫區功能實現
? 繪畫功能的實現主要是通過根據畫筆現在的顏色改變每個區域圖片的渲染器顏色實現的，設計的區域如圖所示。
空白區域設計展示案例
測試界面導航的設計與實現
測試界面和總體功能的設計
????????設計對應字母主題的題目（是否包含這個字母的發音），涉及到的圖片都是在對應的字母故事視頻出現過的，根據題干選擇對應的圖片，會有對應的反饋，但每道題的選項數量和正確選項數量都可能會有不一致，界面如下圖所示。
測試界面可視化編輯器設計
????????實現的功能大致是選擇對應的關卡，修改題目的題干、選項的圖片和發音以及正確選項的下標，編輯器設計如下圖所示。
編譯器界面設計代碼跟找不同界面編輯器的代碼有些類似，也是涉及到資源的動態讀取、數據的展示、關卡的修改等，相關機制核心代碼如下圖所示。
然后利用TestPassDataConfig類的對象中實現資源動態生成的效果，存儲如下圖所示。
功能類似于上文提及的DataConfig類，主要是通過ScriptableObject來實現數據的永久存儲，核心代碼如下圖所示。
測試具體功能實現
實現的功能是點擊對應的按鈕有相應的反饋（正確或者錯誤、發出什么讀音、播放什么樣的動畫），核心代碼如下圖所示。
迷宮游戲界面導航的設計與實現
迷宮游戲界面和總體功能的設計
????????該界面主要是由主角、字母和終點、地圖四個元素所構成，游戲模式是拖動主角走過迷宮達到終點，在教學過程中會在每次碰到字母時，帶領同學們一起去跟讀，每個字母對應的迷宮游戲界面差別比較大，不同字母界面設計如下圖所示。
迷宮游戲界面的具體功能實現
①控制主角移動，當人物被拖動且不接觸迷宮邊緣時，就可以運動，主要是通過檢測是否長按和如圖5-38所示的MoveTo()函數進行控制的。
②控制主角與字母、障礙物、終點的交互，通過給不同游戲對象打上標簽（tag）來區別主角是跟什么對象發生了碰撞，從而去調用對應的事件，核心代碼如下圖所示。
唱歌界面導航的設計與實現
唱歌界面和總體功能的設計
主要就是顯示對應字母的歌曲內容和播放相應的音頻，界面設計如下圖所示。
唱歌界面編輯器的設計
主要包括了兩種圖片、文字的替換，ChantDataConfig類設計如下圖所示。
也是基于ScriptableObject實現數據的永久存儲，同時包括文字、圖片、間距的參數，核心代碼如下圖所示。
唱歌界面功能的具體實現
主要就是通過getIndex()函數獲取當前字母主題的下標，然后通過CreatContent()函數根據下標設置相應的資源，給按鈕掛載播放音樂的事件（PlayMusic（）函數），核心代碼如下圖所示。
匹配單詞界面導航的設計與實現
匹配單詞界面和總體功能設計
?這個模塊的作用主要體現在教學過程中，老師可以讓學生先去找對應單詞的東西在圖片的哪個位置，然后老師點擊具體的單詞，所對應東西的顏色就加深，如下圖5-44所示，tea單詞被點擊，圖片中杯子顏色被加深。
匹配單詞界面具體功能實現
主要就是通過點擊左側的單詞按鈕，就能產生對應的動畫效果，是通過在按鈕上掛載監聽事件、調用動畫插件Dotween來實現的，核心代碼如圖所示。
界面適配率的設計
為了滿足適配不同電腦的分辨率不同，需要讓界面有自適應的功能。需要實時獲取運行這個軟件所在電腦的分辨率，然后保持界面原有的長寬比，進行總體大小的放大或者縮小。核心代碼如圖5-46所示：
屏幕大小調整的代碼設計
希望這個項目的思路對大家有所幫助~
)
