about the position of a isometric tile

[sparkok]

I have an isometric tiled map,and its map tile is 64 x 32,and the size of features in the map is 64 x 128.
I want to make a red rectange to match the blue feature in the map,but I find there is a vertical offset,I don't understand what is wrong?
the code is following

   getLastIsoMapLayer(): IsometricMap {
        const layers = this.getIsoMapLayers();
        if(layers.length >0){
            return layers[layers.length-1];
        }
    }

    const lastIsoLayer = this.getLastIsoMapLayer()
    const c = 0,r = 0
    const tile = lastIsoLayer.getTile(c,r)
    const pos = lastIsoLayer.tileToWorld(vec(c,r))
    const play = new Player()
    play.pos = pos
    play.z = tile.get(TransformComponent).z - 0.1
    this.add(play)

the code of Player

export class Player extends Actor {
  tileWidth = 64
  tileHeight = 32
  graphic :Canvas
  constructor() {
    super({
      width: 64,
      height: 128,
      anchor: vec(32/64,(128-16)/128),
    });
  }
  onInitialize() {
    this.graphic = new Canvas({
      width: this.width,
      height: this.height,
      cache: true,  
      draw: (context) => {
          context.lineWidth=2.7;
          context.strokeStyle="#ff0000"

          context.moveTo(0, 0);
          context.lineTo(this.width,0);
          context.lineTo(this.width,this.height);
          context.lineTo(0,this.height);
          context.lineTo(0,0);
          context.stroke();

          context.moveTo(this.width/2, 0);
          context.lineTo(this.width/2,this.height);
          context.stroke();

          context.moveTo(0,this.height/2);
          context.lineTo(this.width,this.height/2);
          context.stroke();
      }
  })
    this.graphics.use(this.graphic);
  }
}

[eonarheim]

@sparkok I'll look into this today, do you have a sample repo you can share?

I suspect the difference might be due to how isometric tiles are drawn. To match Tiled, they draw from the bottom left corner of their graphics https://github.com/excaliburjs/Excalibur/blob/main/src/engine/TileMap/IsometricMap.ts#L178

I have a post that explains the reasoning better here https://erikonarheim.com/posts/handling-height-in-isometric/

It's possible that if you draw the player in the same manner it might match with what you expect, here is an example https://github.com/eonarheim/isometric-layers/blob/main/player.ts

[sparkok]

this is my .tmx file.
question2.zip

[sparkok]

my local project is too complex to run easily，so i have to make a sample project and put it on github.

[eonarheim]

That would be a big help 👍

[sparkok]

hello,eonarheim,I made a repo.
https://github.com/sparkok/learn-excaliburjs1
start is with 'yarn run dev',and click the menu 'no matched',you can show the not matched result.
the error code is in the function (testPlaceTinInCenterOfTile in level-one.ts).
thank you!

[eonarheim]

@sparkok This is perfect, I'll dig into this 👍