thin lines appearing at the border of tiles but are not in the image
Asked Answered
A

6

0

Hi,

I am have created a small serious game to practice rowing commands. But I have a strange problem sometimes thin lines appear at the border of the tiles in the back ground which keep on jittering. Often when the view rotates they disappear. The lines are not in the image it selves, it looks like some kind of rounding problem. I have tried every thing but I can not get rid of them:

You can see them live on my website. (just look at the green tiles near the barn on the left side)
https://www.vangulik.org/PracticeRowingCommands/?lang=en

The source code is
https://github.com/tijmenvangulik/PracticeRowingCommands

This behavior drives me crazy .. Can any one spot where it goes wrong in the code or does some one has an idea where to look? Thanks in advantage

Tijmen

Awestricken answered 21/8, 2022 at 16:34 Comment(0)
H
0

It could be two things. Filtering or sub-pixels. When you use any image or sprite, unless it is displayed at pefect native resolution (not scaled or rotated) then there is some filtering, typically bilinear (but it could be others). This is when several pixels from around the theoretical pixel are sampled to contribute to the physical pixel on the screen. So if you have two tiles in a single image, the sampling could be looking at two unrelated tiles (for example if grass and dirt are next to each other, they can bleed in).

The other issue is with sub-pixels, sort of related. Even if you disable filtering (which you can do in the import options) there will still be a mismatch between a sprite pixel and a screen pixel. Enabling GPU pixel snap will fix this (in the project settings) but only if you never scale or rotate the sprites. If you do scaling or rotation, then it is impossible for a sprite pixel to exactly match a screen pixel. Each screen pixel will actually be a combination of multiple sprite pixels, which can cause shimmering, weird border lines, and colors from one tiles bleeding into another.

I think the only way to solve both problems is to give a border (2 pixels at least, but 4 pixels works well) around each tile. So, for example, if you have a grass tile and a dirt tile, the grass can have a solid green 2 pixel border around it, and the dirt has a solid 2 pixel brown border. It takes a little more work to assemble the tile map, but it is possible in Godot. In this case, you can choose to enable or disable GPU pixel snap, I don't think it will matter, but GPU snap helps with jittering. But you should enable image filtering as you are rotating the sprites and they will flicker if it's disabled.

Hedjaz answered 22/8, 2022 at 9:20 Comment(0)
O
0

2 things come to mind, camera zoom might be off and the image/s imported for the tilemap might have something funky going on with the filtering.

Odetteodeum answered 21/8, 2022 at 19:15 Comment(0)
M
0

In the past, problems like this were fixed by separating the tiles of your spritesheet -- either making them separate files, or putting a one pixel border between them. I'm not sure if godot suffers from this issue, but it's cropped up in other engines I've used.

Mokas answered 22/8, 2022 at 1:40 Comment(0)
M
0

I also noticed this in the documentation. It's not quite your situation, but you might try it:
"If you're using a Camera2D to scroll your level, you may notice lines appearing between your tiles. To fix this, open Project Settings and enable Use Gpu Pixel Snap in the Rendering > 2d > Snapping section."

Mokas answered 22/8, 2022 at 9:4 Comment(0)
H
0

It could be two things. Filtering or sub-pixels. When you use any image or sprite, unless it is displayed at pefect native resolution (not scaled or rotated) then there is some filtering, typically bilinear (but it could be others). This is when several pixels from around the theoretical pixel are sampled to contribute to the physical pixel on the screen. So if you have two tiles in a single image, the sampling could be looking at two unrelated tiles (for example if grass and dirt are next to each other, they can bleed in).

The other issue is with sub-pixels, sort of related. Even if you disable filtering (which you can do in the import options) there will still be a mismatch between a sprite pixel and a screen pixel. Enabling GPU pixel snap will fix this (in the project settings) but only if you never scale or rotate the sprites. If you do scaling or rotation, then it is impossible for a sprite pixel to exactly match a screen pixel. Each screen pixel will actually be a combination of multiple sprite pixels, which can cause shimmering, weird border lines, and colors from one tiles bleeding into another.

I think the only way to solve both problems is to give a border (2 pixels at least, but 4 pixels works well) around each tile. So, for example, if you have a grass tile and a dirt tile, the grass can have a solid green 2 pixel border around it, and the dirt has a solid 2 pixel brown border. It takes a little more work to assemble the tile map, but it is possible in Godot. In this case, you can choose to enable or disable GPU pixel snap, I don't think it will matter, but GPU snap helps with jittering. But you should enable image filtering as you are rotating the sprites and they will flicker if it's disabled.

Hedjaz answered 22/8, 2022 at 9:20 Comment(0)
A
0

Thank you for all your quick reply's I will try them out and come back later.

Awestricken answered 22/8, 2022 at 15:37 Comment(0)
A
0

It involved some work but I have implemented the fix and it works perfectly. Thank you for helping me.

Awestricken answered 24/8, 2022 at 17:10 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.