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.

Home Page:http://phaser.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

2.11.0: Spritesheets with only 2 frames show whole sheet

FostUK opened this issue · comments

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: 4489fdd#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.

commented

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

commented

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

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 :)

commented

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?

commented

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

Ah cool. Will make sure our buttons are updated.

Thanks!