实战案例分享 | “新手引导”与游戏“录像回放”
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源码工程！
◈◈◈原创热文◈◈◈
Creator星球游戏开发社区「脱贫实验室No.1」
时间管理实践 | 为什么我有那么多时间写公众号？
项目经理特战训练 | 灵魂拷问：你是什么垃圾？
微信小游戏&云开发 | 72小时极限编程体验
从“新手引导”到“自动化测试”
CreatorPrimer 30篇教程汇总
微信小游戏，个人开发者还可以上吗？
遇见未知的自己，奎特尔成长之路！
星星爱消除，浪漫七夕节—约会表白神器！
「奎特尔星球」公众号资源集合
