White lines on screen (SOLVED)

So maybe this is a problem on my end but one of my images has a white line running through it depending on where I put it. When it’s at 392, 130, 0 the shield icon looks like this

When it’s at 391, 130, 0 the shield icon looks like this

Any idea what’s causing this?

Edit: for clarity, i’m referring to the one on the bottom left

Hi!

I guess image is located in an atlas; what are the padding and margin properties set for the atlas? :slight_smile:

All three of the properties in the atlas are set to zero.

I don’t see any reason for the white line to appear “mid image” like that, but could you try changing the padding to 2?

Same thing

Whoops, I was confused, what I really meant was actually “Extrude Borders”. :stuck_out_tongue:

1 Like

Still there

(Sorry for the late reply, been procrastinating)

Are you sure it’s not in your image? There isn’t some miniscule bit of transparency there or something? It’s only happening with that image, right?

It happens with the other images too but they were all made with the same template essentially. Not a game breaking bug since I can literally move it over one spot to the right but I was just curious.

Would you mind inviting me (bjorn.ritzl@king.com) to your project (from the dashboard, select your project and go to Team->Add Member). Don’t forget to synchronise your files as well!

Done. Added some comments so you can see where it is.

Thanks. Is it the project named Light, Heavy, Parry? If so all I get is an empty project. Have you synchronised your files?

Tried to before adding you. How long is synchronizing supposed to take? I left on it for hours and it’s still going.

Oh, I see. It should usually only take seconds, depending a bit on the changes. What OS are you using?

Do you happen to have an external git tool that you are comfortable using? If that’s the case you can sync your files using that tool instead (the root of the project is a git repo).

I’m using windows 10. Trying to use github but it is such a pain in the ass (or maybe I’m just stupid). I just tried to synch things again and it said it worked. Can you see it now?

Yes, got the files now! Taking a look at the code during the day.

Ok, so I have it figured out now. It’s caused by texture bleeding:

In the background.atlas you have a white background image and the curve image:

If we hide the background it becomes obvious what’s going on:

The edge of the curve image bleeds together with the white background image when the data from the texture is read. The solution is to extrude the border of each image. Out texture packer can do it for you if you specify a non zero value for Extrude Borders when the root of an atlas is selected. A value of 2 is recommended if you’re going to scale the sprites using the images in the atlas.

The reason why it wasn’t always apparent is that both the icon images and the curve images are on the same z-depth of 0. When multiple sprites have the same z-value the rendering order is not guaranteed. Sometimes a curve image is rendered above an icon and sometimes below.

BTW If you want a white background image you can instead do like this:

msg.post("@render:", "clear_color", { color = vmath.vector4(1,1,1,1) })

This will post a clear_color message to the render script and the specified color will be used as background color.

An alternative solution would be to use a 1x1 pixel white dot and scale it to cover the entire background. This would reduce the atlas size significantly and save GPU memory but otherwise be equivalent to what you’re using today.

6 Likes

Changed the extrude value to 2 and the bleedings gone. I appreciate the help. Ultimately, I plan on having an actual background, the white one is just a stand in.

Is it better to just change the Z values for backgrounds? I usually set them to a negative value in Unity but it slipped my mind here since it looked fine originally.

1 Like

Better than what? You should use the z-value to control the order in which sprites and other things are drawn. Remember that the default render script has a z-range from -1 to 1. Make a copy and increase this so you get a bit more flexibility and don’t have to mess with fractional z-values.

You should also keep in mind how the number of draw calls are affected by how you interleave components based on z-value. Kingster @Mattias_Hedberg has written an excellent summary in this article.

1 Like