Gaps between sprite tiles when scaling the stage

[vdddslep]

I work on a simple game prototype which uses the tilemap 

I have a scene which extends PIXI.Container and has a map made out of individual pats of a texture atlas. 

At the end I have simple piece of code for zooming my scene by mousewheel, when I scale the scene the tiles sprites will have a small gap between them or they may overlay each other at certain points.

I tried to solve my problem the following ways:

1)  I've tried to use this settings 

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

2)  I've tried to set up my canvas like this:

canvas {
    image-rendering: pixelated;
}

3) I've tried to set up antialias property to true and vice versa 
4) I've tried to use Math.round to the position of each tile as well as to the position of whole scene 
5) I've tried to set up cacheAsBitmap = true to the whole scene 
6) I've try to use pixi-tilemap from there https://github.com/pixijs/pixi-tilemap, I made there small changes in the basic example, but I've got the same result   

Nothing was helpful 

This is my code which I use for zooming:

var self = stage;
rendererviewaddEventListener('mousewheel'function(event) {
    var factor   = delta = eventwheelDelta || -eventdetailpoint = new PIXIPoint(eventpageX / 1 eventpageY /1);
    // на сколько минимально можно отдалить объект
    var MIN_SCALE = 0.25;
    // максимально можно приблизить объект
    var MAX_SCALE = 1;
    var local_pt = selftoLocal(point);
    var curScale = selfscaley;
    if ( delta > 0) {
        // Zoom in
        factor = 0.1;
    } else{
        // Zoom out
        factor = -0.1;
    }
    if(factor > 0 && curScale >= MAX_SCALE) {
        //;
    } else if(factor < 0 && curScale <= MIN_SCALE) {
        //;
    } else {
        var parentLocal = point;
        selfpivotx = Mathround(local_ptx);
        selfpivoty = Mathround(local_pty);
        selfpositionx = Mathround(parentLocalx);
        selfpositiony = Mathround(parentLocaly);
        selfscaleset(selfscalex + factor);
    }
});

Does anyone know how to solve it?

[PixelPicoSean]

Try to set the antialias to false and roundPixels to true.

And the pixi-tilemap works without any issue on Canvas mode but will have gaps in between while using WebGL and run on some specific browsers (like safari).

[vdddslep]

Thank you PixelPicoSean

I just checked your suggestions, but it seems like it doesn't help to solve that issue.

I am starting to think that it is impossible to solve =( 

 

[Fatalist]

This happens because the pixels at the edges get blended with outer transparent pixels. If you are using TexturePacker to create your atlas, "extrude" option will help you. 

Usually, that is enough to get rid of the gaps. You are using WebGL renderer, right?

[vdddslep]

Thank you Fatalist

It helped, I can't believe it, but yep it works! 
The only problem is that I have to set roundPixels to true which I don't like because the tiles jumps when I scroll the scene.

Is there any other option except roundPixels which I could use?

[vdddslep]

Or maybe there is any other way to to set roundPixels to true for my desired object only instead of the entire scene

[Fatalist]

11 hours ago, vdddslep said:

The only problem is that I have to set roundPixels to true

So I guess you are using CanvasRenderer, in WebGL that should not be necessary.

Can you post it on jsfiddle/codepen?

[vdddslep]

I am sorry that I didn't explain it in more detail: 

1) I use WebGL because I need to use some shaders for my demo, so WebGL is a crucial for my demo 

2) I've solved the problem with the tiles by using roundPixels set to true and TexturePacker with "extrude" option

That was a good part =), but:

I have lets say asteroid field in my demo and each asteroid have a random animation like this: 

public update() {
    this.asteroid.rotation += 0.0005;
}

and I am calling that "update" each frame 

As you can see the precision of the rotation is very high and I have some kind of distortion when I rotate asteroid with that precision and that is the problem for me now. 

 

Thank you and I'll appreciate any help.

 

[Fatalist]

 

13 hours ago, vdddslep said:

I have some kind of distortion when I rotate asteroid

Can you post a screenshot?

BTW, did you delete this code - "  I've tried to use Math.round to the position of each tile as well as to the position of whole scene  " ?

[merachefet]

Using mipmapping on repeating textures in GL is the cause of those seams, that's why it only shows up when you scale. The explanation is here, scroll down to "Mipmapping Texture Atlases". It can be covered up with tricks like that "extrude" option, but the only way to fix it completely is to turn off hardware mipmapping.

[Fatalist]

5 hours ago, merachefet said:

but the only way to fix it completely is to turn off hardware mipmapping.

Well without mipmapping it will be pixelated at lower scales.

Actually extrusion does solve it completely as far as I know, do you know a scenario where it does not?