egret 新手引导挖洞 指引

效果图

原理:

1、创建一个容器，包含蒙板、镂空区域形状元件(注意:此容器不能加入到舞台)       2、镂空元件 blendmode 设置成擦除       3、对容器进行 renderTexture 处理，变成一张图后加入到显示列表

    let container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        //创建一个背景, common_mask_png是一个5*5像素的黑色图片
        let bg: egret.Bitmap = new egret.Bitmap(RES.getRes("beijing_png"));
        bg.alpha = 0.7;
        bg.scale9Grid = new egret.Rectangle(1, 1, 3, 3);
        bg.width = 640;
        bg.height = 1136;

        //洞的大小图片
        let sp = new eui.Image("yuan_png");
        sp.x = 320;
        sp.y = 500;
        this.addChild(sp)

        container.addChild(bg);
        container.addChild(sp);
        sp.blendMode = egret.BlendMode.ERASE;

        let renderTexture: egret.RenderTexture = new egret.RenderTexture();
        renderTexture.drawToTexture(container);

        let bitmap: egret.Bitmap = new egret.Bitmap(renderTexture);
        this.addChild(bitmap);

以上是关键代码(注意:为什么背景要用bitMap做背景,如果是h5游戏的话用别人的egret.shape就可以了,但是如果要用在小游戏上的话shape在某些手机上会出现微信闪退的情况 所以用图片来解决这个问题)

下面是例子代码

一个代码类 一个皮肤类

/**
 * 新手引导1
 */
class GUaidTest extends eui.Component {
    constructor() {
        super();
        this.once(eui.UIEvent.ADDED_TO_STAGE, this.init, this);
        this.skinName = "skins.GUaidTest";
    }
    private init() {
        this.maskGro();
    }

    private maskGro() {
        let container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        //bitmap图
        let bg: egret.Bitmap = new egret.Bitmap(RES.getRes("common_mask_png"));
        bg.alpha = 0.7;
        bg.scale9Grid = new egret.Rectangle(1, 1, 3, 3);
        bg.width = 640;
        bg.height = 1136;

        let sp = new eui.Image("headIconBg_png");
        sp.x = 320;
        sp.y = 500;
        this.addChild(sp)

        container.addChild(bg);
        container.addChild(sp);
        sp.blendMode = egret.BlendMode.ERASE;

        let renderTexture: egret.RenderTexture = new egret.RenderTexture();
        renderTexture.drawToTexture(container);

        let bitmap: egret.Bitmap = new egret.Bitmap(renderTexture);
        this.addChild(bitmap);
    }
}

皮肤类

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.GUaidTest" width="640" height="1136" xmlns:e="http://ns.egret.com/eui"
        xmlns:w="http://ns.egret.com/wing">
    <e:Image id="bgImage" source="bg_jpg" x="0" y="0" />
</e:Skin>