Rotated tiles renders on wrong coordinates

[nkholski]

The image to the left is how it looks like in Tiled, and the other one how it's rendered by phaser-tiled. The original tile is the spike pointing upwards, the other ones is rotated with their position displaced. I guess this is'nt a general problem, but I can't think of anything special I've done and I don't know where to start to give any hints on what could have gone wrong.

[nkholski]

I might be onto something by adding two lines manipulating the x- and y-values in Tile.js (starting from line 124). It looks OK, but probably need testing. Also, I don't know how to get the tile width in any other way than multiplying the center-value by two. And if this bug is specific for my game, this little fix might just add a new bug for others.

    // setup the flipped states
    if (this.properties.flippedX) {
      this.scale.x = -1;
      this.x+=this.centerX*2; // Added
    }

    if (this.properties.flippedY) {
      this.scale.y = -1;
      this.y+=this.centerX*2; //Added
    }

[englercj]

I think this is happening because of anchors. What likely needs to happen is to set the anchor property of tiles to (0, 1), which is what Tiled uses for objects. It may treat a rotated tile like an object when drawing.

I would try setting the anchor of rotated tiles to (0, 1) and see if that solves the issue.

[nkholski]

Both this.anchor.x and y is 0 when untouched. I replaced the the lines above with "this.anchor.setTo(0,1)" and since I don't really know how anchor can affect the position I tried variants like "this.anchor.setTo(0,1)", "this.anchor.y=1" ,"this.anchor.x=1" and "this.anchor.setTo(0,this.centerY)" but found nothing that solves the problem. The only thing that seems to work for me so far is to manipulate the position.

[englercj]

Anchor doesn't effect position, it effect where the texture attaches to your position. You will see the texture move but your object's position doesn't. That seems weird (impossible) that your tile didn't move at all when changing the anchor. That tells me that it is getting reset back to 0 somewhere else, most likely.

I'll take a look at this when I have some time. Can you share a map with me that has the problems you experience so I can add it to: https://github.com/englercj/phaser-tiled-tests

[nkholski]

I didn't say it didn't move, but still displaced. I will try a bit more to see if I think of something. Btw I I tried maps made in Tiled 0.9-something and current nightly (linux), and phaser 2.2.1 and 2.2.2. I've sent you n email with my tmx-file attached.

[evan-boissonnot]

I'm face in the same problem. What was the solution ?

In my tile :

In the result :

Code i'm using : layer.objects.forEach(object => { if (object.x && object.y) { const collisionProperty = this.getPropertyFromLayer(object.properties, 'group'); const textureProperty = this.getPropertyFromLayer(object.properties, 'texture');

                    if (typeof(collisionProperty) !== 'undefined' && collisionProperty.value &&
                        typeof(textureProperty) !== 'undefined' && textureProperty.value) {
                        const sprite = new Phaser.GameObjects.Sprite(this, object.x, object.y, textureProperty.value);

                        if (object.width && object.height) {
                            sprite.height = object.height;
                            sprite.width = object.width;
                        }