egret新手引导反向遮罩

五一快乐

新手引导的遮罩效果

最近的功能是做一个新手遮罩的功能
之前的游戏，新手引导都相对简单，简单到什么程度呢
emmmmmmmmmmm
策划拼个图，在合适位置直接调用图片就行…
因为有些游戏的新手引导位置是固定的，所以图片可以由美术来出，直接当成资源在合适时机调用和删除就行，但是有些特效的遮罩，并不是固定的位置，参考开心消消乐，新手引导挖洞的位置取决于棋盘背景的布局，就有了不确定性，为了尽可能的增加用户的自定义性，所有就有了现在的功能。

废话不多说，先放效果图

上方镂空补位即为自己绘制自定义位置。
在绘制中需要注意的思路是在绘制过程中， 先标记需要的点，然后将这些点使用nextTo方法连线，连线完成后得到图形A，再反向绘制出了出了A之外的遮罩。

	/**
     * 根据显示对象的 Alpha 值擦除背景。Alpha 值不为0的区域将被擦除。
     * @version Egret 2.4
     * @platform Web,Native
     * @language zh_CN
     */
    static ERASE: string;

---

改属性可擦除绘制完成的图形A，就可将A部分镂空处理，下面上详细代码，注释很详细了。

class drawGuideUtilView extends eui.Component {
	private closeBtn: eui.Button;
	private oneX: any = null;
	private oneY: any = null;
	public constructor() {
		super();
		this.skinName = "drwaGuideUtilSkin";
		this.init();
	}

	public init() {
		this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.close, this);
	}

	//释放资源
	public close() {
		this.parent.removeChild(this);
	}



	/**
	 * 绘制想要的镂空区域
	 */
	public draw(params: any = [], paramsNo: any = []) {

		params = [14, 16, 36, 33, 23, 24,];
		//长和宽除9
		this.oneX = this.width / 9;
		this.oneY = this.height / 9;

		let sp: egret.Sprite = new egret.Sprite();
		sp.graphics.beginFill(0xff0000);
		let start = params[0];
		sp.graphics.moveTo(this.reToLocal(start)[0], this.reToLocal(start)[1]);

		for (let k in params) {
			let v = params[k];
			if (k == "0") {
				continue;
			}
			sp.graphics.lineTo(this.reToLocal(v)[0], this.reToLocal(v)[1])
		}

		sp.graphics.endFill();
		this.drawReverse(sp, this.width, this.height);

		//将无遮罩部分的可点击内容中不可点击区域置为不可点击
		paramsNo = [[14, 16, 36, 35, 25, 24]];

		for (let k in paramsNo) {
			let paramIndex = paramsNo[k];
			let ss: egret.Sprite = new egret.Sprite();
			ss.graphics.beginFill(0xff0000, 0);
			let start1 = paramIndex[0];
			ss.graphics.moveTo(this.reToLocal(start1)[0], this.reToLocal(start1)[1]);

			for (let k in paramIndex) {
				let v = paramIndex[k];
				if (k == "0") {
					continue;
				}
				ss.graphics.lineTo(this.reToLocal(v)[0], this.reToLocal(v)[1])
			}

			ss.graphics.endFill();
			ss.blendMode = egret.BlendMode.ERASE;
			ss.touchEnabled = true;
			this.addChild(ss);
		}
	}

	/**
	 * 	 转换坐标
	 */
	public reToLocal(i: string) {
		let y = Math.floor((parseInt(i) / 10));
		let x = (parseInt(i)) % 10;
		return [x * this.oneX, y * this.oneY]
	}


	/**
	 * 进行反向遮罩
	 */
	public drawReverse(dp: egret.DisplayObject, w: number, h: number): void {

		let container = new egret.DisplayObjectContainer();
		let bg: egret.Shape = new egret.Shape();
		bg.graphics.beginFill(0x000000, 0.8);
		bg.graphics.drawRect(0, 0, w, h);
		bg.graphics.endFill();

		container.addChild(bg);
		container.addChild(dp);
		dp.blendMode = egret.BlendMode.ERASE;
		let renderTexture: egret.RenderTexture = new egret.RenderTexture();
		renderTexture.drawToTexture(container);

		let bitmap: egret.Bitmap = new egret.Bitmap(renderTexture);
		this.addChildAt(bitmap, 0);
		bitmap.touchEnabled = true;  //允许点击
		bitmap.pixelHitTest = true;  //镂空区域不响应点击，这样可以穿透点击到下面的背景
	}
}

完成！，其中反向遮罩方法是核心， 但是在draw方法中 还可重复使用透明遮罩用来遮挡图形A的部分位置达到想要的效果!