新手指引的遮罩

 某些游戏里新手指引需要一个半透明遮罩，强制用户按照指引操作。

当然，有些游戏只是提示，用户依然可以点击其他的按钮，进行其他操作。

无遮罩的新手指引

有遮罩的指引

在主页场景里创建指引遮罩GuideMask

 HomeScene.ts：

/**
 * 主页场景
 * @author chenkai
 * @since 2017/7/4
 */
class HomeScene extends eui.Component{
	public constructor() {
		super();
		this.skinName = "HomeSceneSkin";
	}

	public childrenCreated(){
		GuideMask.getInstance().show(560, 900, 80, 100, this);
	}
}

　　

 指引遮罩，是在需要透明的区域四周，创建4个黑色半透明的Rect，来屏蔽其他按钮，用户只能点击指引要求点击的按钮。

 GuideMask.ts：

/**
 * 新手指引的遮罩
 * @author chenkai
 * @since 2017/7/4
 * 
 * 在不需遮罩的矩形区域四周，创建4个半透明rect。
 * 
 * example:
 * 在(100,100)位置，显示200x50的可点击区域
 * GuideMask.getInstance().show(100,100,200, 50, this);
 * GuideMask.getInstance().hide();
 */
class GuideMask extends eui.Group{
	/**颜色 */
	public color:number = 0x000000;
	/**透明度 */
	public alpha:number = 0.5;

	public constructor() {
		super();
	}

	public childrenCreated(){
		this.touchEnabled = true;
		this.touchChildren = true;
	}

	//单例
	private static instance:GuideMask;
	public static getInstance():GuideMask{
		if(this.instance == null){
			this.instance = new GuideMask();
		}
		return this.instance;
	}

	/**
	 * 显示指引半透明遮罩
	 * @x 不需遮罩的矩形区域x
	 * @y 不需遮罩的矩形区域y
	 * @w 不需遮罩的矩形区域宽度
	 * @h 不需遮罩的矩形区域高度
	 * @doc GuildMask显示的容器
	 */
	public show(x:number, y:number, w:number, h:number, doc:egret.DisplayObjectContainer){
		var stage:egret.Stage = egret.lifecycle.stage;
		//上部遮罩
		var rectTop:eui.Rect = new eui.Rect(stage.stageWidth, y, this.color);
		rectTop.x = 0;
		rectTop.y = 0;
		this.addChild(rectTop);
		//下部遮罩
		var rectFoot:eui.Rect = new eui.Rect(stage.stageWidth, stage.stageHeight - y - h, this.color);
		rectFoot.x = 0;
		rectFoot.y = h+y;
		this.addChild(rectFoot);
		//左边遮罩
		var rectLeft:eui.Rect = new eui.Rect(x, h, this.color);
		rectLeft.x = 0;
		rectLeft.y = y;
		this.addChild(rectLeft);
		//右边遮罩
		var rectRight:eui.Rect = new eui.Rect(stage.stageWidth - x - w, h, this.color);
		rectRight.x = x + w;
		rectRight.y = y;
		this.addChild(rectRight);

		doc.addChild(this);
	}

	/**
	 * 隐藏
	 */
	public hide(){
		this.removeChildren();
		this.parent && this.parent.removeChild(this);
	}
}