实战案例分享 | “新手引导”与游戏“录像回放”
1. 新手教学
下面是游戏中使用到的新手教学引导配置，它是我用引导框架的录像功能生成的，在中间增加了文字提示：
module.exports = {debug: false, //不开启调试autorun: false, //不自动引导mask: false, //不开启遮罩steps: [{desc: "引导开始",position: cc.v2(150, 66),command: { cmd: "text", args: ['欢迎来到消消大冒险', '请让我为你讲解一下游戏的玩法吧！'] },},{desc: "点击GameMatrix/item_6_6",command: {cmd: "finger",args: "GameMatrix/item_6_6"},},{desc: "点击GameMatrix/item_3_7",command: {cmd: "finger",args: "GameMatrix/item_3_7"},"delayTime": 1},{desc: "点击GameMatrix/item_3_3",command: {cmd: "finger",args: "GameMatrix/item_3_3"},"delayTime": 1},{desc: "点击GameMatrix/item_3_6",command: {cmd: "finger",args: "GameMatrix/item_3_6"},"delayTime": 1},{desc: "使用锤子道具",position: cc.v2(180, 130),command: { cmd: "text", args: ['使用流星锤清理障碍'] },},{desc: "点击HammerItem",command: {cmd: "finger",args: "HammerItem"},"delayTime": 1},{desc: "点击GameMatrix/item_3_4",command: {cmd: "finger",args: "GameMatrix/item_3_4"},},{desc: "点击GameMatrix/item_3_5",command: {cmd: "finger",args: "GameMatrix/item_3_5"},"delayTime": 1},{desc: "点击HammerItem",command: {cmd: "finger",args: "HammerItem"},"delayTime": 1},{desc: "点击GameMatrix/item_2_4",command: {cmd: "finger",args: "GameMatrix/item_2_4"},},{desc: "点击GameMatrix/item_7_3",command: {cmd: "finger",args: "GameMatrix/item_7_3"},"delayTime": 1},{desc: "关键提示1",position: cc.v2(190, 130),command: { cmd: "text", args: ['看出我的用意了吗？','我们已经把红色的星星连成了一大片'] },},{desc: "点击GameMatrix/item_3_5",command: {cmd: "finger",args: "GameMatrix/item_3_5"},"delayTime": 1},{desc: "关键提示2",position: cc.v2(190, -10),command: { cmd: "text", args: ['尽可能地将同一种颜色星星连接起来，这样才能得高分哦！'] },},{desc: "引导结束",position: cc.v2(190, -10),command: {cmd: "text",args: ['您学会了吗，是不是很简单呢？','我们去战斗吧！！！'],},},{desc: "点击返回按钮",command: {cmd: "finger",args: "back"},},{desc: "点击返回按钮",command: {cmd: "finger",args: "QueryDialog > btnOk"},},]};
2. 游戏录像
相信很多人关心，消消大冒险中游戏录像是怎么实现的，其实思路很简单，主要分为两大部分：录像与回放
录像
录像并不是真的将游戏的视频画面记录下来，记录的是消除矩阵的初始数据，游戏过程中点击矩阵元素的序号，数据结构如下：
gameRecord = {//游戏初始矩阵，星星颜色indexes: [0, 4, 1, 4, 2, 2, 0, 1, 1, 2,3, 0, 2, 2, 4, 4, 2, 0, 2, 4,4, 3, 1, 4, 3, 0, 2, 0, 1, 2,4, 1, 4, 4, 1, 3, 3, 2, 4, 3,2, 0, 2, 4, 0, 4, 2, 4, 3, 1,0, 4, 4, 4, 3, 0, 2, 3, 4, 0,1, 2, 1, 1, 2, 2, 2, 3, 0, 4,3, 3, 0, 4, 0, 4, 4, 4, 4, 4,2, 2, 2, 3, 3, 3, 2, 1, 2, 4,4, 4, 3, 3, 3, 0, 4, 1, 4, 2],//操作指令：commans: [{t:1, i:10},{t:1, i:11},{t:2, hammer: true} ...]
上面commans中t为操作类型，t=1为消除操作，i是上面indexes数组的下标索引。除了要记录消除操作外还要记录道具的使用t=2是道具的使用，hammer:true表示选中锤子道具。
回放
有了上面的初始数据和操作记录，回放就简单了，将commans中的数据还的为游戏的操作即可，下面是关键代码：
//回放函数playbackCommand() {let obj = this._commands[this.index++];//操作指令用完，显示结束if (obj === undefined) {this._showResultDialog();return;}cc.log('---->', JSON.stringify(obj));let node;//解析指令if(obj.t === 1){ //消除动作指//获取点击的节点，做手指动画node = this._gameMatrixPlayer.getItem(obj.i);this.playFinger(node, () => {cc.game.emit('playback_clear', obj.i );});} else { //道具动作//获取锤子节点，做手指动画node = this._hammerItem.node;this.playFinger(node, () => {cc.game.emit('playback_hammer',obj.hammer);this.scheduleOnce(this.playbackCommand, 1);});}},
指令解析完成后，通过事件广播让具体的游戏模块去完成任务，还需要注意的是游戏中的异步动画，playbackCommand命令是在接收到消除动画完毕后才能执行下一条指令的解析，看下面代码：
//接收到游戏矩阵消除掉落后，才能解析下一条cc.game.on('game_matrix_drop_end', () => {this.scheduleOnce(() => {this.playbackCommand();}, 1);}, this);
而道具的选择、取消没有事件发出，上面通过this.scheduleOnce触发下一条指令解析。
以上分享希望对你有所帮助，如果有兴趣请到游戏中体验，点击上面游戏卡片即可看到Shawn的游戏过程，感谢您的支持！
Shawn的新手引导框架，订阅可获得框架代码的详细分析与DEMO源码工程！
◈◈◈原创热文◈◈◈