早期的项目中晓衡遇到游戏终于要完成了, 辛苦了一阵满以为可以稍微放松一下了, 但策划, 运营要求, 增加一个他们认为非常 "简单" 且重要的功能: 新手引导.
回想起当年, 接到这个任务时的感觉是手脚冒汗, 天晕地暗, 日月无光, 游戏代码本来就千疮面孔, 逻辑错综复杂, 根本不知道该怎么下手? 更困难的是, 游戏本身功能和需求还不稳定, 老板随便一个想法可能就会被改, 改, 改..., 我该怎么办?
在这种情艰难的情况下一定要, 需要保持冷静, 在痛定思痛之后, 我开始了引导功能的开发, 在做的过程中不断积累, 编写了一套配置式, 可编程的引导框架, 然后交给其他开发人员或策划人员做具体的引导内容, 真的是:"杀不死你的会使你更强大".
实现新手引导的困难
通常实现新手引导的困难在于, 它与当前需求, 功能密切相关, 而且稍有不甚连正常流程都走不通, 下面一起看看新手引导到底有那些痛点.
开发中的痛点
需要在正常流程中插入引导代码, 干扰流程;
引导代码的增加会影响原有代码逻辑, 增加维护难和成本;
界面或需求的变化会导致引导功能大幅修改, 甚至重新制作;
手指提示对应的矩形区定位麻烦, 不能简单使用固定的位置和矩形大小;
编写引导的代码也很困难, 需要策划 - 程序之间高度配合.
期望的编程体验
在了解到传统的引导制作过程中的难点与弊端后, 一直在思考没有更好的实现方式, 我心中的引导功能的编程方式希望有以下几点:
引导功能代码, 不能混入正常游戏逻辑代码中, 后患无穷, 应尽量分离;(难以忍受优雅的代码被无情的打乱, 更难忍受糟糕的代码被弄的支离破碎)
界面只发生简单的 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
原创不易, 如果觉得有帮助, 请点个赞吧!
来源: https://www.cnblogs.com/creator-star/p/11800956.html