实用实用 BlendFunc和图片遮罩,shader带透明度遮罩

前置说明:对于没用过不了解blendfunc的同学,可能就此打开了新世界的大门,blendfunc是一个非常非常实用的功能


idea来源: 一个美术同学跟我咨询的需求,他说他们程序不会做?

BlendFunc的混合方式,来实现一个通用的图片遮罩

image

BlendFun 的概念介绍在这里 看链接部分的第二个混合段的介绍哦。

金色图盖在原图上,这里给金色图片用的混合是
image

  • 出来就是图上的效果,这样就可以给一套图标制作一个通用的金色遮罩,而不是给每一个图片单画一个金色图标来用,而且涉及到图中的不同缺损状态,通用方式三张图就够,画画的话就得画出每个图标三个状态的图。
  • 这个做法是非常实用的,可能你现在没碰到过,但是我保证每个一线开发总归会碰到这种需求的,而且很多时候这种需求就提不到程序这里,需求会在美术层面实现完,但是程序和程序的差别就在这里,别人用了 icon数*3 的图片来实现一个效果,你用了icon数+3来实现一个效果。区别大不大?

第二个方案,使用纹理遮罩

  • 是混合算法做出来的图 可能功能是有了,但是美术效果差强人意,美术同学想要自己画一张好看的,然后用不同的遮罩来做不同的残缺状态,咋办呢,画一张完全图,上遮罩图做残缺,如上图第二个的白色块就是
  • 做法很简单,这里就不上代码了,核心总共只有两行
# 传入遮罩图,就是白色块的图进入shader
        texture1: { value: white }

# 做裁剪
    vec4 mask = texture2D(texture1,v_uv0);
    o -= mask.a;
  • 完事,就这么简单 引擎的遮罩我用得少不评价哈,但是我们自己想做一个灵活的遮罩的话,shader还是比较方便的。这个shader是支持边缘区域的半透明的,这里因为半透明,所以减值后透明去颜色会变黑,能让遮罩图的边缘有一些立体效果。参考下图
    image
3赞

mark一下,等你下班

场景和代码上传了https://store-my.cocos.com/#/seller/resources/detail/3438

大佬,网址没找到源码诶

https://store.cocos.com/app/detail/3438