Egret社区
1银子


高亮区域透明度为10%的黑图片镂空

高亮区域透明度为10%的黑图片镂空


不知道各位同学在做上图所示的新手引导时,在指引玩家点击的区域形成一个镂空效果是如何实现的?
包括两方面:
        1)图片区域镂空(就是在遮盖住游戏显示区域的图层上形成一个镂空区域,视觉上提示玩家点击)
        2)点击区域镂空(就是只有镂空的区域可以响应点击,其他区域都被屏蔽或者忽略)

我接触有过两种做法:
        1)在flash里可以通过用graphics在结束endFill()前,draw两次,利用其相交部分为擦除的特性,来实现镂空效果,代码如下:
[mw_shl_code=actionscript3,true]
var hollowMask:Sprite = new Sprite;
hollowMask.graphics.beginFill(0x000000);
hollowMask.graphics.drawRect(0,0,1136,640);
hollowMask.graphics.drawEllipse(800,500,100,100);
hollowMask.graphics.endFill();
addChild(hollowMask);
[/mw_shl_code]
        这种方法的具体操作,DOM大神在他blog里也有介绍:http://blog.domlib.com/articles/186.html#comments
        2)用四个矩形来形成一个盖住游戏的所有区域,但通过错开一定距离来形成看似镂空的效果,如下图:

四个矩形来形成镂空效果

四个矩形来形成镂空效果


但其中的第1种方法,在egret里实际效果是,第二次draw会重置第一次draw的,而不像在flash里其相交部分为擦除,所以在egret里不可行!
而第2种方式是比较“土”的一种办法,在以前的项目倒是使用过,效果也还过的去,所以在没有更好的方案前,我准备用这个方案

这里想看看大家在自己项目实现类似这样新手指引时都是怎么做的,也想请egret官方团队给点建议,指导一个适合白鹭引擎,并且易用性和实际效果都比较好的方案,谢谢。







分享到 :
4 人收藏

12 个回复

倒序浏览
gamedaybyday  初窥堂奥 | 2015-10-11 22:08:22
不是用遮罩就行了吗 - -
adodo08  圆转纯熟 | 2015-10-11 22:11:35
[mw_shl_code=javascript,true]var rect:egret.Rectangle = this.curMiniStep.rect;
            var g:egret.Graphics = this.maskShape0.graphics;
            g.clear();
            g.beginFill(0,0);
            g.drawRect(0,0,rect.x+rect.width,rect.y);
            g.endFill();
            g = this.maskShape1.graphics;
            g.clear();
            g.beginFill(0,0);
            g.drawRect(rect.x+rect.width,0,GameConst.StageW-rect.x-rect.width,rect.y+rect.height);
            g.endFill();
            g = this.maskShape2.graphics;
            g.clear();
            g.beginFill(0,0);
            g.drawRect(rect.x,rect.y+rect.height,GameConst.StageW-rect.x,GameConst.StageH-rect.y-rect.height);
            g.endFill();
            g = this.maskShape3.graphics;
            g.clear();
            g.beginFill(0,0);
            g.drawRect(0,rect.y,rect.x,GameConst.StageH-rect.y);
            g.endFill();

            stage.addChild(this.maskShape0);
            stage.addChild(this.maskShape1);
            stage.addChild(this.maskShape2);
            stage.addChild(this.maskShape3);[/mw_shl_code]
这个是我的做法
也是绘制4个矩形的,
this.curMiniStep.rect这个是解析后的配置
sunhell088  登堂入室 | 2015-10-12 18:18:05
这里再贴个dom大神给的方案,大家参考下:

大体上思路是用blendmode.erase去实现,擦除一个区域出来,得到那个遮盖用的对象。点击还是有点麻烦,不能直接穿透,得自己再实现。这个事情好像目前没有什么简单的办法。

有个Flash没有的API,Bitmap.pixelHitTest,把这个属性设置为true的话,透明区域可以穿透。你可以把Graphics镂空的图画到RenderTexture上。或者直接弄张镂空的大图,然后用Bitmap显示出来。设置Bitmap.pixelHitTest=true ,就可以穿透了
jokerlee  登堂入室 | 2016-1-15 15:35:56
本帖最后由 jokerlee 于 2016-1-15 17:51 编辑

可以用矢量绘图API来做 贴一个我用矢量绘图API实现的圆形镂空
[mw_shl_code=applescript,true]
class HollowedOutLayer extends egret.DisplayObjectContainer {

    private circleX: number;
    private circleY: number;
    private radius: number;

    constructor(x: number, y: number, radius: number) {
        super();

        this.circleX = x;
        this.circleY = y;
        this.radius = radius;

        var width = util.stageWidth();
        var height = util.stageHeight();

        var left = new egret.Shape();
        left.x = 0;
        left.y = 0;
        left.graphics.beginFill(0x000000, .5);
        left.graphics.lineTo(0, height);
        left.graphics.lineTo(x, height);
        left.graphics.lineTo(x, y + radius);
        left.graphics.drawArc(x, y, radius, 0.5 * Math.PI, 1.5 * Math.PI);
        left.graphics.lineTo(x, 0);
        left.graphics.lineTo(0, 0);
        left.graphics.endFill();
        this.addChild(left);

        var right = new egret.Shape();
        right.x = x;
        right.y = 0;
        right.graphics.beginFill(0x000000, .5);
        right.graphics.lineTo(0, height - radius);
        right.graphics.drawArc(0, y, radius, 1.5 * Math.PI, 0.5 * Math.PI);
        right.graphics.lineTo(0, height);
        right.graphics.lineTo(width - x, height);
        right.graphics.lineTo(width - x, 0);
        right.graphics.lineTo(0, 0);
        right.graphics.endFill();
        this.addChild(right);

        this.touchEnabled = true;
        this.touchChildren = false;
    }

    // 覆盖hitTest方法 实现点击镂空区域穿透
    $hitTest(stageX: number, stageY: number): DisplayObject {
        var local = this.parent.globalToLocal(stageX, stageY);
        var dx = local.x - this.circleX,
            dy = local.y - this.circleY,
            r = this.radius;
        return dx * dx + dy * dy > r * r ? this : null;
    }
}

[/mw_shl_code]
ZXQ  初窥堂奥 | 2016-1-15 15:57:40
mark 一下
jax  圆转纯熟 | 2016-1-15 18:17:25
这个比较有用
ryltcsjg  圆转纯熟 | 2016-4-18 12:19:34
mark
taotao88  圆转纯熟 | 2016-8-31 16:28:27
jokerlee 发表于 2016-1-15 15:35
可以用矢量绘图API来做 贴一个我用矢量绘图API实现的圆形镂空
[mw_shl_code=applescript,true]
class Hollo ...

请问这个 $hitTest 是什么用的
nanfang  登堂入室 | 2016-9-7 16:41:09
本帖最后由 nanfang 于 2016-9-7 16:46 编辑

如果不怕麻烦,其实就是只能点引导的按钮,点其他的地方就event.stopImmediatePropagation();
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部