2 设计一个简易的引导任务框架 | 4.23粉丝赠书( 二 ) _指令

如果游戏比较简单和 onEnd 不是必须的，通过 step 上属性可以做简单的延时控制，同样你也可以将游戏中增加事件、网络消息的广播编写成 step 配置中的指令，以降低配置的复杂度。
2. 步骤指令
使用 step 指令，可以让步骤配置简化，特别是 UI 的点击引导。

文章插图
步骤的异步处理过程中 this. 是关键，因为经常刚一进入某个场景时，可能需要定位的节点还未准备好（未创建或在动画运动过程中），我们又不想每个步骤都去写，因此步骤上提供了一个的属性，以延迟 step 指令的执行。
这里实现了两个指令：和，他们的本质都是异步执行的函数 this. 中在对指令函数的调用，看下面代码：

let godCommand = require('GodCommand');...//处理步骤中的指令_processStepCommand(cb) {let cmd = godCommand[step.command.cmd];if (cmd) {this.log(`执行步骤【${step.desc}】指令: ${step.command.cmd}`);cmd(this, step, () => { this.log(`步骤【${step.desc}】指令: ${step.command.cmd} 执行完毕`);cb();});} else {cc.error(`执行步骤【${step.desc}】指令: ${step.command.cmd} 不存在！`);}}

这里将指令函数编写在了名为 .js 文件中，向指令函数传入当前引导对象和 step 配置对象，下面看定位指令的实现：

let GodCommand = {//定位节点locator(godGuide, step, callback) {//取出指令参数 let { args } = step.command;//调用引导类提供的定位节点godGuide.find(args, (node) => {//设置目标节点，用于遮罩显示和点击放行godGuide._targetNode = node;//点击确认node.once(cc.Node.EventType.TOUCH_END, () => {cc.log('节点被点击');//调用 callback 任务完成callback();});});},}

可以看出这里又是一系列的回调：
从 step 中获取参数，调用 .find 定位节点；
目标节点定位成功，使用 node.once 注册临时触摸监听；
当目标节点触摸事件发生，执行输入的回调，指令完成。
需要注意，任务完成时一定要执行，不然无法继续流程。有了该指令函数，就可以在任务配置文件中使用了，使用方式：
{desc: '点击主界面主页按钮',command: { cmd: 'locator', args: 'Home > main_btns > btn_home' },delayTime: 1,}
mand 中的 args 参数，由指令函数自行解释。
指令设计—实现手指动画指令
我们可以根据自己游戏的业务需求设计步骤指令，上一小节只是实现了节点的定位，并没有手指动画，在前面的基础上，我们为节点定位增加一个手指动画。
在预制体上增加了一个手指预制体的属性，你可以根据自己的美术风格任意更换手指提示的表现，看下图：
手指预制体编辑界面：
注意预制体，锚点设置在了手指指尖位置。
手指动画提示可能比遮罩还常用，因此将手指动画的调用封装在了组件代码中，提供了一个的函数，代码如下：

fingerToNode(node, cb) {// 手指节点不存在，直接回调if (!this._finger) {cb();}this._finger.active = true;// 转换节点位置let p = node.parent.convertToWorldSpaceAR(node.position)p = this.node.convertToNodeSpaceAR(p);// move 动作let duration = p.sub(this._finger.position).mag() / cc.winSize.height;let moveTo = cc.moveTo(duration, p);let callFunc = cc.callFunc(() => {cb(); // 完成回调})let sequnce = cc.sequence(moveTo, callFunc);this._finger.runAction(sequnce);}

手指动画很简单，就是一个的动作，需要注意的是节点坐标转换和动作完成回调，下面是指令的实现：