如何較爲優雅地實現新手引導功能？

早期的項目中曉衡遇到遊戲終於要完成了，辛苦了一陣滿覺得能夠稍微放鬆一下了，但策劃、運營要求，增長一個他們認爲很是「簡單」且重要的功能：新手引導。

回想起當年，接到這個任務時的感受是手腳冒汗、天暈地暗、日月無光，遊戲代碼原本就千瘡面孔，邏輯錯綜複雜，根本不知道該怎麼下手？更困難的是，遊戲自己功能和需求還不穩定，老闆隨便一個想法可能就會被改、改、改...，我該怎麼辦？

在這種情艱難的狀況下必定要，須要保持冷靜，在痛定思痛以後，我開始了引導功能的開發，在作的過程當中不斷積累，編寫了一套配置式、可編程的引導框架，而後交給其餘開發人員或策劃人員作具體的引導內容，真的是：「殺不死你的會使你更強大」。

實現新手引導的困難

一般實現新手引導的困難在於，它與當前需求、功能密切相關，並且稍有不甚連正常流程都走不通，下面一塊兒看看新手引導到底有那些痛點。

開發中的痛點

1. 須要在正常流程中插入引導代碼，干擾流程；
2. 引導代碼的增長會影響原有代碼邏輯，增長維護難和成本；
3. 界面或需求的變化會致使引導功能大幅修改，甚至從新制做；
4. 手指提示對應的矩形區定位麻煩，不能簡單使用固定的位置和矩形大小；
5. 編寫引導的代碼也很困難，須要策劃—程序之間高度配合。

指望的編程體驗

在瞭解到傳統的引導製做過程當中的難點與弊端後，一直在思考沒有更好的實現方式，我心中的引導功能的編程方式但願有如下幾點：

1. 引導功能代碼，不能混入正常遊戲邏輯代碼中，後患無窮，應儘可能分離；（難以忍受優雅的代碼被無情的打亂，更難忍受糟糕的代碼被弄的支離破碎）
2. 界面只發生簡單的UI位移、Size大小、節點層次的調整，不須要修改具引導代碼；
3. 定位UI指引矩形區域應儘量簡單，能自適應不一樣的屏幕尺寸；
4. 最好能作到策劃人員均可以來製做部分流程引導；
5. 在引導需求明確、遊戲功能正常的狀況下，製做一個常規的引導步驟應該很是快捷。

下面是我使用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. 字符串太長，容易出錯；
2. 節點名字、層級變化，節點路徑字符串就失效了，容易被誤傷。

爲了使路徑表達更簡潔可靠，筆者引入了兩個定位符號：

/: 右斜槓，表明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

原創不易，若是以爲有幫助，請點個贊吧！