Egret--拼接Rect实现用于新手引导的扣洞

Posted 2021-02-22 webfs

这次的游戏项目需求与上次的不太一样

新手引导部分需要使用拼接Rect的方式实现

这种方式局限于只能扣出矩形的洞

还有一种比较麻烦的扣洞方法  用到的是 擦除+renderTexture的方式  可以用于扣出形状的洞

namespace Yui {
    export class GuideMask extends eui.Component {
        public _area;
        public RectList = [];
        public _alpha;
        public _fillColor = 0x000000;
        /**
         * 拼接方式实现新手引导遮罩层.
         * 可以修改实例的 fillColor属性 修改遮罩颜色(默认为: 0x000000)
         * 可以修改实例的 alpha属性 修改遮罩颜色(默认为: 0.7)
         * 可以修改实例的 area属性 修改扣洞区域(格式为:{x:?,y:?,w:?,h:?});
         * @author 前端法师
         * @param x 扣洞左上角x轴坐标
         * @param y 扣洞左上角y轴坐标
         * @param w 扣洞矩形宽度
         * @param h 扣洞矩形高度
         * @param alpha 遮罩部分透明度
         */
        constructor(x, y, w, h, alpha = 0.7) {
            super();
            this.area = { x, y, w, h };
            this.alpha = alpha
            this.addEventListener(egret.Event.ADDED_TO_STAGE, this.UIInit, this);
        }
        private UIInit() {
            let sw = this.stage.stageWidth
            let sh = this.stage.stageHeight
            this.width = sw;
            this.height = sh;
            this.verticalCenter = 0;
            if (this.area) {
                this.RectList = [];
                let PointList = {
                    top: [0, 0, sw, this.area.y],
                    bottom: [0, this.area.y + this.area.h, sw, sh - this.area.y - this.area.h],
                    left: [0, this.area.y, this.area.x, this.area.h],
                    right: [this.area.x + this.area.w, this.area.y, sw - this.area.x - this.area.w, this.area.h]
                }
                for (var key in PointList) {
                    let maskItem = new eui.Rect(PointList[key][2], PointList[key][3], this.fillColor);
                    maskItem.x = PointList[key][0];
                    maskItem.y = PointList[key][1];
                    maskItem.alpha = this.alpha;
                    this.RectList.push(maskItem)
                    this.addChild(maskItem)
                }
            }
            Log(‘mask‘, this);
        }
        get alpha() {
            return this._alpha;
        }
        set alpha(v) {
            for (let item of this.RectList) {
                item.alpha = v;
            }
            this._alpha = v;
        }
        get area() {
            return this._area;
        }
        set area(v) {
            this._area = v;
            if (this.RectList.length > 0) {
                for (let item of this.RectList) {
                    item.parent.removeChild(item);
                }
                this.UIInit()
            }
        }
        get fillColor() {
            return this._fillColor;
        }
        set fillColor(v) {
            for (let item of this.RectList) {
                item.fillColor = v;
            }
            this._fillColor = v;
        }
    }
}