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

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

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

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

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

需要在正常流程中插入引導**，干擾流程；

引導**的增加會影響原有**邏輯，增加維護難和成本；

介面或需求的變化會導致引導功能大幅修改，甚至重新製作；

手指提示對應的矩形區定位麻煩，不能簡單使用固定的位置和矩形大小；

編寫引導的**也很困難，需要策劃—程式之間高度配合。

在了解到傳統的引導製作過程中的難點與弊端後，一直在思考沒有更好的實現方式，我心中的引導功能的程式設計方式希望有以下幾點：

引導功能**，不能混入正常遊戲邏輯**中，後患無窮，應盡量分離；（難以忍受優雅的**被無情的打亂，更難忍受糟糕的**被弄的支離破碎）

介面只發生簡單的ui位移、size大小、節點層次的調整，不需要修改具引導**；

定位ui指引矩形區域應盡可能簡單，能自適應不同的螢幕尺寸；

最好能做到策劃人員都可以來製作部分流程引導；

在引導需求明確、遊戲功能正常的情況下，製作乙個常規的引導步驟應該非常快捷。

下面是我使用cocos creator 官方 demo-ui 工程上嵌入的引導案例演示：

演示中的引導操作，是使用下面json配置進行控制：

module.exports = ,},,
delaytime: 0.5,
},},,},
},}

配置中的重點是 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');

如果場景中有同名節點，也可以使用'>'符號解決，但同一層級不能有同名節點（如果你需要檢查的話）。

新手引導框架已經開源，並且支援最新版本的 cocos creator 2.2.0 下，github倉庫位址獻上：

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