Circle mask image undefined (reading 'queueDepthSort')

[crapthings]

Uncaught TypeError: Cannot read properties of undefined (reading 'queueDepthSort')

import Phaser from 'phaser'
import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'
import MoveToPlugin from 'phaser3-rex-plugins/plugins/moveto-plugin.js'
import ShakePositionPlugin from 'phaser3-rex-plugins/plugins/shakeposition-plugin.js'
import RandomPlacePlugin from 'phaser3-rex-plugins/plugins/randomplace-plugin.js'
import WaitEventsPlugin from 'phaser3-rex-plugins/plugins/waitevents-plugin.js'
import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage.js'

import IntroScene from './scenes/intro'
import GameScene from './scenes/game'
import BattleScene from './scenes/battle'
import NewScene from './scenes/new'

const game = new Phaser.Game({
  title: '',
  type: Phaser.AUTO,
  width: window.innerWidth * window.devicePixelRatio,
  height: window.innerHeight * window.devicePixelRatio,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  physics: {
    default: 'arcade',
    arcade: {
      // debug: true,
      // debugShowBody: true,
      // debugShowStaticBody: true,
    }
  },
  scene: [
    IntroScene,
    GameScene,
    BattleScene,
    NewScene,
  ],
  plugins: {
    global: [
      {
        key: 'rexCircleMaskImagePlugin',
        plugin: CircleMaskImagePlugin,
        start: true
      },
      {
        key: 'rexMoveTo',
        plugin: MoveToPlugin,
        start: true,
      },

      {
        key: 'rexShake',
        plugin: ShakePositionPlugin,
        start: true,
      },

      {
        key: 'rexRandomPlace',
        plugin: RandomPlacePlugin,
        start: true
      },
      {
        key: 'rexWaitEvents',
        plugin: WaitEventsPlugin,
        start: true
      },
    ],
    scene: [
      {
        key: 'rexUI',
        plugin: RexUIPlugin,
        mapping: 'rexUI'
      },
    ],
  }
})

import Phaser from 'phaser'

export default class extends Phaser.Scene {
  constructor () {
    super('new')
  }

  init () {

  }

  preload () {

  }

  create () {
    this.createBackground()
    this.createPlayer()
    this.setCamera()
  }

  update () {

  }

  createBackground = () => {
    this.background = this
      .add
      .image(0, 0, 'scene1')
      .setScale(2)

    this.background.setPosition(this.background.displayWidth / 2, this.background.displayHeight / 2)
  }

  createPlayer = () => {
    this.player = this.plugins.get('rexCircleMaskImagePlugin').add(this.background.getCenter().x, this.background.getCenter().y, 'hero')
    this.player.moveTo = this.plugins.get('rexMoveTo').add(this.player)

    this.player.moveTo.on('complete', () => {
      this.movePlayer({ speed: 10 })
    })

    this.movePlayer({ speed: 400 })

    // this.input.on('pointerdown', ({ x, y, ...pointer }) => {
    //   this.player.moveTo.moveTo(pointer.worldX, pointer.worldY)
    // })
  }

  movePlayer = ({ speed = 50 } = {}) => {
    const x = Phaser.Math.Between(0, this.background.displayWidth)
    const y = Phaser.Math.Between(0, this.background.displayHeight)
    this.player.moveTo.moveTo(x, y, speed)
  }

  setCamera = () => {
    this.cameras.main.startFollow(this.player)
    this.cameras.main.setBounds(0, 0, this.background.displayWidth, this.background.displayHeight)
  }
}

[rexrainbow]

var image = scene.add.rexCircleMaskImage(x, y, key, frame, config);

Reference

[crapthings]

@rexrainbow hey I've tried it but I got this Uncaught TypeError: this.add.rexCircleMaskImage is not a function

if I add plugin to preload, it works, but not working at init game stage

scene.load.plugin('rexcirclemaskimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexcirclemaskimageplugin.min.js', true);

[rexrainbow]

Here is a test code of import CircleMaskImagePlugin from path.

scene.load.plugin instruction is designed for preload stage.

[crapthings]

@rexrainbow ah nice it works

I've just copied the wrong import path at

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/circlemaskimage/#import-class

change

import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage'

to

import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage-plugin.js'

[rexrainbow]

To use CircleMaskImage class in 'phaser3-rex-plugins/plugins/circlemaskimage' :

var image = new CircleMaskImage(scene, x, y, key, frame, config);
sscene.add.existing(image);

Reference