[白鹭 Layer 管理组件] 用于方便地对进行 Layer 的管理 #白鹭 #游戏开发

Layer.ts

class Layer extends egret.Sprite {
    private mountTo: egret.DisplayObjectContainer

    constructor(mountTo: LayersDisplayObjectContainer) {
        super()
        // Layer 挂载到的 UI
        this.mountTo = mountTo
    }
    
}

LayersDisplayObjectContainer.ts

class LayersDisplayObjectContainer extends egret.DisplayObjectContainer {
    private cover: egret.Shape
    private layerBox: egret.DisplayObjectContainer

    private layers: Array<egret.DisplayObjectContainer>

    private hasEnsureBasicStyle: boolean

    constructor() {
        super()
        this.cover = new egret.Shape()
        this.layerBox = new egret.DisplayObjectContainer()

        this.layers = []

        this.cover.touchEnabled = true
        this.cover.addEventListener(egret.TouchEvent.TOUCH_TAP, function (event) {
            // cover 阻截点击事件
            event.stopPropagation()
            event.stopImmediatePropagation()
        }, this)
    }

    /**
     * @param width
     * @param height
     * @param alpha  遮罩的透明度
     */
    ensureBasicStyle(width: number, height: number, alpha?: number) {
        this.width = width
        this.height = height

        this.cover.graphics.beginFill(0x000000, alpha || 1)
        this.cover.graphics.drawRect(0, 0, width, height)
        this.cover.graphics.endFill()

        this.hasEnsureBasicStyle = true
    }

    /**
     * @param layer 待添加的弹窗显示对象
     * @returns this
     * 
     * 方法可能会因为下面的原因失败（下列大部分方法同此）：
     *  Error   Layers 容器还未添加到父容器/舞台便调用此方法时会抛出
     */
    push(layer: egret.DisplayObjectContainer): this {
        if (!this.hasEnsureBasicStyle) {
            throw new Error('Layers 容器还未挂载')
        }

        let lastLayer = this.layers[this.layers.length - 1]

        this.layerBox.addChild(layer)
        this.layers.push(layer)

        if (lastLayer) {
            // 禁用被覆盖 Layer 的点击
            lastLayer.touchEnabled = false
            lastLayer.touchChildren = false
        }

        this.layoutLayer(layer)

        return this
    }

    pop() {
        if (!this.hasEnsureBasicStyle) {
            throw new Error('Layers 容器还未挂载')
        }

        let layer = this.layers.pop()
        if (layer) {
            this.layerBox.removeChild(layer)
        } else {
            return this
        }

        let peakLayer = this.layers[this.layers.length - 1]
        if (peakLayer) {
            // 恢复顶层 Layer 的点击
            peakLayer.touchEnabled = true
            peakLayer.touchChildren = true
        } else {
            // 已经 pop 到空了
            this.emptyHandler()
        }

        return this
    }

    replace(layer: egret.DisplayObjectContainer) {
        if (!this.hasEnsureBasicStyle) {
            throw new Error('Layers 容器还未挂载')
        }

        this.layerBox.removeChildren()
        this.layers = []

        this.layerBox.addChild(layer)
        this.layers.push(layer)

        this.layoutLayer(layer)
        return this
    }

    clear() {
        this.emptyHandler()
        return this
    }

    private layoutLayer(layer: egret.DisplayObject) {
        let layerWidth = layer.width
        let layerHeight = layer.height

        layer.x = this.width / 2 - layer.width / 2
        layer.y = this.height / 2 - layer.height / 2

        if (!this.cover.parent) {
            this.addChild(this.cover)
            this.addChild(this.layerBox)
        }
    }

    private emptyHandler() {
        this.layerBox.removeChildren()
        this.layers = []

        if (this.cover.parent) {
            this.removeChild(this.cover)
            this.removeChild(this.layerBox)
        }
    }
}