Phaser.Scale.RESIZE causes bleeding on tilemaps

[Nerodon]

Version

• Phaser Version: 3.70.0

• Operating system: Windows 11

• Browser: Chrome, Firefox & Edge

Description

Using Phaser.Scale.RESIZE causes bleeding issues with tilemaps. If this option is set, and the frame is moved, the bleeding gets quite heavy on some tilesets.

The settings: roundPixels : true pixelArt: true

Does not improve.

Using an extruder on the tileset also did not fix the issue. It may make it less frequent but it still happens often. The only workaround I have found is to use a different scaling option.

Example Test Code

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.image('tiles', 'assets/tilemaps/tiles/catastrophi_tiles_16.png');
        this.load.tilemapCSV('map', 'assets/tilemaps/csv/catastrophi_level2.csv');
    }

    create ()
    {
        const map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
        const tileset = map.addTilesetImage('tiles');
        const layer = map.createLayer(0, tileset, 0, 0);

        // Visual test to make sure tiles don't bleed while scrolling at certain speeds
    }

    update (time, delta)
    {
        this.cameras.main.scrollX = (200 + Math.cos(time / 1000) * 200);
        this.cameras.main.scrollY = (500 + Math.sin(time / 1000) * 500);
    }
}

const config = {
    type: Phaser.WEBGL,
    scale: { mode: Phaser.Scale.RESIZE }, // <--- Just add this to reproduce
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    pixelArt: true, // <--- These do not improve bleeding 
    roundPixels : true, // <--- These do not improve bleeding 
    scene: Example
};

const game = new Phaser.Game(config);

The above code is a slight modification to the visual tile bleed test

Additional Information

Simply resize the window a bit, and you'll see a lot of bleeding occurring. I have tried other scale modes and could not reproduce, it seems pretty much only happening with RESIZE, I believe that the RESIZE leaves the renderer with floating point offsets that the roundPixels : true doesn't compensate for.

[yaustar]

We see this issue too since 3.61.0 beta 3. I've narrowed down the issue to a series of commits of moving the round pixels logic to the shader

To get around it, we ended up changing our tileset to have edges that 'bleed' out a few pixels as mentioned here https://github.com/phaserjs/phaser/issues/3352

It doesn't fix all the rendering issues as at some zoom levels, repeated patterns looks incorrect (this pattern should be repeated seamlessly)

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[yaustar]

Confirmed fixed on Phaser 3.80.0, thanks!