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.

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

DynamicTilemapLayer webgl renderer applies layer scale to layer position #4104

Closed
cadaverous-eris opened this issue Oct 9, 2018 · 3 comments

Comments

@cadaverous-eris
Copy link
Contributor

cadaverous-eris commented Oct 9, 2018

Version

  • Phaser Version: 3.14.0
  • Operating system: Windows 10
  • Browser: n/a

Description

The dynamic tilemap layer webgl renderer draws tiles at the incorrect location because it multiplies the layer's position by the layer's scale. The canvas renderer works as expected and doesn't scale the layer's position.

The problem is caused by this line of code in phaser/src/tilemaps/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js.

(tw + x + tile.pixelX) * sx, (th + y + tile.pixelY) * sy,
should be changed to
x + ((tw + tile.pixelX) * sx), y + ((th + tile.pixelY) * sy),.

I'll look into making a pull request to fix this.

Example Test Code

var config = {
    type: Phaser.WEBGL,
    //type: Phaser.CANVAS, 
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    pixelArt: true,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('tiles', 'assets/tilemaps/tiles/tiles2.png');
}

function create ()
{
    var map = this.make.tilemap({ tileWidth: 70, tileHeight: 70, width: 10, height: 10});
    var tiles = map.addTilesetImage('tiles');

    var layer1 = map.createBlankDynamicLayer('layer1', tiles);
    layer1.randomize(0, 0, map.width, map.height, [ 0 ]);
    layer1.setScale(0.25);

    var layer2 = map.createBlankDynamicLayer('layer2', tiles);
    layer2.randomize(0, 0, map.width, map.height, [ 12 ]);
    layer2.setAlpha(0.5);

    // both layers are set to the same position, but with the webgl renderer the position they are drawn at is multiplied by their scale
    // if you change the game config to use the canvas renderer, both layers are drawn at the same position
    layer1.setPosition(200, 100);
    layer2.setPosition(200, 100);
}

function update (time, delta)
{
}

Additional Information

In the example above, the game uses the webgl renderer and position the tilemap layers are drawn at is affected by their respective scale factors.

After changing the game config to force the canvas renderer, both layers are drawn at the same position, as one would expect.


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

cadaverous-eris pushed a commit to cadaverous-eris/phaser that referenced this issue Oct 9, 2018
@cadaverous-eris
Copy link
Contributor Author

Just tested this with Phaser 3.15.0 and the issue is still present.

@photonstorm
Copy link
Collaborator

That would be why this issue isn't yet closed and wasn't mentioned in the 3.15 change log.

@photonstorm
Copy link
Collaborator

Thanks for opening this issue, and for submitting a PR to fix it. We have merged your PR into the master branch and attributed the work to you in the Change Log. If you need to tweak the code for whatever reason please submit a new PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants