关于我在【3.5.1】web端上遇到的Sprite、Spine的黑边问题

图片和spine很容易黑边,1像素线条很容易断断续续。

解决方案:
1、图片和spine的图集不进行压缩
2、网络图片和网络spine的图集手动开启预乘

let texture = new Texture2D();
// 手动开启预乘 线性模式
texture.setFilters(Texture2D.Filter.LINEAR, Texture2D.Filter.LINEAR);

以上两个方案能解决80%黑边问题;

下面这个就是解决99%黑边问题,但是会有代价:半透明图片不适用、部分spine可能存在透明度过曝问题。原理就是通过【透明度累乘】降低边缘黑色至几乎不可见。
3、复制sprite和spine的默认shader,并添加一行代码

// Sprite的shader
  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      // 改动代码
      o.a = o.a * o.a * o.a * o.a;
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif

    o *= color;
    ALPHA_TEST(o);
    return o;
  }

// Spine的shader
  vec4 frag () {

    vec4 o = vec4(1, 1, 1, 1);
    #if TWO_COLORED
      vec4 texColor = vec4(1, 1, 1, 1);

      texColor *= texture(cc_spriteTexture, uv0);
 	    o.a = texColor.a * v_light.a;
      o.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;
    #else
      o *= texture(cc_spriteTexture, uv0);
      o *= v_light;
    #endif

    // 改动代码
    o.a = o.a * o.a * o.a * o.a;

    ALPHA_TEST(o);
    return o;
  }

电脑、安卓手机、安卓平板、iOS手机、iOS平板上,相同的图片有的设备有黑边,有的设备没黑边。
到此为止,解决方案说完了,亲身经历被黑边折磨得体无完肤。

还是希望官方能出一个解决黑边毒瘤的方案,我这个太山寨了。。。

3赞