【cocos creator】新手引导的实现思路

这篇文章只写了简单的新手引导，就是点击按钮等操作，未涉及复杂的游戏操作。

设计新手引导，最让人头疼的地方就是如何在不修改正常游戏逻辑的情况下，让玩家按设计好的步骤去进行操作。首先确定几点要求：

1、在进行引导的时候，要确保用户不会进行其它的操作，以免打乱引导逻辑。

2、不可以因为加入新手引导而去修改游戏的逻辑。

这时候，就需要新手引导模块去监听游戏中的事件，并且屏蔽掉其它用户操作。例如：第一步是点击“游戏开始”按钮，这时，我们就需要去监听“游戏开始”按钮的点击事件来确定第一步是否完成，同时用遮罩把“开始游戏”按钮以外的物体遮住。

一、遮罩：

cocos creator的遮罩不仅可以在指定的区域显示内容，而且该区域还可以监听玩家输入操作，如图。

有了这个特性之后，我们的思路就清晰了：获取当前步骤需要点击的按钮，根据按钮的位置和大小在遮罩上挖一个洞，玩家可以通过这个洞点击该按钮，并且无法点击其它地方。

开始做遮罩：首先做一个黑色半透明的图片，用来遮住玩家输入：

然后创建一个mask，用来在黑色半透明图片上掏个洞，这样玩家就可以通过这个洞去进行点击按钮等操作了：

漏洞的位置和大小，其实就是mask的位置和大小，我们只需要根据步骤中按钮的位置和大小，动态调整mask就行。

二、事件：

每个步骤都会监听一个事件，当触发该事件的时候，步骤就会结束，然后进入到下一个步骤。

SetStep(step)//设置当前步骤，并绑定事件
{
    step.interactNode.on(step.actionName,this.Next.bind(this));//绑定事件
}

Next()
{
    if(this._currentStep != null)
    {
        //解除事件的监听
        this._currentStep.interactNode.off(this._currentStep.actionName,this.Next,this);
    }
    this._index += 1;//当前步骤序号+1
    if(this._index >= this.steps.length)//如果大于步骤数量
    {
        this.Over();//结束引导
    }
    else
    {
        this._currentStep = this.steps[this._index];
        this.SetStep(this._currentStep);
    }
},