gridMovementPlugin property not found on Scene

[splashsky]

Hey there! I'm using VS Code Insiders working with Phaser and the plugin, and I was following the basic movement example in the docs. In any part of the code where I use this.gridMovementPlugin.... I get the gridMovementPlugin property not found on Scene error. Is there any way to fix this? The code itself works fine.

Edit: Here's the code I have, as well, in case it's necessary

import * as Phaser from "phaser";
import { loadSpritesheet } from "../utils/LoadSpritesheet";
import { loadTilemap, setupTilemap } from "../utils/LoadTilemap";
import { resizeGameToViewport } from "../utils/ResizeGameToViewport";
import { Player } from "../classes/Player";

const SceneConfig: Phaser.Types.Scenes.SettingsConfig = {
    active: false,
    visible: false,
    key: "Game"
};

const TilesetBGC: string = "#293C42";
const Tileset: string = "assets/tf_atlantis_tiles.png";
const MapName: string = "atlantis-map";
const MapJson: string = "assets/atlantis-tilemap.json";

export class GameScene extends Phaser.Scene {
    constructor() {
        super(SceneConfig);
    }

    public preload() {
        loadTilemap(this, "tiles", Tileset, MapName, MapJson);
        loadSpritesheet(this, "player", Player.spritesheet, Player.frameConfig);
    }

    public create() {
        const tilemap = setupTilemap(this, "tiles", "Atlantis", MapName);

        const playerSprite = this.add.sprite(0, 0, "player");
        playerSprite.scale = Player.scale;

        this.cameras.main.setBackgroundColor(TilesetBGC);
        this.cameras.main.startFollow(playerSprite);
        this.cameras.main.roundPixels = true;

        const GridMovementConfig = {
            characters: [
                {
                    id: "player",
                    sprite: playerSprite,
                    walkingAnimationMapping: 0,
                    startPosition: new Phaser.Math.Vector2(8, 8)
                }
            ]
        };

        this.gridMovementPlugin.create(tilemap, GridMovementConfig);
    }

    public update() {
        resizeGameToViewport(this);

        const cursors = this.input.keyboard.createCursorKeys();

        if (cursors.left.isDown) {
            this.gridMovementPlugin.moveLeft("player");
        } else if (cursors.right.isDown) {
            this.gridMovementPlugin.moveRight("player");
        } else if (cursors.up.isDown) {
            this.gridMovementPlugin.moveUp("player");
        } else if (cursors.down.isDown) {
            this.gridMovementPlugin.moveDown("player");
        }
    }
}

[Annoraaq]

Hi splashsky,

this seems to be Typescript complaining, because the properties for the plugins are added to the GameScene by Phaser at runtime. At compile time Typescript only knows that this refers to class GameScene extends Phaser.Scene which has no property called gridMovementPlugin. I have to investigate, if there is a different way to access plugins in a type safe way.

However, as a workaround you could create a variable or property and tell Typescript what type it has:

const gridMovementPlugin: GridMovementPlugin = (<any>this).gridMovementPlugin;

Or you could add it to your GameScene:

export class GameScene extends Phaser.Scene {
   private gmPlugin: GridMovementPlugin;
    constructor() {
        this.gmPlugin = (<any>this).gridMovementPlugin;
        super(SceneConfig);
    }
   // ...
}

Be aware that you are telling typescript that you know for certain that this has a property gridMovementPlugin of that type.

I have not tested the code. Let me know if that helped.