如何較為優雅地實現新手引導功能？
- 2019 年 11 月 5 日
- 筆記
早期的項目中曉衡遇到遊戲終於要完成了，辛苦了一陣滿以為可以稍微放鬆一下了，但策劃、運營要求，增加一個他們認為非常「簡單」且重要的功能：新手引導。
回想起當年，接到這個任務時的感覺是手腳冒汗、天暈地暗、日月無光，遊戲代碼本來就千瘡面孔，邏輯錯綜複雜，根本不知道該怎麼下手？更困難的是，遊戲本身功能和需求還不穩定，老闆隨便一個想法可能就會被改、改、改…，我該怎麼辦？
在這種情艱難的情況下一定要，需要保持冷靜，在痛定思痛之後，我開始了引導功能的開發，在做的過程中不斷積累，編寫了一套配置式、可編程的引導框架，然後交給其他開發人員或策劃人員做具體的引導內容，真的是：「殺不死你的會使你更強大」。
實現新手引導的困難
通常實現新手引導的困難在於，它與當前需求、功能密切相關，而且稍有不甚連正常流程都走不通，下面一起看看新手引導到底有那些痛點。
開發中的痛點
- 需要在正常流程中插入引導代碼，干擾流程；
- 引導代碼的增加會影響原有代碼邏輯，增加維護難和成本；
- 界面或需求的變化會導致引導功能大幅修改，甚至重新製作；
- 手指提示對應的矩形區定位麻煩，不能簡單使用固定的位置和矩形大小；
- 編寫引導的代碼也很困難，需要策劃—程序之間高度配合。
期望的編程體驗
在了解到傳統的引導製作過程中的難點與弊端後，一直在思考沒有更好的實現方式，我心中的引導功能的編程方式希望有以下幾點：
- 引導功能代碼，不能混入正常遊戲邏輯代碼中，後患無窮，應盡量分離；（難以忍受優雅的代碼被無情的打亂，更難忍受糟糕的代碼被弄的支離破碎）
- 界面只發生簡單的UI位移、Size大小、節點層次的調整，不需要修改具引導代碼；
- 定位UI指引矩形區域應儘可能簡單，能自適應不同的屏幕尺寸；
- 最好能做到策劃人員都可以來製作部分流程引導；
- 在引導需求明確、遊戲功能正常的情況下，製作一個常規的引導步驟應該非常快捷。
下面是我使用Cocos Creator 官方 demo-ui 工程上嵌入的引導案例演示：
demo體驗地址：
http://game.ixuexie.com/godGuide
這裡有一個視頻演示：
https://www.bilibili.com/video/av60001770/
框架要點
演示中的引導操作，是使用下面JSON配置進行控制：
module.exports = { name: '進入商店', debug: true, autorun: true, steps: [ { desc: '文本提示', command: { cmd: 'text', args: ['歡迎體驗Shawn的新手引導框架', '本案例演示：n1.文本提示指令n2.手指定位指令n3.自動執行引導n4.點擊操作錄像', '首先，請點擊首頁按鈕'] }, }, { desc: '點擊主界面主頁按鈕', command: { cmd: 'finger', args: 'Home > main_btns > btn_home'}, delayTime: 0.5, }, { desc: '文本提示', command: { cmd: 'text', args: '點擊主界面設置按鈕' } }, { desc: '點擊主界面設置按鈕', command: { cmd: 'finger', args: 'Home > main_btns > btn_setting'}, }, { desc: '文本提示', command: { cmd: 'text', args: '點擊主界面商店按鈕' } }, }配置中的重點是 steps 數組項目，其中的 desc 是引導步驟的描述，主要用於調試，command是引導指令，這裡實現的是一個手指指示指令：finger, 後面的args是指令參數，藉助CSS中的選擇器概念，我這裡簡單實現了一個節點獲取的方法，稱之為：定位器。
定位器
點定位器的概念，其實它非常簡單，如下圖所示：
你可能會想到，引擎提供的 cc.find 就搞定，代碼如下：
cc.find('Canvas/Home/lower/main_btns/layout/btn_home')節點路徑字符串可以精確定位到 btn_home 節點，但在實際使用中時會感覺很繁瑣：
- 字符串太長，容易出錯；
- 節點名字、層級變化，節點路徑字符串就失效了，容易被誤傷。
為了使路徑表達更簡潔可靠，筆者引入了兩個定位符號：
/: 右斜杠，代表1級子節點（與cc.find相同） >: 大於符號，表示1~n級子節點可以將上面btn_home節點的定位符改為
godGuide.find('Canvas > btn_home');如果我們默認從Canvas節點開始檢索，也可以直接寫成下面這樣：
godGuide.find('btn_home');這樣將從 Canvas 節點一層層開始遍歷，想提高檢索節點的效率可以改為：
godGuide.find('Home > main_btns > btn_home');如果場景中有同名節點，也可以使用 '>'符號解決，但同一層級不能有同名節點（如果你需要檢查的話）。
自動引導
引導的測試工作效率低下，既然有了可配置的引導，能否讓它自動去執行呢？看下面視頻：
https://v.qq.com/x/page/v3017l51xep.html
曉衡最早只是在瀏覽器上實現了鼠標的點擊模擬，後來擴展到了原生App上也可以使用。 自動引導，可以方便對引導流程的測試和驗證。
流程錄製
引導的核心是獲取目標節點，我們是通過手寫節點定位器（一種簡化的節點路徑表達方式）獲取節點。如果實現一個功能，記錄下我們點擊的節點路徑，是否可以實現自動生成引導流程呢？然後再讓它自動播放出來？
結語
新手引導框架已經開源，並且支持最新版本的 Cocos Creator 2.2.0 下，Github倉庫地址獻上：
https://github.com/ShawnZhang2015/GodGuide
原創不易，如果覺得有幫助，請點個贊吧！
