Weird flickering in scene with a lot of Sprites (roughly 1000)

[Squarew00t]

Hello, I have an issue with some weird flickering on a scene with a lot of Sprites.

There appear these black lines in the images, when the scene moves. All Sprites are in a single container. I'm using the pixi-viewport plugin.

Anyone knows why this is? I have antialiasing enabled. I tried the vannila version of the latest pixijs too, same problem. Anyone giving me a hint would be so appreciated!

Ps: I could also add a video of the phenomenon if its necessary but as soon as I move the container these artifacts seem to occur

Edited March 6, 2022 by Squarew00t

[Squarew00t]

This seems to be a known issue If you Turn Out Interpolation: https://github.com/pixijs/pixijs/issues/6676

Is there any way to fix this? I dont want to Change Frameworks

apperently the issue gets much less worse if I load each texture from a seperate file except from one big file by offsets:

sample code (bad because of artifacts):

for (let i = 0; i < world_tiles_texture.height; i += TILE_SIZE) {
    for (let j = 0; j < world_tiles_texture.width; j += TILE_SIZE) {
        let sprite_texture = new Texture(world_tiles_texture, new Rectangle(j, i, TILE_SIZE, TILE_SIZE));
        this.tiles.push(sprite_texture);
    }
}

better code (artifacts much less but still present):

import water from './water.png';
let water_texture = BaseTexture.from(water);
water_texture.scaleMode = SCALE_MODES.NEAREST;
export let water_text = new Texture(water_texture, new Rectangle(0,0,8,8));

... // repeat for all textures

This is how it looks if I load textures seperately

anyone got a solution to completely get rid of those artifacts or at least give me a hint what could be the reason for that?

I'm sure every grid based game should face similar problems so im sure im doing something fundamentaly wrong?

 

Edited March 6, 2022 by Squarew00t

[Squarew00t]

sorry for bumping again but one (really stupid/lazy) fix that seems to work really good seems to just upscale each sprite by a tiny amount, so these small gaps are not shown:

sprite.scale.set(1.1)

if you still got a better option for me please share

[Exca]

Might be due to AA -issues when rendering hits subpixels. Are you using texturepacker or similar tool for spritesheets? You could try using extrude of 2 pixels, might help. Or do the extrusion manually by creating the textures with 2px padding (new Rectangle(2,2,8,8) and have original image 4 px larger.

[Squarew00t]

11 hours ago, Exca said:

Might be due to AA -issues when rendering hits subpixels. Are you using texturepacker or similar tool for spritesheets? You could try using extrude of 2 pixels, might help. Or do the extrusion manually by creating the textures with 2px padding (new Rectangle(2,2,8,8) and have original image 4 px larger.

thank you so much for your help. I am not using a texturepacker, since I am using a very simple tilesheet (all tiles are 8x8 and pixel aligned), should this matter at all? I basically use one big BaseTexture which i devide into small Textures using (BaseTexture, Rectangle)

I tried your solution (if i understand it correctly) by rendering 2 sprites per tile:

let texture_id = this.world_tiles.get_tile(id);
let tile = new Sprite(texture_id);
// background sprite
let tile_bg = new Sprite(texture_id);

tile.position.set(posx * this.TILE_SIZE, posy * this.TILE_SIZE);

// background sprite bigger than original sprite
tile_bg.position.set(posx * this.TILE_SIZE -2, posy * this.TILE_SIZE -2);
tile_bg.scale.set(1.5);
this.viewport.addChild(tile_bg);
this.viewport.addChild(tile);

this seems to work flawlessly, thanks! I imagine that there might be some performance problems tho, because I draw twice the sprites. Any other ideas are still appreciated

[Exca]

Ah, didnt mean rendering 2 sprites per tile. But rather have the basetexture be 2px larger than the actual texture in each direction. So if you have a 8x8 basetexture then make it 12x12 and create the texture with 8x8 starting from 2,2. This way when subpixels on the edge of texture are rendered they will be interpolated between same color as what the edge is, instead of interpolating with whatever is near to that texture.

[Squarew00t]

1 hour ago, Exca said:

Ah, didnt mean rendering 2 sprites per tile. But rather have the basetexture be 2px larger than the actual texture in each direction. So if you have a 8x8 basetexture then make it 12x12 and create the texture with 8x8 starting from 2,2. This way when subpixels on the edge of texture are rendered they will be interpolated between same color as what the edge is, instead of interpolating with whatever is near to that texture.

thank you so much, that makes a lot of sense, the 2 pixels in each directions should then be filled with the edge values of the actual texture if i understand correctly (i mean for textures that are not just one solid color)? I will try this when i go home but will require me to restructure my whole tilemap, so this is how it should look for one basic texture?:

 

[Exca]

Yep, that looks correct. Though I'd suggest testing first if it works by using smaller region from current textures (for example use 4x4 area and 2,2 offset of texture instead of current 8x8 and confirm that it fixes the issue).

With automatic spritesheet tools (like texturepacker) you can create that extra data automatically with extrude -setting.