Egret 使用反向遮罩做新手引导功能

最新推荐文章于 2024-09-15 07:24:27 发布

honey199396

最新推荐文章于 2024-09-15 07:24:27 发布

阅读量6.3k

点赞数

分类专栏： Egret 文章标签： egret 反向遮挡新手引导

本文链接：https://blog.csdn.net/honey199396/article/details/83656227

版权

Egret 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

新手引导最复杂的部分就是要将部分东西显示出来，其他部分遮挡，在cocos2d-x中使用多个圆，半圆，方块等组件拼出要显示的部分，egret中有一个很方便的功能能实现这个效果。

1、新建egret工程，运行，显示如下：
在这里插入图片描述
我们将上面显示白鹭时代那个遮罩显示出来，其他部分遮挡起来。

2、在createGameScene() 函数下方添加如下代码，


	/**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
    	***
    	this.testFunc(topMask, 0x000000, 0.8);
	}
	/**
	* 这里是反向遮挡函数
	*/
	private testFunc(target: egret.DisplayObject, bgColor: number, alpha: number) {
        let container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();

        let blendShape = new egret.Shape();					 	// 用来作为遮挡背景
        blendShape.graphics.beginFill(bgColor, alpha);
        blendShape.graphics.drawRect(0, 0, this.width, this.height);
        blendShape.graphics.endFill();
        container.addChild(blendShape);
        container.addChild(target);
        target.blendMode = egret.BlendMode.ERASE;

        let renderTexture:egret.RenderTexture = new egret.RenderTexture();
        renderTexture.drawToTexture(container);
        let blendBitmap = new egret.Bitmap(renderTexture);
        this.addChild(blendBitmap);

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

最后效果如下：
在这里插入图片描述

说明：上面主要思路是，将背景和需要反向遮挡的添加到一个容器中，并将反向遮挡的blendMode设置为

		/**
         * 根据显示对象的 Alpha 值擦除背景。Alpha 值不为0的区域将被擦除。
         * @version Egret 2.4
         * @platform Web,Native
         * @language zh_CN
         */
        static ERASE: string;

并将其绘制为一个纹理，拿到Texture实例的bitmap对象，就是最后的显示结果。