新手引导用mask组件，多区域高亮

Creator 2.x
#1

用mask组件，加一个背景全黑的，确实可以实现高亮一块区域，然后配合文字，手指什么的，但是如何高亮两个或很多的区域，怎么把红色部分也高亮镂空。。

image.png626×528 32.7 KB

#2

我当初也有这个需求就放弃使用mask组件，自己写个shader去扣

#3

论坛上有现成的

#4

大神可以分享一下么

#5

请问哪里有现成的

#6

自定义stencil使用cc.Graphic画图想挖几个挖几个，反向遮罩就可以实现啊，类似模拟弹坑效果。

#7

抱歉,不是太关注论坛,明天贴代码.

#8 
uniform sampler2D texture;
uniform vec4 color;
uniform vec4 mask1;
uniform vec4 mask2;
uniform vec2 size;
varying vec2 uv0;

float eclosion(vec2 uv, vec4 rect, float w_h) {
    vec2 min2f = vec2(rect.r, rect.g - rect.a );
    vec2 max2f = vec2(rect.r + rect.b, rect.g);
    float maxDis = sqrt(rect.b * rect.b + rect.a * rect.a);
    float dis = distance(uv, vec2( (max2f.x + min2f.x) / 2.0, (max2f.y + min2f.y ) / 2.0));
    return (dis / maxDis )  * color.a;
}

void main()
{
    float w_h = size.x / size.y;
    float maxA = color.a;
    float a1 = color.a;
    float a2 = color.a;
    if(mask1.r >= 0.0) {
        a1 = eclosion(uv0, mask1, w_h);
    }
    if (mask2.r >= 0.0) {
        a2 = eclosion(uv0, mask2, w_h);
    }
    float a = min(a1, a2);
    a = min(a, color.a);
    gl_FragColor = vec4(color.rgb, a);    
}
7赞
#9

Mark！Mark！Mark！