'Having a problem with Javascript Phaser 3 Class

I'm trying to implement the following code into a class, as follows is the code ,and the attempted class.

Implementation

 //----------------------------MIST------------------------------------
    ...
    var particles = this.add.particles('rain');

    var emitter = particles.createEmitter({
        
        x: 500,
        y: -400,
        angle: { min: 0, max: 120 },
        speed: 300,
        gravityY: 100,
        lifespan: { min: 1000, max: 2000 },
        blendMode: 'ADD'
        
    });
    //this.mCloud = this.physics.add.existing(new Clouds(this, 500, 500,'clouds'))
   
    this.Cloud = [];
    this.levelData_Clouds = this.cache.json.get('level_clouds');
    this.levelData_Clouds.cloudData.forEach(function(element){
        this.Cloud.push(new Clouds(this, element.x, element.y, 'clouds', element.isAddative));
    }, this)   

    emitter.startFollow(this.Cloud[0])

    this.rCloud = [];
    this.levelData_Clouds = this.cache.json.get('level_clouds');
    this.levelData_Clouds.rain_cloudData.forEach(function(element){
        this.rCloud.push(new RainClouds(this, element.x, element.y, 'rainclouds', element.isAddative));
    }, this)   

    emitter.startFollow(this.rCloud[0])
...

Attempted Class.

As you can see here is the class some of what is there , but the constructor doesn't work.

export default class Rain extends Phaser.GameObjects.Particles.Particle{
constructor (emitter){
    super(emitter);
    this.x: 500,
    this.y: -400,
    this.angle: { min: 0, max: 120 },
    this.speed: 300,
    this.gravityY: 100,
    this.lifespan: { min: 1000, max: 2000 },
    this.blendMode: 'ADD'
}
rain(){
    this.Cloud = [];
    this.levelData_Clouds = this.cache.json.get('level_clouds');
    this.levelData_Clouds.cloudData.forEach((element)=>{
        this.Cloud.push(new Clouds(this, element.x, element.y, 'clouds', element.isAddative));
    }, this)   

} }



Solution 1:[1]

I would like to help, but I don't 100% understand the problem, and without knowing too much of the code and how the class should/would be used.

THAT said here are some pointers:

  • don't extend Phaser.GameObjects.Particles.Particle this doesn't makes sense, it would make more scene to extend Phaser.GameObjects.Particles.ParticleEmitter, or simply no class.
  • the properties your are setting in the constructor are properties of emitters, but not particles, so it won't work.
  • be careful when using the this keyword, what you are referring to (like in this.cache).

This might work for your usecase:

You would have to pass the scene into the constructor. if you want you could also pass the emitter, and only set the properties in the constructor

    export default class Rain {
        constructor (scene){
            this.scene = scene;
            this.emitter = particles.createEmitter({
                x: 500,
                y: -400,
                angle: { min: 0, max: 120 },
                speed: 300,
                gravityY: 100,
                lifespan: { min: 1000, max: 2000 },
                blendMode: 'ADD'
                
            });
        }

        init(){
            this.Cloud = [];
            //"this" used for "this.cache", has to be "this.scene"
            this.levelData_Clouds = this.scene.cache.json.get('level_clouds');
            this.levelData_Clouds.cloudData.forEach((element)=>{
                this.Cloud.push(new Clouds(this.scene, element.x, element.y, 'clouds', element.isAddative));
            }, this)   
        } 
    } 

P.s.: try to post all your code in the Question, not the comments since they are hard to read. You should be able to edit your question even after posting. (this is even encouraged)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1