phaserjs / phaser-ce

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

2.11.0: Spritesheets with only 2 frames show whole sheet #559

Closed FostUK closed 6 years ago

FostUK commented 6 years ago

Moving from v2.10.5 to 2.11.0 - has caused buttons made from a 2 frame spritesheet to stop working.

2.10.5: 2 10 5

2.11.0 2 11 0

Example Button sprite sheet (180X180 with 4 pixel spacing) play

I think I've narrowed it down to this commit: https://github.com/photonstorm/phaser-ce/commit/4489fdd4e7235f58b25c281faec261064226f3b7#diff-52abcff05316a7bec5cea054ab01bd4d

With a 2 frame animation the row or column is zero so frame total ends up zero.

I fixed it by changing lines 89 and 80 of AnimationParser.js to:

        var row = Math.floor((width - margin) / (frameWidth + spacing)) + 1;
        var column = Math.floor((height - margin) / (frameHeight + spacing)) + 1;

Which adds 1 to each. Although I'm unsure if this is a workable solution.

samme commented 6 years ago

What are you using for load.spritesheet(…)?

samme commented 6 years ago

I tried that image in v2.10.5 and got the same result (but a different console warning).

It does work for me using the attached image and spacing=4.

frame size 180x180, spacing 4

FostUK commented 6 years ago

Just checked and 2.10.5 definitely still works for us. I checked adding 4 pixels spacing to the right and bottom of the image in 2.11.0 and that fixes it. Is this how sheets should look going forward?

We're not loading the spritesheet directly: we are using game.load.pack to load an asset pack so perhaps it's this path where something is different. Button json looks like this:

        {
            "type": "spritesheet",
            "key": "play",
            "url": "gel/desktop/play.png",
            "frameWidth": 180,
            "frameHeight": 180,
            "frameMax": 2,
            "margin": 0,
            "spacing": 4
        },

Happy to try and debug it a bit more but any suggestions where to look welcome :)

samme commented 6 years ago

The row and col calculations should be identical in v2.10.5 and v2.11.0, so I'm not sure how the same image could have worked before.

Do you see a console warning in either version?

samme commented 6 years ago

I found it: the difference is that before v2.11.0, frameMax would force the last frame event if it was too small.

I'm going to leave it how it is, because it's more consistent this way, but I've added some new warnings.

If you use spacing, every frame in the image must have spacing on its right and bottom edges, including last-in-row and last-in-column frames.

Sample spritesheet with margin=2, spacing=4

FostUK commented 6 years ago

Ah cool. Will make sure our buttons are updated.

Thanks!