如何较为优雅地实现新手引导功能？
细心的你有没有发现公众号最近推文变得密集了，Shawn上半年加入了一个组织，又历史性地进入了新的轮回：低迷、迟钝、郁郁寡欢...，如果你看我这篇文章的伙伴估计知道，我的抑郁症状又周期性的发作了。在6月下旬，因为一些事情和变故，Shawn又决定离开组织，同去年一样同样是7月份，又要开始踏上向独自的冒险旅程。
自从下定决心的一瞬间开始，之前的束缚在慢慢被释放，其实我早已发现写公众号、帮助大家解决问题，是我缓解症状的良药，于是不计成本地在公众号上投入，近斯更是像被打了鸡血一样，早上 5:30 准时起床，做计划、收集、整理、撰写公众号内容。
公众号现在已经可以创收了，大概每天0.2~2元的样子，看下图：
image.png
离开组织让我少了思想上的束缚，通过两个月的早起，锻炼出了新的生物钟时间，是否应该写点更为有用的东西呢？想当年用 Cocos2d-js 做的 SLG 游戏中，有不少技术亮点都可以迁移到Cocos Creator上来，虽然早已有过想法，但懒于行动，现在就开始写题目是：《Cocos Creator 项目：如何较为优雅地实现新手引导?》
先看这个视频：
新手引导演示.jpg
https://www.bilibili.com/video/av60001770/
啰嗦了这么多，开始今天的正题。
如何较为优雅地实现新手引导功能？
早期的项目中Shawn遇到游戏终于要完成了，辛苦了一阵满以为可以稍微放松一下了，但策划、运营要求，增加一个他们认为非常“简单”且重要的功能：新手引导。
回想起当年，接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光，游戏代码本来就千疮面孔，逻辑错综复杂，根本不知道该怎么下手？更困难的是，游戏本身功能和需求还不稳定，老板随便一个想法可能就会被改、改、改...，我该怎么办？
在这种情艰难的情况下一定要，需要保持冷静，在痛定思痛之后，我开始了引导功能的开发，在做的过程中一不断积累，编写了一套配置式、可编程的引导框架，然后交给其他开发人员或策划人员做具体的引导内容，真的是“杀不死你的会使你更强大”。
一、常规实现新手引导的困难
通常实现新手引导的困难在于，它与当前需求、功能密切相关，而且稍有不甚连正常流程都走不通。下面一起看看新手引导到底有那些痛点。
开发中的痛点
- 需要在正常流程中插入引导代码，干扰流程；
- 引导代码的增加会影响原有代码逻辑，增加维护难和成本；
- 界面或需求的变化会导致引导功能大幅修改，甚至重新制作；
- 手指提示对应的矩形区定位麻烦，不能简单使用固定的位置和矩形大小；
- 编写引导的代码也很困难，需要策划—程序之间高度配合。
期望的编程体验
在了解到传统的引导制作过程中的难点与弊端后，一直在思考没有更好的实现方式，我心中的引导功能的编程方式希望有以下几点：
- 引导功能代码，不能混入正常游戏逻辑代码中，后患无穷，应尽量分离；（难以忍受优雅的代码被无情的打乱，更难忍受糟糕的代码被弄的支离破碎）
- 界面只发生简单的UI位移、Size大小、节点层次的调整，不需要修改具引导代码；
- 定位UI指引矩形区域应尽可能简单，能自适应不同的屏幕尺寸；
- 最好能做到策划人员都可以来制作部分流程引导；
- 在引导需求明确、游戏功能正常的情况下，制作一个常规的引导步骤应该非常快捷。
下面是我使用Cocos Creator 官方 demo-ui 工程上嵌入的引导案例演示：
demo体验地址：
http://example.creator-star.cn/demo-ui
引导配置：
module.exports = {
name: '进入商店',
debug: true,
autorun: true,
steps: [
{
desc: '点击主界面主页按钮',
command: { cmd: 'finger', args: 'Home > main_btns > btn_home'},
delayTime: 1,
},
{
desc: '点击主界面设置按钮',
command: { cmd: 'finger', args: 'Home > main_btns > btn_setting'},
},
{
desc: '点击主界面商店按钮',
command: { cmd: 'finger', args: 'Home > main_btns > btn_shop'},
},
{
desc: '点击商店充值按钮',
command: { cmd: 'finger', args: 'Home > Shop > btnCharge'},
delayTime: 2
},
{
desc: '点击充值界面关闭钮',
command: { cmd: 'finger', args: 'chargePanel > btn_close'},
delayTime: 2
},
]
};
Chat 大纲：
本篇 Chat 从开发痛点出发，在 Cocos Creator 项目中使用一种配置试、可编程的新手引导编程体验，你会获得下面收获：
分离引导与游戏之间的逻辑
- 引导操作流程分析
- 上帝模式—观察场景中任意节点与事件
- 任务式引导 task 与 step
- 引导任务的 JSON 式表达
点击操作的引导实现细节
- 节点定位器的实现
- 节点遮罩的实现
- 触摸事件的拦截与放行
- 目标节点触摸完成监听
设计一个简易的引导任务框架
- 引导框架—串联异步引导步骤
- 引导步骤—步骤生命周期回调与指令
- 指令设计—实现手指动画指令
自动化引导更多的可能性
- 浏览器自动引导实现
- 录制游戏的操作流程
- 基于引导任务的自动化测试
欢迎扫描 GitChat 分享卡：
gitchat.jpg
感谢关注「奎特尔星球」公众号，愿我们一起成长！
