Cocos Creator 3.7.1 Black edges on images

Hi! When I import image to Creator and the filter is set, the image gets a black pixels on the border.

How to fix it? Cocos Creator 3.7.1, filter mode - bilinear, ENABLE_WEBGL_ANTIALIAS - true.

Thanks.

We need to know your scene layout

Please check Fix Alpha Transparency Artifacts to solve the black border problem.

Did I understand you correctly?
Black pixels appear at the border between the solid color and the shadow. Shadow has opacity

I have this checkbox but the problem remains

Ok, it might be an issue with webgl blending, in the editor we need to use transparent canvas, which will cause blend between semi-transparent pixels with background (of the canvas, not anything in the game content). If you try preview or publish, it should be more accurate, have you tried to see the difference ?
If it still happens, you can post your project here

Please provide your image resources for us to test.

I removed the background and enlarged the image. there were no problems in the editor, but there is a preview. Sorry, I can’t upload the attachment so I attached them.

examples: editor

preview -

button - btn_pause

background -panel_bg_blue

For spine components, there is a “Premultiplied Alpha” checkbox that removes black pixels. Is there something like that for images?

button - btn_pause

Because your image is a pixel style, you need to change the Fitter Mode of SpriteFrame to Nearset, so that the image effect can be correctly displayed.
Here is the result of my modification:


Here is the result of running the preview:

My image is not pixel style. I need to use Filter Mode - Bilinear because Nearest mode causes uneven edges. Is there any way to apply Bilinear mode without black edges appearing?

An example of why graphics in Nearest mode look bad:
Screenshot_67

The black border is due to the fact that in the WebGL program, when drawing, the texture object’s Filter is set to gl.Linear (linear filtering), when a semi-transparent pixel is sampled adjacent to a fully transparent pixel during pixel interpolation (e.g.,(0.1)).0, 0.0, 0.0, 0.(0) of this kind) produces black or white pixels.

If you want to eliminate the black edges in Bilinear mode, you need to premultiply the map alpha and change the blend src of the image to ONE. Currently CocosCreator 3.X does not support this feature, so you need to use TexturePacker to do it. After importing the image into texturePacker, the Alpha Handing is selected as Premultiply alpha, and then the Extrude and padding of Sprite need to be changed to 0.

Image after export:
texture001.png.zip (8.6 KB)

Create a new one using builtin-sprite.Material of effect
图片

Modify Blend src in blend state to ONE
图片

Sprite uses new images and materials:
图片

The effect in the browser preview:

demo:
001.zip (636.5 KB)

1 Like

If you modify it like the method above and compress it using astc or tinypng, the image will turn strange. Is there a way to reduce the capacity by compressing it?