Egret 实现新手引导的遮罩

前言

本人刚进公司的Entry task 2就是实现一个三消游戏的新手引导功能，因为刚接触Egret框架，游戏方面也是第一次接触，对Egret,和业务都不太熟悉，代码写的不好，多谅解！！！！

直接上图，新手引导反遮罩最复杂的功能就是要将部分的东西显示出来，其他部分进行遮挡，在egret中使用多个圆弧矩形拼接出要显示的部分，其核心代码就是利用RenderTexture动态纹理，将显示对象及其子对象绘制成为一个纹理的功能。通俗点来说就是 截屏操作 ，将当前画面保存下来，作为截图来呈现。

// 创建一个容器，可往容器中加入其他矢量、文本、位图等
const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
// 创建使用 renderTexture ，进行显示
const renderTexture: egret.RenderTexture = new egret.RenderTexture();
renderTexture.drawToTexture(container);

// 将绘制好的 renderTexture 进行显示
const blendBitmap = new egret.Bitmap(renderTexture);
this.addChild(blendBitmap);

代码

实现新手引导的核心就是实现反遮罩功能，如下：

// blendShape 被遮挡部分。 target：要显示的部分
static shadeFunc(blendShape: egret.DisplayObject, target: egret.DisplayObject) {
		const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
		container.addChild(blendShape);
		container.addChild(target);

		target.blendMode = egret.BlendMode.ERASE;
		const renderTexture: egret.RenderTexture = new egret.RenderTexture();
		renderTexture.drawToTexture(container);

		const blendBitmap = new egret.Bitmap(renderTexture);

		blendBitmap.touchEnabled = true;  // 允许点击
		blendBitmap.pixelHitTest = true;  // 是否开启精确像素碰撞。设置为true显示对象本身的透明区域将能够被穿透。

		return blendBitmap
	}

【注意】： 需要注意的是如果要进行点击，需要通过监听事件来操作

结语

对于刚接触Egret 白鹭框架的程序员来说，可以多看看Egret官方文档，以及自己写写小demo来学习，上手会比较快。