效果图
原理:
|
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>