TileMap Image Position not Aligned with Tilemap Layer

Phaser 3
1

hi all,
I’m trying to load a TileMap (generated in Tiled) and display the image/sprite in phaser.

However, The position of the image seems to be not aligned with the tilemap layer.

Any hints what I’m missing?

here is a very simple setup (codepen below):

This is how I add the tilemap:

        var dictTileMap = this.make.tilemap({key: 'blacktiles'});
        var dictImage = dictTileMap.addTilesetImage('blacktiles');
        var dictLayer = dictTileMap.createLayer('Tile Layer 1', dictImage, 10,10);
        console.log(dictLayer.getBounds());

I’m placing the tilemap layer at coordinates 10/10, while does position the tilemap layer in the top left corner as you can see from the console.log.
However, the image is 10px off both horizontally and vertically.

O have created a pen to demonstrate this:

Any help on how to align image/and layer is greatly appreciated!

2

That looks right to me. Tilemap Layer origin is top-left (0, 0), and that’s on the game canvas at (10, 10).

3

thanks samme for looking into this, but I’m not sure what exactly “looks right to you”:

  • The tilemap layer is as expected for me, it was created at 10/10, so top left is at 0/0 with width and height being 20px
  • what does not look as expected for me is: the image should also display top left (0/0), but it is 10 px off for both x and y
4

Oh, I think I see the confusion.

In Phaser v3.55 tilemap layer getBounds() is incorrect. In that example dictLayer.getBounds() includes { x: 0, y: 0 } but the correct values are { x: 10, y: 10 }. You can “fix” this with

dictLayer.setOrigin(0, 0);

The tilemap layer is the black square and it appears in the right place, top-left at (10, 10). The white square is just the game background color.

1 Like
5

thanks! that’s what I was looking for!

Unfortunatley, I don’t have time to contribut to phaser at the moment, but I think this should be fixed as this results in click events getting tracked on the wrong bounding box.

since I am trying to track click events, I also had to apply setOrigin() to the gameObject I receive after I doing matter.add.gameObject(dictLayer)