How include plugin in Angular component with Phaser 3

Phaser 3
1

Hi, I would like to include textedit-plugin.js in my project but it looks like it’s not loaded correctly.

Here is my code:

import { Component, OnInit } from ‘@angular/core’;
import TextEditPlugin from ‘phaser3-rex-plugins/plugins/textedit-plugin.js’;

@Component({ templateUrl: ‘placetroops.component.html’ })
export class PlaceTroopsComponent implements OnInit {
images: RecruitmentImages;

phaserGame: Phaser.Game;
placeTroopsConfig: Phaser.Types.Core.GameConfig;

}

constructor()
{
    this.placeTroopsConfig = {
        type: Phaser.CANVAS,
        height: 300,
        width: 800,
        backgroundColor: 'A3A69B',
        scene: [ PlaceTroopsScene ],
        parent: 'placeTroopsContainer',
        dom: {
            createContainer: true
        },
        plugins: {
            scene: [
                {
                    key: 'rexTextEdit',
                    plugin: TextEditPlugin,
                    start: true
                }
            ]
        },
        physics: {
          default: 'arcade',
          arcade: {
            gravity: { y: 100 }
          }
        }
      };
}

ngOnInit() {
    this.phaserGame = new Phaser.Game(this.placeTroopsConfig);
}

class PlaceTroopsScene extends Phaser.Scene {
constructor() {
super({ key: ‘placeTroops’ });
}

textEdit!: TextEditPlugin;

troops1: any;
text1: any;
grenadier: any;

preload() {
  console.log('preload method');
  this.load.image('grenadier', 'assets/battles/grenadier2.png');
}

create() {
    var printText = this.add.text(100, 100, '0', {
        color: 'yellow',
        fontSize: '12px',
        fixedWidth: 50,
        fixedHeight: 20,
        backgroundColor: '#333333'
    })
        .setOrigin(0.5)
        .setInteractive()
        .on('pointerdown', function () {
            var config = {
                type: 'number',
                onTextChanged: function (textObject, text) {
                    // Check input text here.
                    textObject.text = text;
                }
            };               
            this.plugins.get('rexTextEdit').edit(printText, config);
        }, this);


  this.troops1 = this.add.rectangle(28, 53, 50, 100);
  this.troops1.setStrokeStyle(4, 0x716E63);

  this.grenadier = this.add.sprite(20, 50, 'grenadier').setInteractive();
  this.grenadier.input.draggable = true;

  this.input.setDraggable(this.grenadier);

  var style = { font: "10px Arial", fill: "#ff0044", align: "top", backgroundColor: "#ffffff" };
  
  this.text1 = this.add.text(0, 0, "grenadier", style);

  var cam = this.cameras.main;
  cam.zoom = 1;

this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
    gameObject.x = dragX;
    gameObject.y = dragY;
})

this.input.on('dragstart', (pointer, gameObject) => {
    gameObject.setTint(0xff69b4);
    this.children.bringToTop(gameObject);
})

this.input.on('dragend', (pointer, gameObject, dropped) => {
    gameObject.setTint();
    if (!dropped) {
        gameObject.x = gameObject.input.dragStartX;
        gameObject.y = gameObject.input.dragStartY;
    }
})
}

update() {
    this.text1.x = Math.floor(this.grenadier.x -30 + this.grenadier.width / 2);
    this.text1.y = Math.floor(this.grenadier.y -30 + this.grenadier.height / 2);
}

}

this is the error:
ERROR TypeError: Cannot read properties of null (reading ‘edit’)

in this line:
this.plugins.get(‘rexTextEdit’).edit(printText, config);

Also typscript is not sugesting anything when I put a dot after this.plugins.get(‘rexTextEdit’)

Anyone have an idea what might be the issue?

Thanks in advance for help.

2

This line has an issue.

You’re declaring a function() { ... } which changes the scope of this to the function instance.
Using an arrow function instead will maintain the meaning of this (the scene):

on('pointerdown', () => {

.