Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TileSprite may not render for non-integer game sizes #2262

Closed
tsphillips opened this issue Dec 18, 2015 · 1 comment
Closed

TileSprite may not render for non-integer game sizes #2262

tsphillips opened this issue Dec 18, 2015 · 1 comment

Comments

@tsphillips
Copy link

If non-integer values are passed to the Phaser.Game constructor, then precision errors can lead to TileSprite not rendering correctly.

I am drawing TileSprite images (256 x 64 and 256 x 32) and they are rendering incorrectly. I am only tiling horizontally.

The 256 x 64 image is rendering as if I had set sprite.tilePosition.y = 1, although tilePosition.y is actually 0. The 256 x 32 image is rendering as if I had set sprite.tilePosition.y = -1, although tilePosition.y is actually 0.

The console reports Phaser v2.4.4 and Pixi v2.2.9. The bug seems to affect both CANVAS and WEBGL rendering. I have seen the bug on both Firefox and Chrome.

After quite a bit of debugging I found that the bug is caused by non-integer values passed to width and height of the Phaser.Game constructor. Below is sample code that replicates the issue.

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="lib/phaser.min.js"></script>
    <script>
    var x;
    var game = new Phaser.Game(1036.8, 613.8000000000001, Phaser.CANVAS, 'test_div');
    var testState = {
        preload: function() {
            this.game.load.image('floor', 'asset/app1/seafloor_256x64.png');
        },
        create: function() {
            this.floor = this.game.add.tileSprite(0, this.game.world.height - 100, this.game.camera.width, 64, 'floor');
            this.floor.anchor.set(0.0, 1.0);
            x = this.floor;
        }
    }
    game.state.add('test', testState);
    game.state.start('test');
    </script>
</head>
<body>
    <div id='test_div'></div>
</body>
</html>

I do not know the best way to address this bug. For now, I ensure the game sizes are integers.

(For anyone wondering, the strange game sizes came from code that automatically adapts to different mobile platforms.)
photonstorm added a commit that referenced this issue Feb 3, 2016
@photonstorm
The width and height values passed to the Game constructor are now pa…
3bc8dcd 
…ssed through Math.floor first. This ensures you can never create a game width non-integer dimensions, which has all kinds of implications - from browser performance to breaking things like TileSprite rendering (#2262)
@photonstorm
Copy link
Collaborator

What you're seeing is a result of canvas pixel rounding. However I believe the fix is easy, because a Game should never have non-integer dimensions. So this is now enforced in the Game constructor, which should prevent the problem from arising (it's still possible to call Game.resize and mess things up, but if you've gone that far on your head be-it I think)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@photonstorm @tsphillips