Collision box always starting on top-left corner when using classes

[Mike018]

The collision box around a sprite works without using classes and is the appropriate size compared with the sprite, but once I make a class, then add it to the game state, the collision box will always start on the top left corner and it will just be a little dot regardless of how big the sprite is. What am I doing wrong here?

 

class Player extends Phaser.Sprite {

    constructor(game, x, y) {

        super(game);

        this.playerBody = this.addChild(
            game.add.sprite(
                x,
                y,
                'atlas1', 'dot'
            )
        );
        this.playerBody.anchor.set(0.5);

        game.add.existing(this);
        this.inputEnabled = true;
        this.input.enableDrag();
        this.enableBody = true;
        this.game.physics.enable(this, Phaser.Physics.ARCADE);
    
    }

}

export default Player;

 

this.player = new globalObjects.Player(this.game, 500, 500);

[FakeWizard]

It's pure guess, but I think, it could be cause you're adding an existing instance of object which is currently being initialized. Perhaps changing the order a little bit may help here. 

class Player extends Phaser.Sprite {

    constructor(game, x, y) {
        super(game);

        this.playerBody = this.addChild(
            game.add.sprite(
                x,
                y,
                'atlas1', 'dot'
            )
        );
        this.playerBody.anchor.set(0.5);

        this.inputEnabled = true;
        this.input.enableDrag();
        this.enableBody = true;
        this.game.physics.enable(this, Phaser.Physics.ARCADE);

        game.world.add( this );
    }

}

 

Also not really sure what are you trying to do here.. is the little box your hit box? Also are you sure you want to position this box on the same position as Player? Cause now Player will be placed at 0,0 position and the 'dot' will be spawned at the x,y (pre-defined) coordinates. 

[Qfo]

I do not quite understand what you want, but why you use child?

In your code problem here:

class Player extends Phaser.Sprite {

    constructor(game, x, y) {
        // This is create the invisible sprite without x and y. If x, y not defined x = 0, y = 0;
        // super(game); - wrong; x = 0, y = 0;
        super(game, x, y); //correct, x = x, y = y;

        // Also, you need to specify the size of the invisible sprite.
        this.width = 300;
        this.height = 300;

        this.playerBody = this.addChild(
            game.add.sprite(
                // Child x and y relative parent x, y.
                x, // parent.x + x, if you don't want offset set 0
                y, // parent.y + y, if you don't want offset set 0
                'atlas1', 'dot'
            )
        );
        this.playerBody.anchor.set(0.5); // Child anchor relative parent anchor. 
        // If you don't want offset set anchor parent
        this.anchor.set(0.5);

        game.add.existing(this);
        this.inputEnabled = true;
        this.input.enableDrag();
        //this.enableBody = true;  is a Group property, not Sprite's. Thx samme.
        this.game.physics.enable(this, Phaser.Physics.ARCADE);

    }

}

 

Also, you can to try use my Player class

class Player extends Phaser.Sprite {
    constructor(x, y, key, frame) {
        super(game, x, y, key, frame);
        game.physics.arcade.enable(this);
        //this.enableBody = true; is a Group property, not Sprite's. Thx samme.
        this.body.gravity.y = 100;
        this.body.maxVelocity.setTo(100, 100);
        this.anchor.set(0.5);

        game.add.existing(this);
    }
}



this.player = new Player(100, 100, 'player', frame);

 

[samme]

enableBody is a Group property, not Sprite's.