search

phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.12k stars 7.1k forks source link

tileSprite scaling the tiled image in Y axis #3460

Closed DouglasLapsley closed 6 years ago

DouglasLapsley commented 6 years ago

Version: 3.3.0

For some reason tileSprite will sometimes scale the background image in the Y direction. This consistantly happens with some sprites and not others.

Here is the sprite sheet file:

sprites

The sprite sheet json is:

{
    "textures": [
        {
            "image": "Sprites.png",
            "format": "RGBA8888",
            "size": {
                "w": 1780,
                "h": 657
            },
            "scale": 1,
            "frames": [
                {
                    "filename": "midground2",
                    "frame": {
                        "x": 1,
                        "y": 1,
                        "w": 1024,
                        "h": 259
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 1024,
                        "h": 259
                    },
                    "sourceSize": {
                        "w": 1024,
                        "h": 259
                    }
                },
                {
                    "filename": "bgPlanet1",
                    "frame": {
                        "x": 1027,
                        "y": 1,
                        "w": 752,
                        "h": 415
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 752,
                        "h": 415
                    },
                    "sourceSize": {
                        "w": 752,
                        "h": 415
                    }
                },
                {
                    "filename": "midground1",
                    "frame": {
                        "x": 1,
                        "y": 262,
                        "w": 1024,
                        "h": 212
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 1024,
                        "h": 212
                    },
                    "sourceSize": {
                        "w": 1024,
                        "h": 212
                    }
                },
                {
                    "filename": "bgPlanet3",
                    "frame": {
                        "x": 1027,
                        "y": 418,
                        "w": 237,
                        "h": 238
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 237,
                        "h": 238
                    },
                    "sourceSize": {
                        "w": 237,
                        "h": 238
                    }
                },
                {
                    "filename": "foreground",
                    "frame": {
                        "x": 1,
                        "y": 476,
                        "w": 1024,
                        "h": 156
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 1024,
                        "h": 156
                    },
                    "sourceSize": {
                        "w": 1024,
                        "h": 156
                    }
                },
                {
                    "filename": "planet1",
                    "frame": {
                        "x": 1266,
                        "y": 418,
                        "w": 154,
                        "h": 117
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 154,
                        "h": 117
                    },
                    "sourceSize": {
                        "w": 154,
                        "h": 117
                    }
                },
                {
                    "filename": "planet5",
                    "frame": {
                        "x": 1422,
                        "y": 418,
                        "w": 114,
                        "h": 77
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 114,
                        "h": 77
                    },
                    "sourceSize": {
                        "w": 114,
                        "h": 77
                    }
                },
                {
                    "filename": "planet3",
                    "frame": {
                        "x": 1538,
                        "y": 418,
                        "w": 112,
                        "h": 114
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 112,
                        "h": 114
                    },
                    "sourceSize": {
                        "w": 112,
                        "h": 114
                    }
                },
                {
                    "filename": "bgPlanet2",
                    "frame": {
                        "x": 1422,
                        "y": 497,
                        "w": 106,
                        "h": 106
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 106,
                        "h": 106
                    },
                    "sourceSize": {
                        "w": 106,
                        "h": 106
                    }
                },
                {
                    "filename": "saucer1",
                    "frame": {
                        "x": 1266,
                        "y": 537,
                        "w": 100,
                        "h": 60
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 100,
                        "h": 60
                    },
                    "sourceSize": {
                        "w": 100,
                        "h": 60
                    }
                },
                {
                    "filename": "saucer2",
                    "frame": {
                        "x": 1266,
                        "y": 599,
                        "w": 105,
                        "h": 53
                    },
                    "rotated": false,
                    "trimmed": true,
                    "spriteSourceSize": {
                        "x": 1,
                        "y": 0,
                        "w": 105,
                        "h": 53
                    },
                    "sourceSize": {
                        "w": 106,
                        "h": 53
                    }
                },
                {
                    "filename": "planet2",
                    "frame": {
                        "x": 1652,
                        "y": 418,
                        "w": 78,
                        "h": 91
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 78,
                        "h": 91
                    },
                    "sourceSize": {
                        "w": 78,
                        "h": 91
                    }
                },
                {
                    "filename": "planet4",
                    "frame": {
                        "x": 1652,
                        "y": 511,
                        "w": 82,
                        "h": 82
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 82,
                        "h": 82
                    },
                    "sourceSize": {
                        "w": 82,
                        "h": 82
                    }
                },
                {
                    "filename": "saucer3",
                    "frame": {
                        "x": 1530,
                        "y": 534,
                        "w": 81,
                        "h": 76
                    },
                    "rotated": false,
                    "trimmed": true,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 1,
                        "w": 81,
                        "h": 76
                    },
                    "sourceSize": {
                        "w": 81,
                        "h": 77
                    }
                },
                {
                    "filename": "ship",
                    "frame": {
                        "x": 1373,
                        "y": 605,
                        "w": 101,
                        "h": 45
                    },
                    "rotated": false,
                    "trimmed": false,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 101,
                        "h": 45
                    },
                    "sourceSize": {
                        "w": 101,
                        "h": 45
                    }
                },
                {
                    "filename": "saucer4",
                    "frame": {
                        "x": 1613,
                        "y": 595,
                        "w": 98,
                        "h": 51
                    },
                    "rotated": false,
                    "trimmed": true,
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 1,
                        "w": 98,
                        "h": 51
                    },
                    "sourceSize": {
                        "w": 98,
                        "h": 52
                    }
                }
            ]
        }
    ],
    "meta": {
        "app": "https://www.codeandweb.com/texturepacker",
        "version": "3.0",
        "smartupdate": "$TexturePacker:SmartUpdate:941657f57b8cdfa4193612e148e4877c:7b4bff490df08a9b5c9f6d21aaedff88:3cdb13131f548fed5fbd9288201b06ea$"
    }
}

In the preload function I have:

    this.load.atlas('sprites', this.p('Sprites.png'), this.p('Sprites.json'));

In the create function I have:

    this.midground2 = this.add.tileSprite(this.gameWidth/2, this.gameHeight/2, 1024, 259, 'sprites', 'midground2').setDepth(10);
    this.midground1 = this.add.tileSprite(this.gameWidth/2, this.gameHeight - 105, 1024, 212, 'sprites', 'midground1').setDepth(20);

I get the following displayed:

screenshot from 2018-03-27 11-08-06

You can see that the top image has been scaled in the Y direction.

I had this on another game I was working on a week or so back with a previous version of Phaser as well, although I don't remember which build it was.

Thanks!

DouglasLapsley commented 6 years ago

Just a quick follow up to this. This morning I opened the project again and the scaling is correct. I didn't restart the computer or anything (it was on over night). Nothing in the project has changed since last running it. So this is clearly a bit more random than it seemed. The times that I've had this issue it has been consistently the same sprites causing the issues (I've seen this issue on three separate occasions of the last couple of weeks). So I am surprised that the background that was failing yesterday is now suddenly working.

DouglasLapsley commented 6 years ago

Another follow up. I also just opened a different game that was having the same issue and that too is now working perfectly. I am wondering if it might be something to do with Angular 4 (which I am using). I have sometimes seen it require a full recompile rather than a reload for newly updated assets to be properly included. The only difference I can see this morning is that I recompiled the Angular app rather than just letting it live reload.

photonstorm commented 6 years ago

I'm going to close this issue off in the hope that it was just an Angular issue like you said. However, if it reoccurs and can be reproduced consistently then please open a new issue and we can investigate.