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

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

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

实现新手引导的困难

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

开发中的痛点

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

期望的编程体验

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

引导功能代码，不能混入正常游戏逻辑代码中，后患无穷，应尽量分离；（难以忍受优雅的代码被无情的打乱，更难忍受糟糕的代码被弄的支离破碎）
界面只发生简单的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

原创不易，如果觉得有帮助，请点个赞吧！

如何较为优雅地实现新手引导功能？相关推荐

GitChat新作，如何较为优雅地实现新手引导功能！
细心的你有没有发现公众号最近推文变得密集了,Shawn上半年加入了一个组织,又历史性地进入了新的轮回:低迷.迟钝.郁郁寡欢...,如果你看过我的<遇见未知的自己,奎特尔成长之路!> 文章的 ...
新手引导功能的四种姿势
原文地址:新手引导功能的四种姿势原文作者:清夜温馨提示:如果你对文章有歧义或者建议,欢迎来 Github 里提 PR 或者 Issue 一起维护文章- 文章著作权归原文作者所有,转载请注明出处哦- ...
如何实现前端新手引导功能？
大家好,我是若川.我持续组织了近一年的源码共读活动,感兴趣的可以点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架 ...
Egret 使用反向遮罩做新手引导功能
新手引导最复杂的部分就是要将部分东西显示出来,其他部分遮挡,在cocos2d-x中使用多个圆,半圆,方块等组件拼出要显示的部分,egret中有一个很方便的功能能实现这个效果. 1.新建egret工程, ...
用java做个新手引导功能,Unity3D新手引导开发手记
最近开始接手新手引导的开发,记录下这块相关的心得首先客户端是Unity,在接手前,前面的同学已经初步完成了新手引导框架的搭建,这套框架比较简单,有优点也有缺点,稍后一一点评我们的新手引导是由一个个 ...
「GitChat新手引导」获奖名单公布，更多引导细节！
到目前为止,已经有65位伙伴预订,还差15份订阅,就快大功告成完成!<如何较为优雅地实现新手引导功能>文稿已经完成95%,Demo代码还需进行一步完善. 昨天还收到一名来自己VIPKID的 ...
Creator星球教程文章分类导航
公众号最近有不少新伙伴加入,对公众号的教程文件.案例资源.视频内容等不太熟悉.通过后台和个人微信与大家交流,获得了非常重要的反馈,Shawn将从2017年9月公众号开张时的文章.教程.视频做了一个归类 ...
微信小游戏云开发 | 72小时极限编程体验
七夕之夜,Shawn 的 "消消大冒险❤七夕特别版" 算是蹭上一个热点,经过这两天的实践,答出了一个结论:个人开发者靠朋友圈.公众号.微信亲友群.微信技术群.微信小游戏互点群.QQ ...
GLSL ES 语言—矢量矩阵运算
变量如下定义: vec3 v3a, v3b, v3c; float t; 矢量和浮点数的运算 v3b = v3a + f; 其效果是为矢量的每一个分量加上浮点数f,与下面代码相同: v3b.x = v ...

如何较为优雅地实现新手引导功能？