Thin line in 9-sliced texture when sprite resolution is high

[Litttlefish]

Bevy version

0.14

What you did

Update to 0.14

What went wrong

As the picture shown, there are thin lines in the background.

Additional information

The original picture resolution is 4x larger than the sprite, I don't know if this is the reason

[extrawurst]

Running into the same issue. @Litttlefish did you find a workaround for it?

[Litttlefish]

Running into the same issue. @Litttlefish did you find a workaround for it?

nope, no idea why this happens

[marcelchampagne]

Also running into the exact same issue after upgrading to 0.14.0. Smaller buttons using 9-slices have the lines as shown in the image.

[MScottMcBee]

Bisecting the issue, I think it's caused by the shader changes from #13523. It's reproducible in the ui_texture_slice example if you add with_scale_factor_override(4.0)

Digging in more it looks like the fact I'm using a scale factor if 4 is important. It doesn't happen if I use 1 or 2. Finding #13814, I changed the aliasing in my local branch to be return clamp(0.0, 1.0, 0.5 - 4.0 * distance); and it fixed the issue for me.

I'm wondering if we could have AA be a flag or something in that shader. My game has pixel art so I want to turn all AA off.

[Jaso333]

I observe this in the examples rendered in WebGL on the bevyengine website:

At default UiScale, I also observe this with my own 9patch button on 0.14.1. It is even worse at higher UI scales.

[StarArawn]

I noticed this same issue but worse in a non UI or sprite renderer. I noticed the resulting slices from the slicer can have a lot of precision this can easily result in errors like this.

[Jaso333]

Bisecting the issue, I think it's caused by the shader changes from #13523. It's reproducible in the ui_texture_slice example if you add with_scale_factor_override(4.0)

Digging in more it looks like the fact I'm using a scale factor if 4 is important. It doesn't happen if I use 1 or 2. Finding #13814, I changed the aliasing in my local branch to be return clamp(0.0, 1.0, 0.5 - 4.0 * distance); and it fixed the issue for me.

I'm wondering if we could have AA be a flag or something in that shader. My game has pixel art so I want to turn all AA off.

I did the same thing, except I changed the "0.5" to "1.0", as I think you need to double all terms in this calculation to change the AA threshold on the distance. This seemed to fix the problem, but I don't really know why. Maybe this change effectively disabled the anti-aliasing.

To highlight the change at UI scale factor of 8:

with "0.5" and "2.0" (the original values):

with "1.0" and "4.0" (this is precisely how my button should look):

I agree with @MScottMcBee, anti-aliasing is hard-coded to be enabled in bevy_ui, but probably shouldn't be? However, this form of anti-aliasing doesn't seem to be effective anyway, as the artifacts show for any scale or art style (not just pixel-art), so maybe it just needs correcting.

[MarcoMeijer]

This issue also applies to non 9-sliced textures

In my game I have this issue with regular ui images that are close to each other:

This issue was not there in 0.13

[brandon-reinhart]

Ah, I saw something like this happen when my desktop scale was not 1.0.

[Litttlefish]

This issue also applies to non 9-sliced textures

In my game I have this issue with regular ui images that are close to each other:

This issue was not there in 0.13

Now this issue is closed, you can try on 0.14.2🤔
if it stays still you can open a new issue I think
@MarcoMeijer

[alice-i-cecile]

Well, once we release 0.14.2 😂 Not out yet!

[DidItWork]

Hi, I seem to have a similar issue on Bevy 0.14.2 using a NodeBundle with Display::Grid Style and all flex columns and rows. Thin lines appear at some window sizes.

[alice-i-cecile]

That's a different bug: it's an off-by-one in our grid layout likely caused by rounding. Try updating, and it if it persists please open a new issue :)