实战案例分享 | “新手引导”与游戏“录像回放”

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源码工程！

◈◈◈原创热文◈◈◈

1. Creator星球游戏开发社区「脱贫实验室No.1」

2. 时间管理实践 | 为什么我有那么多时间写公众号？

3. 项目经理特战训练 | 灵魂拷问：你是什么垃圾？

4. 微信小游戏&云开发 | 72小时极限编程体验

5. 从“新手引导”到“自动化测试”

6. CreatorPrimer 30篇教程汇总

7. 微信小游戏，个人开发者还可以上吗？

8. 遇见未知的自己，奎特尔成长之路！

9. 星星爱消除，浪漫七夕节—约会表白神器！

10. 「奎特尔星球」公众号资源集合