早期的專案中曉衡遇到遊戲終於要完成了，辛苦了一陣滿以為可以稍微放鬆一下了，但策劃、運營要求，增加一個他們認為非常“簡單”且重要的功能：新手引導。

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

在這種情艱難的情況下一定要，需要保持冷靜，在痛定思痛之後，我開始了引導功能的開發，在做的過程中不斷積累，編寫了一套配置式、可程式設計的引導框架，然後交給其他開發人員或策劃人員做具體的引導內容，真的是：“殺不死你的會使你更強大”。

實現新手引導的困難

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

開發中的痛點

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

原創不易，如果覺得有幫助，請點個贊吧！

相關推薦