新手指引的遮罩

 某些游戲里新手指引需要一個半透明遮罩，強制用戶按照指引操作。

當然，有些游戲只是提示，用戶依然可以點擊其他的按鈕，進行其他操作。

 

無遮罩的新手指引

 

有遮罩的指引

 

在主頁場景里創建指引遮罩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);
	}
}

　

Demo下載：

https://files-cdn.cnblogs.com/files/gamedaybyday/Egret5.0.1_GuildExample.7z