GitChat新作，如何较为优雅地实现新手引导功能！

最新推荐文章于 2021-08-25 17:35:08 发布

晓衡的成长日记

最新推荐文章于 2021-08-25 17:35:08 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/6346289/article/details/100037279

版权

细心的你有没有发现公众号最近推文变得密集了，Shawn上半年加入了一个组织，又历史性地进入了新的轮回：低迷、迟钝、郁郁寡欢...，如果你看过我的《遇见未知的自己，奎特尔成长之路！》文章的伙伴估计知道，我的抑郁症状又周期性的发作了。

在6月下旬，因为一些事情和变故，Shawn又决定离开组织，同去年一样同样是7月份，又要开始踏上向独自的冒险旅程。

自从下定决心的一瞬间开始，之前的束缚在慢慢被释放，其实我早已发现写公众号、帮助大家解决问题，是我缓解症状的良药，于是不计成本地在公众号上不断投入，近期更是像被打了鸡血一样，早上 5:30 准时起床，做计划、收集、整理、撰写公众号内容。

可喜的是公众号现在已经可以创收了，大概每天0.2~2元的样子，看下图： 640?wx_fmt=png

如果不小心触碰到文中插入的广告，可能就会超过这个数，Shawn最早拿到流量主的几天，每次都会不小心触碰到文中的广告，但是不到一周时间，广告再也不出现了！

早起养成了，离开组织的决定让我少了思想上的束缚，通过之前两个多月的早起，锻炼出了新的人体生物钟，是否应该写点更有价值的东西呢？想当年用 Cocos2d-js 做的 SLG 项目中，有不少技术亮点都可以迁移到Cocos Creator上来，虽然早已有过想法，但疏于行动。

上面视频，是我曾经的项目，之前公众号介绍过的uikiller、pbkiller、PureMVC 、Grunt自动化资源同步，都是出自这个项目。

啰嗦了这么多，开始今天的正题。

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

早期的项目中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 &gt; main_btns &gt; btn_home'},	
            delayTime: 1,	
        },	
        {	
            desc: '点击主界面设置按钮',	
            command: { cmd: 'finger', args: 'Home &gt; main_btns &gt; btn_setting'},	
        },	
        {	
            desc: '点击主界面商店按钮',	
            command: { cmd: 'finger', args: 'Home &gt; main_btns &gt; btn_shop'},	
        },	
        {	
            desc: '点击商店充值按钮',	
            command: { cmd: 'finger', args: 'Home &gt; Shop &gt; btnCharge'},	
            delayTime: 2	
        },	
        {	
            desc: '点击充值界面关闭钮',	
            command: { cmd: 'finger', args: 'chargePanel &gt; btn_close'},	
            delayTime: 2	
        },	
    ]	
};

配置中的重点是steps数组项目，其中的 desc 是引导步骤的描述，主要用于调试，command是引导指令，这里实现的是一个手指指示指令：finger, 后面的args是指令参数，借助CSS中的选择器概念，我这里简单实现了一个节点获取的方法，称之为：定位器。

自动引导

引导的测试工作效率低下，既然有了可配置的引导，能否让它自动去执行呢？看下面视频：

Shawn在浏览器上实现了鼠标的点击模拟，可以方便对引导流程的测试和验证。

流程录制

引导的核心是获取目标节点，我们是通过手写节点定位器（一种简化的节点路径表达方式）获取节点。如果实现一个功能，记录下我们点击的节点路径，是否可以实现自动生成引导流程呢？然后再让它自动播放出来？

640?wx_fmt=gif

GitChat大纲

640?wx_fmt=png

Chat分享卡

Chat 赠送活动：

通过公众号后台回复【新手引导】四字，随机抽出 10 位幸运伙伴，赠送该篇 GitChat 文章。
活动时间：即日起至7月6日（本周六）晚8:00

如果您觉得该篇 Chat 有用，请分享本篇文章或Char分享卡给周围的朋友，点击【阅读原文】进入该GitChat主页，您的支持是我创作的最大动力，愿在求知的道路上我们一起同共成长！

640?wx_fmt=jpeg

640?wx_fmt=png

晓衡的成长日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GitChat新作，如何较为优雅地实现新手引导功能！

细心的你有没有发现公众号最近推文变得密集了，Shawn上半年加入了一个组织，又历史性地进入了新的轮回：低迷、迟钝、郁郁寡欢...，如果你看过我的《遇见未知的自己，奎特尔成...
复制链接

扫一扫