Phaser 3 Tilesprite positioning strange behaviour

Phaser 3
1

I’m finding a strange occurrence about the positioning of TileSprite object in phaser 3 typescript. So, I have a group and pool of platform tilesprites:

    // group with all active platforms.
    this.platformGroup = this.add.group({
        // once a platform is removed, it's added to the pool
        removeCallback: function (platform) {
            platform.scene.platformPool.add(platform);
        }
    });

    // platform pool
    this.platformPool = this.add.group({
        // once a platform is removed from the pool, it's added to the active platforms group
        removeCallback: function (platform) {
            platform.scene.platformGroup.add(platform);
        }
    });

The problem code lies here:

    // Using platform from platform pool
        platform = this.platformPool.getFirst();
        platform.x = posX;
        platform.y = posY;

        this.platformPool.remove(platform);
        platform.displayWidth = platformWidth;
        platform.tileScaleX = 1 / platform.scaleX;
        platform.active = true;
        platform.visible = true;

        // Adding new platform
        platform = this.add.tileSprite(
            posX,
            posY,
            platformWidth,
            32, // platform size
            'platform'
        );

        this.physics.add.existing(platform);
        platform.body.setImmovable(true);
        platform.body.setVelocityX(
            Phaser.Math.Between(gameOptions.platformSpeedRange[0], gameOptions.platformSpeedRange[1]) * -1
        );
        platform.setDepth(2);
        this.platformGroup.add(platform);

Strangely they result in something like this:
enter image description here

The platform on top (from adding new platform code) is how I want it to be. Whenever it tries to reuse platforms from the pool and modify its x and y, it always results as slightly off in positioning like the picture above, even though posX and posY is exactly the same ! I’m at my wits end on why this is happening…

One other strange thing: The code works fine in javascript but when I try to convert it into typescript, it became like this! “Converting” as in adding types to every class members and casting things (game.config settings) to number as needed. I wonder why ???

The code was taken from the tutorial: https://www.emanueleferonato.com/2019/01/23/html5-endless-runner-built-with-phaser-and-arcade-physics-step-5-adding-deadly-fire-being-kind-with-players-by-setting-its-body-smaller-than-the-image/

2

Which Phaser version are you using?

3

According to my package.json, it’s Phaser ver. 3.23.0.

4

You can try changing to the version from the tutorial.