ade

strange square outlines between tiles when playing a level (graphics glitch)

this is not something specifically related to this video, the glitch appear as soon as i started using tilemap. any idea why this is happening?
here is the video of that (turn quality up to 720p or else glitch isn't visable):
https://drive.google.com/file/d/1s3PE5TpW-d22CWQuMHKdwzaWzdM7Nu1o/view?usp=sharing
2 loves
  • ade replied

    Ok, so apearanly, after randomly setting values everywhere, i found that in project settings enabling "Use Gpu Pixel Snap" fixed the issue. maybe i somehow missed this setting in previous lectures? Also i'm curious, does "use gpu pixel snap" setting impact game performance in any meaningful way?

    1 love
  • GDQuestions replied

    This is a common issue with tilesets in all game engines. Basically when the camera moves or you zoom in and out, the edges of tiles land between pixels of the screen, and when the graphics card samples the tiles texture (it samples them one by one), there are decimal number inaccuracies that lead to those little gaps.

    When you turn on pixel snapping, it forces the GPU to snap all the coordinates it calculates to whole numbers, getting rid of those inaccuracies. However, this comes at the cost of a little less smoothness in the movement of sprites and the camera. It's not about performance, but rather about the visuals: because the graphics card snaps drawing to one pixel or another, very slight jumps occur on the screen.

    The larger the game resolution, the less you'll notice it. The lower the resolution (or the larger your display), the bigger pixels are on your display, and the more visible this becomes.

    The definitive solution to this is to have extra pixels draws around your tiles in your tileset textures. We call that a gutter or bleed between tiles.

    I think most professional game developers do something like this, typically by coding a tool that'll do it for you.

    The good news is the new tilemap system in Godot 4 will do it for you. So this problem shouldn't happen anymore. The bad news is you'll have to wait for Godot 4!

    In the meantime, the Gpu Pixel Snap option is a convenient workaround.

    3 loves
  • ade replied

    Hello, thanks for replay, i have a few questions. So for my understanding, gpu snapping just rounds every pixel existing in every tile into whole numbers, so example would be:
    pixel position (3.6, 4,3) turns into (4, 4)?

    gpu snapping only applies to tiles?

    if thats so, this still doesn't explain to me why there are lines outside the triangles (not between tiles), i uploaded another video footage, to make this more clear:
    https://drive.google.com/file/d/1_9L92skBTtNC7VlyutVv2CVcXAZd-Pkn/view?usp=sharing

    > The definitive solution to this is to have extra pixels draws around your tiles in your tileset textures

    So just expanding sprite by 1 pixel on all 4 sides is enough to fix this problem, or do you need more pixels?

    When we edit tileset cube selection region should be 82x82px instead of 80x80px?

    btw appreciate you work (:

    1 love
  • ade replied

    *your (damit can't edit stuff)

  • GDQuestions replied
    So for my understanding, gpu snapping just rounds every pixel existing in every tile into whole numbers, so example would be:
    pixel position (3.6, 4,3) turns into (4, 4)?

    Exactly. It's a little more complex than that in practice, as the GPU doesn't deal with pixels but fragments (they can be a geometric portion of a pixel, and the graphics card can calculate a final pixel color from multiple fragments) but yes it snaps positions like you say.

    gpu snapping only applies to tiles?

    No, it applies to all drawing in your

    So just expanding sprite by 1 pixel on all 4 sides is enough to fix this problem, or do you need more pixels?

    Yes, I thought you may need more, but the developer working on the new tilemap system explained the decimal error is so small 1 pixel should be enough in all situations.

    When we edit tileset cube selection region should be 82x82px instead of 80x80px?

    If you're speaking of the tile size in the tileset resource, no, it should still be 80x80, but with extra pixels outside. You have grid options when editing a tileset to make the grid 80x80 with some spacing between grid cells. You want to use that spacing to have a small gap between tiles, according to your texture. And so yes you'd use something like 82x82 pixels for each tile in your source texture image.

    I hope it makes sense, let me know if you have more questions. And thanks for the kind words.

    2 loves