Egret游戏实现反遮罩及镂空操作实例

游戏中反遮罩常用于场景切换、新手引导镂空高亮区域等。

使用Egret开发，主要用到橡皮擦功能，即混合模式egret.BlendMode.ERASE。

实例用到一张背景图和一张纯色遮罩图。

1. 添加背景图到舞台

    let sky = this.createBitmapByName("bg_jpg");
    sky.width = this._stage.stageWidth;
    sky.height = this._stage.stageHeight;
    this.addChild(sky);

2. 构建遮罩纹理

	//-- 将原来的遮罩图的混合模式设置为擦除
	let bitmapMask = new egret.Bitmap(RES.getRes('mask'));
	bitmapMask.blendMode = egret.BlendMode.ERASE;
	bitmapMask.anchorOffsetX = bitmapMask.width >> 1
	bitmapMask.anchorOffsetY = bitmapMask.height >> 1;
	bitmapMask.scaleX = bitmapMask.scaleY = this._scaleRate;
	bitmapMask.x = this._stage.stageWidth >> 1;
	bitmapMask.y = this._stage.stageHeight >> 1;

	//-- 反遮罩容器
	let reverseMask = new egret.Sprite();
	reverseMask.graphics.beginFill(0, 1);
	reverseMask.graphics.drawRect(0, 0, this._stage.stageWidth, this._stage.stageHeight);
	reverseMask.graphics.endFill();
	reverseMask.addChild(bitmapMask);

	//-- 创建一个RenderTexture，把反遮罩绘制上去
	let renderTex = new egret.RenderTexture();
	renderTex.drawToTexture(reverseMask);
	let mask = new egret.Bitmap(renderTex);
	this._maskBitmap = mask;
	this.mask = this._maskBitmap;
	!this._maskBitmap.parent && this.addChild(this._maskBitmap);

橡皮擦一擦到底，若将其父容器也设置egret.BlendMode.ERASE模式，便不会擦到底。此处的遮罩纹理只能用egret.Bitmap或者Sprite的矢量绘图，其他的如Shape目测不行，有一定的局限性。

Github地址：
https://github.com/pury/ReverseMaskByEgret

By Pury.