Textures from spritesheet include edges of other sprites

[jpawlak]

Hey, I am trying to use spritesheet in pixi but I encountered weird issue. Some edges of sprites contain pixels from near textures. Padding in spritesheet didn't help, lines of pixels from other textures change to empty spaces  

[ivan.popelyshev]

Welcome to opengl/webgl , that's the first thing people see here

 Default pixi shaders dont "clamp" stuff, and LINEAR interpolation makes problems.

The best way is to make padding in your spritesheet. plugins like pixi-tilemap know how to clamp coords properly.

[jpawlak]

Thanks for your response!

Padding didn't help in my case, now i see empty spaces between tiles.
Do you have snippet of how to use pixi-tilemap?

[ivan.popelyshev]

> now i see empty spaces between tiles.

try turn off antialias, you dont need it (new Application({antialias:true <-- remove this thing)

as for pixi-tilemap, here's tutor: https://github.com/Alan01252/pixi-tilemap-tutorial

The usual algorithms with tilemap:

1. WINDOW. maintain a WINDOW around camera where tiles are filled. If something changes inside - > FOR FOR refill it. If camera goes out of WINDOW -> move window, refill.

basically, you have to "draw" a map in tilemap every time something happens. For that plugin its fast, it just dumps stuff into array, no objects are created.

2. Chunks. Yeah, like in minecraft. Maintain many small tilemaps that cover the map.

[Exca]

Use extrude (TexturePacker has this at least) to fill in extra amount of "correct" color to outside of the actual pixel area of the image. That way AA wont mess up by blending nearby empty area into end result.

[8Observer8]

I use "Extrude=1" in FreeTexturePacker to avoid this artifact. This option will duplicate the pixels that are located on the border of the sprite.

Edited November 19, 2022 by 8Observer8

[8Observer8]

I created these screenshots to show what I mean:

  

Solution (Extrude=2):

 

Edited November 20, 2022 by 8Observer8

[8Observer8]

Free Texture Packer (http://free-tex-packer.com/) supports many engines including Pixi.js, but I prefer pure WebGL and SDL2/OpenGL for Android/iOS/Desktop, so I use JSON (hash) format.