Tilemaps have vertical gridlines with WebGL disabled (HTML5)

Whenever I test my HTML5 game with WebGL disabled (with -D canvas), the tiles have vertical lines between them when the camera scrolls. How do I fix this?
I like making physics puzzle games.
Stay tuned for more Angry Blosics updates!
R.I.P Sploder 2007-2020
Stencyl is the new Sploder.


  • Posts: 1
This issue is most likely caused by "bleeding" of adjacent tiles in your game when using the canvas renderer, which is not present when using WebGL. To fix this issue, you can try the following solutions:

Use texture atlases: Texture atlases are a way to combine multiple images into a single texture, reducing the number of draw calls required by the game. When using texture atlases, make sure that adjacent tiles share the same texture to avoid bleeding.

Add padding: Add padding around each tile in your texture atlas to prevent the bleeding caused by texture filtering. Padding can be added either manually or automatically through your game engine's texture packing algorithm.

Use a wrapping texture mode: By setting the texture mode to "wrap" instead of "clamp," you can prevent the black lines from appearing at the edges of your tiles.

Disable anti-aliasing: When using the canvas renderer, disabling anti-aliasing can help prevent bleeding between adjacent tiles.

Use a higher resolution: If all else fails, using a higher resolution for your tiles can reduce the impact of texture filtering and prevent bleeding.

Keep in mind that these solutions may impact performance or require additional work, so it's important to weigh the benefits against the costs before implementing them.
Link removed

« Last Edit: March 29, 2023, 09:11:53 pm by merrak »