游戏中，如何较为优雅地实现新手引导功能？（引导装置）

早期的项目中晓衡遇到游戏终于要完成了，辛苦了一阵满以为可以稍微放松一下了，但策划、运营要求，增加一个他们认为非常“简单”且重要的功能：新手引导。

回想起当年，接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光，游戏代码本来就千疮面孔，逻辑错综复杂，根本不知道该怎么下手？更困难的是，游戏本身功能和需求还不稳定，老板随便一个想法可能就会被改、改、改...，我该怎么办？

在这种情艰难的情况下一定要，需要保持冷静，在痛定思痛之后，我开始了引导功能的开发，在做的过程中不断积累，编写了一套配置式、可编程的引导框架，然后交给其他开发人员或策划人员做具体的引导内容，真的是：“*不死你的会使你更强大”。

实现新手引导的困难

通常实现新手引导的困难在于，它与当前需求、功能密切相关，而且稍有不甚连正常流程都走不通，下面一起看看新手引导到底有那些痛点。

开发中的痛点

需要在正常流程中插入引导代码，干扰流程；
引导代码的增加会影响原有代码逻辑，增加维护难和成本；
界面或需求的变化会导致引导功能大幅修改，甚至重新制作；
手指提示对应的矩形区定位麻烦，不能简单使用固定的位置和矩形大小；
编写引导的代码也很困难，需要策划—程序之间高度配合。

期望的编程体验

在了解到传统的引导制作过程中的难点与弊端后，一直在思考没有更好的实现方式，我心中的引导功能的编程方式希望有以下几点：

引导功能代码，不能混入正常游戏逻辑代码中，后患无穷，应尽量分离；（难以忍受优雅的代码被无情的打乱，更难忍受糟糕的代码被弄的支离破碎）
界面只发生简单的UI位移、Size大小、节点层次的调整，不需要修改具引导代码；
定位UI指引矩形区域应尽可能简单，能自适应不同的屏幕尺寸；
最好能做到策划人员都可以来制作部分流程引导；
在引导需求明确、游戏功能正常的情况下，制作一个常规的引导步骤应该非常快捷。

框架要点

视频演示中的引导操作，是使用下面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中的选择器概念，我这里简单实现了一个节点获取的方法，称之为：定位器。

定位器

点定位器的概念，其实它非常简单，如下图所示：